A Quick Reference Checklist
A Comprehensive Guide on Accessible Web Design
Explore The Guide
- Write meaningful headings that give insight into the content.
- Use headings in hierarchy order to outline document structure. Plan the heading structure before the webpage is built, to ensure correct order.
- Avoid using headings for their sizing alone. Decorative headings are confusing to screen reader users, it’s random emphasis.
Image Alt Text
- Write a text alternative, or alt text, for all important images. Include language that evokes the image's purpose conveyed in context. Omit the words “graphic” or “link” because assistive technology will convey element context.
- Include null alt text (alt=””) for images that are not important, are used for layout, or do not serve a function. This ensures they are hidden from assistive technologies.
- If alt text is a product description, include style, design, materials, features, benefits and care in detail. Colors should also be described, if they have unique or non-standard names.
- Avoid using image file names as alt text. This does not describe the image or assist users in their understanding.
Call-to-Action Buttons and Form Fields
- Write a text label for each field and button. Include expected formats in plain language.
- Omit the words for element names like “button”, “graphic”, or “link” from their labels. Screen readers identify elements when reading the respective text labels.
- Be sure icons or images intended as button labels have the button actions as their alt text (think “attach file” and not “paperclip”).
Closed Captions and Audio Descriptions
- Write accurate closed captions that communicate the meaning and intention of the spoken content. Synchronize with audio and allow enough time for people to read the captions.
- Remove any visual obstructions that could interfere with the captions.
- Avoid using autoplay, as it doesn't give viewers time to set up assistive technology and could trigger a seizure if there are flashing elements.
- Write a detailed script or hire someone to do that for you. If you hire someone, have them listen to your video and take notes on what they miss without the visuals. Use the notes to help them write the script while watching the video.
- Make sure to include the following in your audio description: audio of important text, speaker introductions (when applicable), descriptions of visuals or actions, as well as implied emotion.
Comprehensive Guide on Accessible Web Design
Read Other Chapters
See all chapters from the Comprehensive Guide on Accessible Web Design.