NVDA is a free screen reader that Windows users can use. In this video, we use NVDA in Chrome to demo:
- Why accessible lists matter for NVDA
- How to navigate lists with NVDA
- How NVDA announces an accessible and inaccessible list
Transcript
Learning how to test with a screen reader means understanding how a screen reader interacts with and announces different elements. In this video series, we’ll listen to NVDA announce accessible and inaccessible website elements to help you familiarize yourself with how it should sound.
This video is all about lists. Watch the other videos in the series or learn more about how to make accessible lists in the resources below.
Why accessible lists matter for NVDA
Accessible lists have HTML that screen readers use to know it’s a list and announce how many items are in it. Then the screen reader user can use list keyboard short cuts and has information before entering the list.
Navigating lists with NVDA
I’ll navigate to the list using the down arrow key or I can select “l” to jump to the next list. Then, I’ll navigate through the list using the arrow key.
NVDA announcing accessible and inaccessible lists
Let’s hear NVDA announce an accessible list.
NVDA: Here are things you should…
NVDA: List with six items. Bullet. Sunscreen.
NVDA: Out of list. Here are things you…
NVDA: List with six items. Bullet. Sunscreen.
NVDA: Bullet. Hats. Bullet. Beach toys.
NVDA: Bullet. More than one swimsuit.
NVDA announced it was a list and how many items were in it.
Now, let’s hear this same list but without the proper list HTML.
NVDA: Here are things you should pack for your warm getaway.
NVDA: Sunscreen. Hats. Beach toys. More than one swimsuit.
Without the list HTML, NVDA just reads it like normal text making it more difficult for the user to navigate.
That’s how NVDA sounds announcing accessible and inaccessible lists. Subscribe to Pope Tech for more digital accessibility videos.