Web Page Accessibility Tips
NIC.edu was built with accessibility in mind. However, it’s the responsibility of everyone contributing to content of the web site to structure their content for accessibility. Many of the accessible design principles used in making Microsoft Word documents apply to making accessible web pages.
Headings
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.
Alt Text for Images
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 user 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 WebDriver right when you insert your image into your page.
For decorative images that you want assistive technologies to ignore, type a space in the Alt text field.
Lists
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.
Font Size and Type
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.
Color
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.
Descriptive Hyperlinks
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:
- Donald Tapscott, in his paper ”Growing Up Digital” says these students….
- Read the full article.
Tables
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 heading columns and rows – this helps a screen reader to read the data in a meaningful way and not as a string of numbers or words.