Accessibility Testing with the NVDA Screenreader

Share on FacebookShare on LinkedInShare on Twitter

This is the first post in a two-part series on Accessibility Testing for Developers by Matt Isner, a developer here at Deque Systems. For today's post, Matt has created a video demonstration for sighted developers on how to install and configure the NVDA screen reader for accessibility testing. (Please note: NVDA is for Windows only.)

In this video Matt will cover...

  • Why we've chosen to use NVDA (00:45)
  • How to download and install NVDA (1:30)
  • How to use NVDA's Speech Viewer (2:20)
  • How to install and use the Focus Highlight add-on (4:11)
  • An overview of NVDA's different modes (6:27)
  • How to configure the NVDA Modifier Key (8:07)
  • How to display the current mode (10:00)
  • Advanced keyboard shortcuts (12:43)
  • Testing accessibility fixes (13:53)
  • And finally, a recap (19:36)

Stay tuned for the second post in this series in which Matt will explain how to translate accessibility issues into agile solutions.

Matt Isner is a JavaScript Developer at Deque Systems. Matt specializes in teaching development teams to plan, test, and code for accessibility and has helped orchestrate large remediation efforts of complex enterprise applications. He is intrigued by the idea of the computer system as an expression of human neurobiology, and champions the notion that accessible web content is better understood by both humans and computers.

About 

Matt Isner is a JavaScript Developer at Deque Systems. Matt specializes in teaching development teams to plan, test, and code for accessibility and has helped orchestrate large remediation efforts of complex enterprise applications. He is intrigued by the idea of the computer system as an expression of human neurobiology, and champions the notion that accessible web content is better understood by both humans and computers.

3 comments

  • Matt Isner Permalink

    To answer Bob: “Why do you recommend setting role and aria attributes on a div as the solution to make screen readers identify the text as a level 2 heading instead of just using an h2 element? Does nvda not recognize semantic heading markup?”

    Great question! I would not, in fact, recommend using role=”heading” and aria-level to identify a heading if you have the option of simply using a native semantic heading element (h1, h2, etc.). All assistive technologies of which I’m aware, including NVDA, happily recognize semantic headings.

    The example in this video was meant to simulate a situation in which the developer remediating the issue was constrained and prevented from using a semantic tag, and also to showcase how semantic accuracy can be achieved via other methods for those less familiar with web accessibility. But if you are able, just use a heading tag!

    –Matt Isner

  • Bob Permalink

    Why do you recommend setting role and aria attributes on a div as the solution to make screen readers identify the text as a level 2 heading instead of just using an h2 element? Does nvda not recognize semantic heading markup?

  • Mercime Permalink

    Thank you Matt. +100 for the tip about showing the current mode in the speech viewer, didn’t know that :) Cheers.

Leave a Reply

You can use these HTML tags:

<a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>