Using NVDA

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Using NVDA

If you use Windows, I recommend you use NVDA as your screen reader. You can use JAWS if you wish to, but it costs $90 per year.

Setting up NVDA

First, you need to download and install NVDA.

When you open NVDA for the first time, you should see a startup menu. If you’re using a laptop, I recommend you use the following settings:

1. Keyboard layout: laptop
2. Check Use Capslock as an NVDA Modifier

The speech viewer

NVDA has a speech viewer that logs everything NVDA says. This speech viewer helps immensely when you’re reading a screen reader for the first time.

To open the speech viewer, you press the NVDA modifier key + n. Then, navigate to “tools” and select “speech viewer”

(I’m going to say NVDA instead of “NVDA modifier” from this point onwards).

Configuring NVDA

There are four things you want to configure:

1. Mouse tracking
2. Reading speed
3. Disabling “Say All”
4. Focus Highlighting

To configure NVDA, you open the NVDA menu with NVDA + n, then navigate to the settings page.

Mouse tracking

By default, NVDA reads the thing your mouse cursor is on. This can be annoying for mouse users.

You can disable mouse tracking by going into the Mouse menu.

Reading speed

If you want to change the reading speed, you can go to the Speech settings.

I found NVDA’s default reading speed too slow for my liking, and I increased it to 70 in. (The speech viewer will show the range’s value if you turned it on).

Disabling Say All

When you enter a website, NVDA begins speaking everything on the website. This can be annoying for developers.

You can disable this feature by disabling the “Say All”

Focus Highlight

Focus highlight is an NVDA add-on that lets you know where the screen reader is. It’s super helpful.

There are four visual indicators.

1. Thick red line
2. Thin red line
3. Green dashed line
4. Blue dotted line

A thick red line shows up when the browser and NVDA focus on the same object. You can activate this by tabbing to a link.

A thin red line and a green dashed line show up when NVDA and the browser focus on different things.

The thin red line signifies where the browser is focusing on. The green dash line signifies where NVDA is focusing on.

A blue dotted line shows up when NVDA enters into Forms mode.

NVDA Shortcuts

Here are a few keyboard shortcuts you need to know when using NVDA. Don’t worry about remembering them. Leave this table open as a guide and you’ll get used to the shortcuts.

If you’re interested, you can find a larger list of NVDA shortcuts on WebAim.

That’s it!