The following tips cover the most important areas of web accessibility for content providers and designers. Please make sure you are familiar with all the points presented.
The Basics
1. Images must have alternative text
Alternative text (aka alt text) provides a guide to non-text content in web pages. Most importantly for accessibility, it allows people who are blind and rely on a screen reader to have a description of images on a web page. Alt text should be a succinct description of the content and function of an image. It should not be redundant (the same as adjacent text) or include the phrases “image of...” or “graphic of...” For a detailed look at the issue, read WebAIM’s comprehensive guide to writing alt text.
2. Web pages must have appropriate document structure
Headings, lists, and other structural elements provide meaning and structure to web pages. They help people and screen readers understand the hierarchy of a page and facilitate keyboard navigation within the page. Read WebAIM’s full explanation of semantic structure.
3. Links must make sense out of context
Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here," "more," and "continue," should be avoided. Read WebAIM’s guide to creating link text.
4. Caption and/or provide transcripts for media
Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient. If you are posting video online, contact the CMC ITS or Public Affairs departments to discuss how to transcribing the video.
5. Ensure accessibility of non-HTML content (PDFs)
In addition to the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but is more accessible to a person using a screen reader. Please see the University of Washington's guide to fixing inaccessible PDF's or watch the series of videos we recommend on Lynda.com for making your PDFs accessible.
6. Do not rely on color alone to convey meaning
The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.
7. Make sure content is clearly written and easy to read
There are many ways to make your content easier to understand. Write clearly, use clear, readable fonts, and use headings, lists, and bullet points appropriately.
8. Avoid using all caps
All caps can be difficult to read and can be read incorrectly by screen readers.
Advanced Topics
1. Provide headers for data tables
Tables should not be used to create design layouts, only for tabular data. Tables that are used to organize tabular data should have appropriate table headers (the <th> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table. Read WebAIM's guide to marking up data tables.
2. Ensure users can complete and submit all forms
Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the
3. Allow users to skip repetitive elements on the page
You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Main Content," or "Skip Navigation" link at the top of the page which jumps to the main content of the page.
4. Make JavaScript accessible
Ensure that JavaScript event handlers are device independent (e.g., they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function.
5. Design to standards
HTML compliant and accessible pages are more robust and provide better search engine optimization. Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content.