Course Resources

00:00:00:00 - 00:00:29:09

Alisa Smith

A screen reader is software assistive technology that enables access to information on computers and smartphones. It reads content aloud or converts it to Braille. Users navigate their devices through a variety of keyboard commands. VoiceOver is the built-in screen reader for Apple products. NVDA, or Non-Visual Desktop Access, is a free screen reader for download on Windows operating systems.

00:00:29:10 - 00:01:14:10

Alisa Smith

A popular paid Windows screen reader is JAWS, short for Job Access with Speech. Each one has unique features, but they all use similar commands. Unlike keyboard-only navigation, we will use arrow keys to navigate with a screen reader and optionally use the tab key. Other keys, sometimes called quick keys, can navigate the page using specific HTML elements. Common quick keys for navigating and understanding the page structure are the H key, which navigates by heading; the B key, which navigates by button; the F key, which navigates by form; and the list goes on to include every character on the keyboard.

00:01:14:12 - 00:01:37:21

Alisa Smith

Windows and Mac screen readers can present lists of content from the web page. VoiceOver has what's known as the rotor, and NVDA has the elements list. From there, through elements such as headings, links, buttons, and landmarks, you select a list item to drive focus to that content. Lists can also be used to narrow down the content on the page.

00:01:38:02 - 00:02:08:14

Alisa Smith

For example, searching for the submit button or only the heading level threes. Most interaction with desktop screen readers involves combining a modifier key with other keystrokes. For NVDA, the modifier key is the insert key, and for VoiceOver, it’s control and option together. For example, in NVDA insert plus the F7 shows the elements list, and in VoiceOver, control option plus the U key opens the rotor.

00:00:00:00 - 00:00:34:09

Narrator

The WAVE Chrome, Firefox, and Edge browser extension allows you to evaluate web content for accessibility issues directly within your browser. When using the WAVE Automated Accessibility Browser Extension, you first load the page you want to scan in the browser. Then select the WAVE Extension button to run the automated scan. After a moment, the results are displayed on the page as icons representing errors, warnings, page structure, and accessibility features.

00:00:34:11 - 00:01:08:18

Narrator

Here is the WAVE Report panel that contains a switch to turn CSS styles off, a summary of scan results, tabs for report details, results reference, navigation order, page structure, and color contrast. WAVE also adds a code button at the end of the page. The details panel will present results in a list, and you can select the information icon next to each result to get the result reference information.

00:01:08:20 - 00:01:39:07

Narrator

Selecting the result icon itself will place cursor focus on the element and highlight it with a red dotted line. Elements hidden with CSS in the report results are represented as dimmed, and have a reminder to turn off styles to inspect them. The order tab lists the order of page navigation for keyboard only navigators in the WAVE Report panel and adds numbered icons to the web page itself.

00:01:39:09 - 00:02:18:00

Narrator

Ensure that the order is as intended, is logical, and makes sense in context. The structure tab lists the structural elements like landmarks and headings for inspection in the WAVE report panel and adds structure icons to the web page. Check that headings are in hierarchical order and the appropriate landmarks are present. The color Contrast tab lists the color contrast errors with a tool that allows manipulation of erroneous color combinations from failing to passing, so the appropriate color recommendations can be made to design colleagues.

00:02:18:01 - 00:02:35:10

Narrator

When the code frame is active, the source for the selected element will be highlighted, allowing for quick inspection or copy paste into a bug report. To remove the WAVE interface, refresh the page or select the WAVE extension button again.