Build Accessibly with Progressive Enhancement: Accessibility Testing (Video)

The last article and video covered how to add JavaScript to toggle ARIA attributes. Now that we’ve finished making our component, this final article and video will cover accessibility testing that component.

Step 4: Testing

View the Finished Component

Now that we have an accessible component, we need to test it to make sure everything is working. To cover the major assistive technologies, you can use your keyboard, zoom into the content, and then test with VoiceOver on Safari if you have a Mac and/or NVDA on Firefox if you have a PC. If you have time, it’s always good to test on a mobile device, so try out VoiceOver on an iPhone or Talkback on an Android.

Test with a Keyboard

Before testing with a screen reader, make sure to check the documentation for the expected behavior. In this case, the expected behavior is that we can tab to the buttons and use the Spacebar or Enter key to show content.

1. With your keyboard, use the Tab key to tab through the CodePen

2. Make sure the focus styles are present

3. When you reach the button, use the Spacebar or Enter key to toggle the content

Test Page Zoom

1. Set your browser zoom to 200%

2. Make sure the content is still readable (the text size should increase, and the content should be contained in the viewport so users don’t have to horizontally scroll)

Test with a Screen Reader

Not all screen readers interpret code in the same way, and some of them have different key combinations to navigate through content. So it is usually best to test with at least two different screen readers. In the video, I go over how to test with VoiceOver, a screen reader native to Mac OS that works best with Safari. You can test with NVDA as well, a free screen reader that is best used on a PC with Firefox.

VoiceOver

1. Navigate to your component in Safari

2. Use Command + F5 to turn on VoiceOver

3. Use Control + Option + Right Arrow to navigate through the CodePen

4. Once you reach the button hit Control + Option + Spacebar to toggle the content

5. Then use Command + F5 to turn off VoiceOver

For more information on how to use VoiceOver, you can take a look at VoiceOver Keyboard Shortcuts on a Mac by Deque University.

NVDA

If you don’t have NVDA on your PC, you can download it from the NVAccess site for free.

1. Navigate to your component in Firefox

2. Use Control + Alt + N to turn NVDA on

3. Use the Down Arrow key to navigate through the CodePen

4. Once you reach the button, hit Enter or Spacebar to toggle the content

5. Then use Insert + Q to turn off NVDA

For more information on how to use NVDA, you can take a look at NVDA Keyboard Shortcuts by Deque University.

This quick keyboard and screen reader test is always helpful for two reasons. Firstly, it can help you better understand why an accessible website is important as you work your way through a website with just a screen reader or keyboard. Secondly, the accessibility updates to your component might not work perfectly the first time, or something else in the codebase might override a key accessibility feature. This type of test does not replace actual user testing with people who have disabilities and operate their assistive technology daily.

Accessible Components

Building accessible components is a great way to learn more about accessibility standards, ARIA attributes, and accessibility testing. There is also the side benefit of becoming more comfortable with writing quality HTML, CSS, and JavaScript. I like to work through building accessible components to do just that. You can check out some of my other CodePens focused on accessibility. When it comes to bringing all of your components together to create a website, remember to follow the WCAG guidelines and ensure the whole page is keyboard accessible, navigable, and predictable.