Web Page Accessibility Tips

If you only have time to do one thing to make your content accessible, use headings! Headings are the labels given to each section of your doc/webpage; they give your document structure. Often, people use a bold or larger font to indicate section titles. A screen reader, however, does not differentiate between text that is bold or larger. By using headings, a person using a screen reader can jump from section to section rather than read through all of the text to find what they need. 

Headings are used in a hierarchical manner. Anything formatted as Heading 3 should be a sub-section to what has been labeled as Heading 2. Headings are nested under other headings; you should never jump from Heading 1 to Heading 4 without using Headings 2 and 3. 

The next thing to do, for anything you create with images, is to add alt text. Alt text (alternative text) is a textual description of the image. The description should be specific to the context in which the image is being displayed – think about what information is being conveyed in the picture that the student needs to know. For more info on writing good alt text, visit the WebAIM website on Alt Text.  Alt text can be added to an image in WordPress right when you import your new image to the media library. NOTE: The Alt text will need to be different than the Title for the image, or you will get an error when trying to insert your image.

For decorative images that you want a screen reader to ignore, you simply need to check the box in the Image Details, indicating that your image is a Decorative Image.

When you create lists, use the bulleted or numbered list formatting tool. This will allow a screen reader to identify the number of items in a list.

Try to use a simple font in a good size- no smaller than 11pt for printed materials.

Avoid fancy or cursive fonts as these can be difficult to read. 

Avoid using too many fonts and typing long phrases or sentences in ALL CAPS. 

Do NOT use underline on text within a web page for emphasis.  Underlined text that is not linked will create unnecessary confusion to the user experience.

Do not use color alone to convey meaning. If someone is colorblind, or blind, the emphasis you’re trying to create by using color will be lost. 

Additionally, when you use colors, make sure they are high contrast. If you want to check if the contrast is good enough, you can visit WebAIM’s Color Contrast Checker website.

When you are providing a link to something, do not just paste in the URL. Imagine listening to a screen reader read that off Yuck. Also, avoid using phrases like “click here” as that does not give the user a description of where they will be taken. Instead, use descriptive hyperlinks.

• Example of a bad hyperlink:
  • Donald Tapscott, in his paper “Growing Up Digital,” http://www.ncsu.edu/meridian/jan98/feat_6/digital.html says these students…
• Example of a good, descriptive hyperlink: (What you would hyperlink is in quotation marks for this demonstration)
  • Donald Tapscott, in his paper “Growing Up Digital” says these students….
  • Read the “full Columbia Basin Herald article.”

Only use tables if you absolutely have to. Do not use tables to make your page look pretty/organized – use them to organize data. When creating a table, be sure to indicate the heading row – this helps a screen reader to read the data in a meaningful way and not as a string of numbers or words.