Skip to the transcript for this video.
Download this tutorial as an MP3 audio file
Transcript
Intro: The American Foundation for the Blind in Association with NVAccess presents: Learn NVDA: An Introduction to using your computer and getting online.
Using the Internet, Part 1
Narrator: In this tutorial, we will be exploring how to use NVDA to access the Internet. We will be using the Firefox web browser, but the principles are the same for other browsers, too.
In this first segment we will focus on navigating through web content, but later we’ll talk about some other features of Firefox.
In an earlier tutorial we walked through installing Firefox, so I’ll go ahead and launch Firefox using the start Menu. To do this I’ll press the Windows key on my keyboard and start typing Firefox. As I type, Windows will bring up what it thinks I’m looking for, so you can press Enter as soon as you hear NVDA speak “Mozilla Firefox.”
Screen Reader: Cortana Window, Search box edit: Blank. F I – Mozilla Firefox Desktop App 1 of 10, Level 1. Unknown
Default Browser Dialog: Firefox is not currently set as your default browser. Would you like to make it your default browser? “Use Firefox as my default brower” button
Narrator: Depending on your previous settings, you may be asked if you want to make Firefox your default browser when it’s first launched.
Since I want to use Firefox as my default web browser, I’ll press spacebar to accept.
Screen Reader: Mozilla Firefox Mozilla Firefox Start Page Document. Search Query. Edit Collapsed: Blank
Narrator: Now Firefox is running and we're placed at the start page. Pressing Alt plus D will move our focus to the address bar.
Screen Reader: Navigation Toolbar - Search or enter address, combobox collapsed Edit Complete Blank
Narrator: The address bar will allow you to directly navigate to a web page by its web address, which is also known as a URL. Let’s go to AFB’s main website. In the address bar, I’ll type afb.org and press Enter. When I do, NVDA will start reading the whole page after it loads, so I’ll stop the speech with the Control key.
Screen Reader: A F B . O R G / Selected - Extend Mozilla Firefox Start Page Document visit. Search Query Edit: Collapsed: Blank
American Foundation for the Blind Home Page Visit, Clickable Link: Get Content, Clickable Link, AFB
Narrator: Now we’re on a web page, but before we start exploring, we should lay out a few important concepts.
Just as print documents can be structured with styling such as headings, bulleted lists, and text blocks, web sites have structure as well, and NVDA can make use of this. Unlike print documents, however, web pages also have many kinds of interactive content.
In this tutorial, we will refer to any discrete piece of content on a web page as an “element.” If an element is interactive, we will refer to it as a control. Each time we move to a new element, NVDA is going to speak information about it.
In the “Getting started with Windows” tutorial, we mentioned that NVDA figures out what to speak about each element based on its name, role, and, optionally, the value of the element. The same holds for the web, so as NVDA is speaking, try to pick out key words that will help you figure out what the element you’re on actually represents, rather than just the content that it holds.
There are many types of elements on the web, but the most common ones are headings, lists, graphics, and links. There many types of input form controls as well, but we will cover those later in this tutorial.
The most basic way to navigate through a web page is with the up and down arrows. This will move your focus to every element on the page in order, including non-interactive text. This is very tedious, so we’ll move directly into some of the quicker ways to explore a page.
The tab key will move your focus by interactive elements, such as links and buttons, but usually skips over bulk text elements. I’ll tab a few times demonstrate.
Screen Reader: AFB American Foundation Registered for the Blind - Visited Link - Home Page List with 4 Items List with 2 Items Smaller type Link
Narrator: You can hold Shift and press Tab to move backwards.
Screen Reader: Out of List, Out of List, AFB American Foundation Registered for the Blind Visited Link - Homepage Skip to Content Link
Narrator: Tab is great for filling out forms because it will take you directly to all of the different interactive controls on a page, but it’s helpful to be able to move to a specific kind of element as well. NVDA gives us that fine level of control with some single letter hotkeys to move to headings, lists, links, and others.
One good strategy for reading a new page is to jump through it by heading to get a feel for the page’s structure. On a web page, pressing the H key by itself will move to the next heading. I’ll move forward by a few headings now by pressing H key.
Screen Reader: List with 5 Items "About Us" Link Heading Level 2
"Living with Vision Loss" Link Heading Level 2
"Programs & Services" Link Heading Level 2
Narrator: And, like the Tab key, when I hold Shift and press H, I move backwards by heading.
Screen Reader: "Living with Vision Loss" Link Heading Level 2
"About Us" Link Heading Level 2
Narrator: You probably noticed that many of these elements combined roles. For example, this heading is in a list and it's also a link. This is common, and it results in this element acting like all three roles.
We can also navigate to the next link by pressing the K key. Like all of these single key commands, holding Shift will move me backwards. I’ll move through a few links now.
Screen Reader: List with 8 Items: "Our Impact" Link "Leadership and Staff" Link "Helen Keller" Link
Narrator: You can activate a link by pressing the spacebar on your keyboard. This will either take you to a new page, or a different part of the page you are currently on.
With these basic commands you can pretty effectively read a web page. I recommend you scan the page by heading and then use the up and down arrow keys once you’ve found something you’re interested in.
Before we explore some of the more advanced commands, I want to introduce NVDA’s built in help file called the Commands Quick Reference guide.
This guide is actually a web page that NVDA opens and includes a comprehensive list of NVDA commands. It’s also another example of a well-structured web document that you can practice with. Let’s open the Commands Quick Reference from the NVDA Menu. Open the NVDA menu by pressing NVDA plus N, then arrow down to Help.
Screen Reader: NVDA Menu: Preferences Submenu - P. Tools Submenu - T. Help Submenu - H.
Narrator: Expand this submenu with the right arrow, then arrow down to “Commands Quick Reference” and press enter to open it.
Screen Reader: User Guide View Queue, Command Quick Reference Queue, NVDA 2016.2, Commands Quick Reference, Mozilla Firefox
Narrator: NVDA will open the quick reference in the default browser.
If you watched the Firefox Installation tutorial, you will recall that we allowed Firefox to set itself as our default browser. If you have a different browser set as default, that’s okay too. The web content itself should be displayed the same on all browsers in most cases.
Now we are in the Commands Quick Reference guide, which works the same as any other web page. Recall from part 1 that we can move through a page by heading using the H key.
Screen Reader: Getting Started with NVDA, Heading Level 2. NVDA Touch Gestures, Level 3. Touch Modes, Heading Level 4.
Narrator: Headings can be nested into different levels to create an outline structure. I can move by a specific heading level by using the number key corresponding to the heading level I want. Let’s move through a few headings at level 2 by pressing the 2 key.
Screen Reader: Navigating with NVDA, Heading Level 2. Browse Mode, Heading Level 2. Reading Mathematical Content, Heading Level 2.
Narrator: This is a well-structured page, so it’s good demonstration for how headings can be used to outline a document.
There is one more tool that we can use to get a clean view of certain key elements on the page called the elements list. This tool creates a list of headings, links, and landmarks on a page that we can quickly look through to get our bearings. We can open the elements list with NVDA plus F7.
If you’re on a laptop, you may need to also hold the function key, since the F-keys often share functionality on laptops.
Also recall from the hotkeys tutorial that you can use NVDA’s input help function by pressing NVDA plus 1 to help locate the keys on your keyboard. I’m going to hold the NDVA key and press F7 to open the elements list.
Screen Reader: Elements List Dialog: Tree View
Narrator: The elements list dialog is now open. By default, we are placed in a list of links, but, since there are no links on this page, the list is currently empty.
Above the list are three radio buttons that’ll allow you to change between showing links, headings, or landmarks. I’ll press Shift plus Tab to go to this set of radio buttons.
Screen Reader: Type, Grouping: Links Radio Button Checked, Alt plus K
Narrator: Now press down arrow to select the next option, which is headings.
Screen Reader: Headings Radio Button Checked, Alt plus H
Narrator: I’ll press tab to go back to the list, which is now populated with all of the headings on the page.
Screen Reader: Tree View: Reading Mathematical Content, Expanded 4 of 7, Level 1
Narrator: Now we can use the up and down arrows to easily navigate between headings.
Notice that some of these items are labeled as “expanded” which means that we can use the left arrow to collapse them. These collapsible items are top level headings that have subheadings within them.
Screen Reader: Level 2, Interactive Navigation, 1 of 1, Level 1, Application Specific Features, Expanded, 5 of 7
Narrator: Press Enter with a heading selected to dismiss the elements list and navigate directly to that heading.
Screen Reader: NV- Application Specific Features, Heading Level 2
Narrator: The elements list is a great way to quickly browse the structure of a page by links, headings, or landmarks.
In the next part of this tutorial, we will start out by looking at some browser specific functionality followed by some more advanced aspects of browsing the web including filling out forms.
For more Learn NVDA tutorials, visit afb.org/learnNVDA
This tutorial was presented with support from the Consumer Technology Association Foundation
