Tips for Making Your Website Accessible
1. Use headings correctly to organize the structure of your content.
Screen reader users can use heading structure to navigate content. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers.
Examples of proper use of headings:
- Use <h1> for the primary title of the page. Avoid using an <h1> for anything other than the title of the website and the title of individual pages.
- Use headings to indicate and organize your content structure.
- Do not skip heading levels (e.g., go from an <h1> to an <h3>), as screen reader users will wonder if content is missing.
2. Include proper alt text for images.
Alt text should be provided for images, so that screen reader users can understand the message conveyed by the use of images on the page. This is especially important for informative images (such as infographics). When creating the alt text, the text should contain the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt.
The exception to this rule is when an image is used purely for decoration; in this case, the alt text can be left empty so that the screen reader user is not distracted by the repeated content on the page.
If an image is the only content of a link, the screen reader will read the file name if alt text is not provided. Always provide alt text for images that are used as links.
3. Give links unique and descriptive names.
Write links that make sense out of context. Use descriptive link text detailing the destination, not just “read more,” or other ambiguous phrases. Link text should be made up of phrases rather than single words, so that users with limited motor control will not have difficulty selecting links.
Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user.
The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.
The following examples provide unclear link text:
- Click here for instructions on how to use Brightspace.
- Learn more about color and accessibility here and here
- Accessibility 101 (Register) | Accessibility 102 (Register)
Usable link examples:
- Instructions on how to use Brightspace are available on the website.
- Learn more about color and accessibility.
- Register for: Accessibility 101 | Accessibility 102
4. Use Color Carefully
Red-green color blindness is by far the most common type of color vision deficiency, affecting approximately 8% of the population. Using ONLY colors to bring attention to content will prevent these individuals from understanding your message.
Other groups of people with disabilities, particularly users with learning disabilities, benefit greatly from color when used to distinguish and organize your content.
To satisfy both groups, use color, but also be sure to use other visual indicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from one another using visual separation (such as whitespace or borders).
There are several tools you can use to evaluate color contrast, which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color blindness.
5. Use tables for tabular data, not for layout.
Using tables for design layout adds additional hurdles for screen readers. Whenever a screen reader encounters a table, the user is informed that there is a table with "x" number of columns and rows, which distracts from the content. Also, the content may be read in an order that does not match the visual order of the page. Use CSS for all presentation elements.
When a data table is necessary (i.e. you have a set of data that is best interpreted in a table format, such as a tuition chart), use headers for rows and columns, which helps explain the relationships of cells. Complex tables may have several cells within the table that have a unique relationship to each other, and these should be identified by using the "scope" attribute in HTML. Table captions (HTML5) can be used to give additional information to users about how best to read and understand the table relationships. Ask the Web Designer for assistance with HTML5 elements.
6. Ensure that all content can be accessed with the keyboard alone in a logical way.
Keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities rely on a keyboard. Blind users also typically use a keyboard for navigation. Some people have tremors which don't allow for fine muscle control. Others have little or no use of their hands. Some people simply do not have hands, whether due to a birth defect, an accident, or amputation. In addition to traditional keyboards, some users may use modified keyboards or other hardware that mimics the functionality of a keyboard.
As a keyboard user navigates through the page, the order in which interactive items receive keyboard focus is important. The default keyboard navigation order must be logical and intuitive. This generally means that it follows the visual flow of the page: left to right, top to bottom - header first, then main navigation, then page navigation (if present), and finally the footer. This navigation order (and also the reading order for screen readers) is determined by the web page's source code.
For best results:
- Structure your underlying source code so that the reading/navigation order is correct.
- Then, if necessary, use CSS to control the visual presentation of the elements on your page.
- Do not use tabindex values of 1 or greater to change the default keyboard navigation order.
7. Make dynamic content accessible.
All dynamic content should be fully accesible. Audio and video must have options for closed captioning and transcripts for the hearing-impaired. Ensure that video players do not auto-play (non-consensual sound), and that the players can be used with a keyboard.
If your site contains a slideshow, make sure that each photo has alt text and can be navigated via the keyboard.