Accessibility Tips - HTML Editor

Use Lists

Who this helps

• People with screen readers and other assistive technology because lists are easy to find and navigate
• People who may have difficulty with reading comprehension

Who this also helps

• Everyone, because lists break up a "wall" of text
• Everyone, because lists provide a simple, intuitive structure
• Everyone, because lists draw attention to important information

Strategy

Liberally use lists. Note that there are two types: unordered and ordered. Unordered lists have bullet points and should be used when items in the list have no preferred order. Ordered lists have numbers and/or letters and should only be used when the order of the items in the list matters.

Use Bold

Screen readers and other assistive technologies tell the user when something is bolded. That makes bolding a great option.

Strategy

To maximize accessibility, use bold instead of

• All caps, since screen readers do not communicate capitalization and, to sighted learners, caps imply shouting
• Italics, which can be hard to read and, like all caps, can come across as shouting
• Color, which blind, low-vision and color-blind students may miss; or if you want to use color, use it in conjunction with bold text

Centered Text Problems

Centered text is harder to read than "paragraph" text. With centered text, each line starts in a different place, making your reader work harder. Also, the centered text does not always adjust to fit differently-sized screens.

Aligned by a straight edge on the left, for paragraph text or <p> text, the user knows exactly where to place their eyes to read each line of text.

Inaccessible Tables

Tables convey a lot of information and connections between information but do not work for everyone.

For example, unless told otherwise, screen readers ignore a table and simply read out the content in the table in whatever order it appears in the code. 

Problems with Screen Readers and tables

Imagine you have a table in your course site that has not been properly formatted, such as the one in the following screenshot.

Though a sighted user can quickly associate information in a cell and the appropriate row and column header, a Screen Reader would most likely start at the top and read left to right: course schedule, unit, start date, topic, room, 1-Lecture, January 11, 10 AM, S210 ENR2, 1-Lab, January 12, 11 AM, Introduction to Media Analysis, S120B ENR2, 1 - Guest Speaker, January 13, 3:30 PM, Media Practice, N572 ENR2.

Problems with cell phones, tablets and tables

Tables take up a lot of space. That means people who use phones, tablets, or other devices with small screens may not be able to see the entire table at once. If they have to scroll, they may lose the association between a cell and its column and row headers.

Strategy

Be sure to follow all the formatting steps in the [LINK_TBD: instructions for creating accessible tables].

Preview Your Work

You can Preview your webpage to verify what it looks like before you Publish it.

Step 1

Select the Preview button. If you do not see it, select the More Actions menu (three dots on the right).

Step 2

A new window will show you exactly how your webpage will appear.

Step 3

Select the Close button when finished. This does not save your work.

Check Accessibility

The Accessibility Checker checks for issues that make it difficult for people with disabilities to read or use your page. 

It checks for the following potential issues:

• Proper use of Headings. This confirms that proper placement and sequence (H1, H2, H3...) are used on the page.
• Proper color contrast. This checks the colors on your page to ensure enough contrast (e.g., black type on a white background) so that everyone can see them.
• Proper table formatting
  • Whether a table caption was used at the start of the table
  • Whether the row and/or column headings are properly identified
  • Whether the heading cells are using the proper tags (<th>) and scope ("col" or "row")
• Proper image formatting. This checks to see if the image includes a label identifying what it is to those with sight impairments. Note that decorative images can be labeled as decorative, which tells the screen reader to ignore them.

To use the Accessibility Checker:

Step 1

Select the Accessibility Checker icon. If you do not see it, select the More Actions menu (three dots on the right).

Step 2

If there are no issues detected, select OK. 

Step 3

If you have issues, the Accessibility Checker window will open and let you know which issue out of which number of issues is described. Use the up and down carets on the right to scroll through all of the issues.

Step 4

To learn more about the identified issue, select the Question Mark icon (see screenshot above). 

Back to Top