Evaluate the accessibility of a page using ChromeVox and Developer Accessibility Tools

Time to complete

45 minutes

Lesson

Accessibility can mean a lot of things. You might think of web accessibility as making products and services available to all users, regardless of their physical ability, internet speed, or the device they are using. While these are all accurate, in this course we will focus on creating websites that are more accessible to users with visual impairments.

You have enormous potential to reach a large audience through the web. By creating content with as few assumptions as possible about the users of your websites and applications, you can reach a much larger audience.

Some of your assumptions might include:

the size of a user’s display

a user is using a mouse

all users see colors in the same way

all users see their screen

all users can read the text

Image 1. Devices with multiple screen sizes

Why make something accessible?

The more inclusive your application is, the broader the reach. Why exclude a segment of the population? While it might not always be easy, you might discover that improving the accessibility of your site can improve the experience for all users.

Well-created web content works in a wide variety of contexts, from desktop to mobile, continues to function in low-bandwidth environments, and degrades gracefully if the user’s device or browser is missing certain features. In this course, you will learn how to add common accessibility features that you can apply to your own websites right away to improve their usability for people who are blind or have low vision.

Now, use ChromeVox and the Accessibility Developer Tools on your own website, or on any website you visit often, and answer the following questions:

1. Close your eyes and interact with your site using only your screen reader and keyboard, pressing Tab to move to links, and Enter to click. Are there any parts of your site that do not work as you expected? Take note of these so you can fix them as you go through the course. NOTE: if you need to use ChromeVox visually (e.g. you are a user who is deaf or has a hearing impairment) please see the FAQ page for instructions.

2. Pay attention to how many of the Accessibility Audit tests passed. You can ignore those that were not applicable. Watch this video to learn how to run an audit. NOTE: In Google Chrome go to chrome://extensions and make sure to place a checkmark in the "Allow access to file URLs" box next to the Accessibility Developer Tools extension.

3. Which of the Accessibility Audit tests passed? Don’t worry! By the end of this course you’ll know how to fix many of these issues:

Audio elements should have controlsaria-labelledby attributes should refer to an element which exists in the DOM The web page should have a title that describes topic or purpose Video elements should use <track> elements to provide captionsrole=main should only appear on significant elements ARIA state and property values must be valid Elements with ARIA roles must use a valid, non-abstract ARIA role Controls and media elements should have labels The purpose of each link should be clear from the link text Elements with ARIA roles must have all required attributes for that role