Making Accessibility Visible: A Checklist

As a follow up to our video series Making Accessibility Visible, we've created an accessibility checklist for content creators, web designers, and developers. Use the checklist to incorporate accessibility best practices into your web design.

Earlier this year, we published the Making Accessibility Visible video series to demonstrate what it's like for people who are blind to navigate the internet with screen readers. We used examples of both accessible and inaccessible websites to show the difference and share best practices along the way.

As a follow-up, we're sharing an accessibility checklist that addresses the five web design and user experience issues highlighted in the series. Regardless of whether you're new to digital accessibility or are well-versed in all things accessibility, we encourage you to watch the series and use the checklist to keep your website accessible to people of all abilities.

A screen reader is a software application that uses text-to-speech technology to read out loud digital content for people who are blind or visually impaired.

Accessibility Checklist

1. Buttons and Form Field Labels

Buttons and form fields help screen reader users find information and interact with different elements to buy products, subscribe to newsletters and services, fill out forms, and complete other tasks online. Here are a few best practices for adding buttons and form field labels.

• Write a text label for each field and button. Include expected formats in plain language.
  Resources from W3C: Web Accessibility Tutorials: Labeling Controls, Web Accessibility Tutorials: Forms Instructions, What ARE Accessible Names and Descriptions?
• Omit the words for element names like "button", "graphic", or "link" from their labels. Screen readers identify elements when reading the respective text labels.
  Resource: 12 Screen Reader Facts for Accessible Web Design, Designmodo
• Make sure icons or images intended as button labels have the button actions as their alt text (think "attach file" and not "paperclip").
  Resource: Accessible Icon Buttons, Sara Soueidan

2. Headings

We use headings to organize content on a web page, following a logical structure. People who use screen readers and search engines rely on headings to understand the page structure and navigate its content. Use the tips below to write helpful headings.

• Write meaningful headings that provide insight into the content.
  Resource: Website Accessibility: Headings, Yale University
• Use headings in hierarchy order to outline document structure. Plan the heading structure before the webpage is built, to ensure correct order.
  Resource: Website Accessibility Tutorials: Headings, W3C
• Avoid using headings for their sizing alone. Decorative headings are confusing to screen reader users, it's random emphasis.

3. Image Alt Text

Image alternative text, also called alt text or alt tags, is a written description of an image that screen-reading tools can read out loud to people with visual impairments, sensory processing disorders, or learning disabilities. Here are a few alt text best practices to keep in mind.

• Write 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.
  Resource: Alternative Text, WebAIM
• 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.
  Resource: Web Accessibility Tutorials: Decorative Images, W3C
• 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.
  Resource: Accessibility in E-Commerce: Use 'ALT' Text to Communicate the Core Content of "Informational" Images, Baymard Institute
• Avoid using image file names as alt text. This does not describe the image or assist users in their understanding.

4. Functional Elements

Without proper labels and status descriptions of functional elements, screen reader users may potentially miss out on the functionality and key messages of the page, including status updates that inform users on the results of their actions (changing a delivery address, for example), progress on a process, errors, etc. Follow the recommendations below to add proper descriptions of functional elements.

• Clearly define the expected web page or app responses to user actions for all controls. This helps developers understand what to build.
  Resource: WAI-ARIA Authoring Practices 1.1, W3C
• Use ARIA to convey the state of a control to assistive technology (expanded, collapsed, selected, etc.).
  Resource: Use ARIA for status messages, Orange Digital Accessibility

5. Keyboard Focus and Dialog Behavior

For a website to be accessible, it needs to be navigable by keyboard alone - which is how people with screen readers use the internet. Most interactive elements, such as links or pop-ups, are typically indicated visually on a webpage. With a screen reader, you can focus on these elements by using the tab key on a keyboard. Here are a couple of best practices to make your website keyboard-friendly.

• Make sure that all user-facing controls are designed to use with only a keyboard as well as a mouse.
  Resource: Developing a Keyboard Interface, W3C
• Test web page operation using only a keyboard.
  Resource: Fundamental Keyboard Navigation Conventions, W3C

Not sure where to begin? Check your site's accessibility status with the AudioEye website scanner and use the checklist to start addressing your site's accessibility issues.

Ready to test your website for accessibility?

Scan your site now.

Enter Website URL

Free Scan