Using the JAWS screen reader to create better digital content

Rachele DiTullio
@racheleditullio on Twitter

Slides: https://accessibleweb.net/using-jaws

Knowing how to use a screen reader makes you a better content creator and web developer. Learn the basics of using the JAWS screen reader to navigate webpages and documents. Find out the common issues that using a screen reader can detect, as well as ways to improve your content for people with vision and cognitive impairments.

Rachele DiTullio

Pronouns: (they/she)

2000: First job as a web developer
2009-2012: Master of Science degree with specialization in User Experience Design
2019-2020: Certified Professional in Web Accessibility
2021: Accessibility Engineer
2022: Senior, team lead

I earned my Master's degree from the University of Texas at Austin School of Information.

I received my certifications through the International Association of Accessibility Professionals (IAAP). I earned the Web Accessibility Specialist credential in 2019 and the Certified Professional in Accessibility Core Competencies credential in 2020.

What we'll cover

Overview of screen readers
Navigating content with a screen readers
Reviewing content for accessiblity issues:
- PDFs
- Word documents
- Webpages

Screen Readers

A screen reader is a type of assistive technology that announces the contents of the screen to the user with a synthesized voice. They are primarily used by people who are blind or have low vision but lots of different people use screen readers to understand the UI better.

Who uses screen readers

Source: WebAIM Screen Reader User Survey #9 (May-June 2021)

Which of the following disabilities do you have?
Response	# of respondents	% of respondents
Blindness	1246	79.5%
Low Vision/Visually-Impaired	344	21.9%
Cognitive or Learning	50	3.2%
Deafness/Hard-of-Hearing	114	7.3%
Motor	37	2.4%
Other	57	3.6%

Common screen readers in use

Which of the following is your primary desktop/laptop screen reader?
Response	# of respondents	% of respondents
JAWS	832	53.7%
NVDA	476	30.7%
VoiceOver	100	6.5%
ZoomText/Fusion	72	4.7%
System Access or System Access to Go	12	0.8%
Narrator	8	0.5%
ChromeVox	5	0.3%
Other	43	2.8%

Most common screen reader and browser combinations
Screen Reader + Browser	# of respondents	% of respondents
JAWS + Chrome	500	32.5%
NVDA + Chrome	246	16.0%
JAWS + Edge	194	12.6%
NVDA + Firefox	149	9.7%
JAWS + Firefox	74	4.8%
VoiceOver + Safari	72	4.7%
Other	304	19.8%

Finding information

When trying to find information on a lengthy web page, which of the following are you most likely to do first?
Response	# of respondents	% of respondents
Navigate through the headings on the page	1047	67.7%
Read through the page	126	8.1%
Use the Find feature	215	13.9%
Navigate through the links of the page	110	7.1%
Navigate through the landmarks/regions of the page	49	3.2%

Document accessibility

Which document format do you find most accessible?
Response	# of respondents	% of respondents
Word	1036	68.9%
PDF	194	12.9%
EPUB	160	10.6%
Other	113	7.5%

JAWS screen reader demonstration

A webpage with the heading Accessible Web followed by the text please disable CSS to view this webpage

VIDEO: JAWS screen reader demonstration

Using a Screen Reader

This section covers some basic settings in the JAWS screen reader as well as basic keyboard controls for navigating.

JAWS start options

JAWS voice settings

JAWS basic navigation
Command	Keystroke
Stop JAWS from speaking	`CTRL`
Move to the next focusable item	`TAB`
Move to the last focusable item	`SHIFT`+`TAB`
Move the virtual cursor	`ARROW keys`
Activate the link or button	`ENTER`
Close JAWS	`INSERT`+`F4`

Let's practice

https://accessibleweb.net/test

JAWS content navigation
Command	Keystroke
Read continuously from cursor	`INSERT`+`DOWN ARROW`
Go to next heading	`H`
Go to next graphic (image)	`G`
Go to next form element	`F`
Go to next table	`T`
Go to next list	`L`

Let's practice

https://accessibleweb.net/test

PDFs

Common issues with PDF documents

No embedded text
OCR text with typos
Tagged incorrectly
Reading order not well-defined

Reading PDFs with Adobe Acrobat

Let's practice

https://accessibleweb.net/pdf

Word Documents

You can give content in Word documents semantic meaning with Word Styles. It's not the best name because it reinforces the idea that marking up content is about how it looks, not how it's structured.

Styling text with Word

Providing text equivalents

Let's practice

Copy the text from https://accessibleweb.net/pdf into a Word document.

Use styles to markup the document.

Download fixed Word document

Download exported PDF document

Webpages

You might be limited in what you can do on webpages by a learning management system or other software. As much as possible, use native HTML elements to provide meaning and structure to web content.

Use semantic markup

Let's practice

Try using a screen reader with content from your university or class material.

All US public universities are required to provide accessible websites under Section 508 of the Rehabilitation Act of 1973.

JAWS

Check your work or school email for a free home license.

https://accessibleweb.net/jaws

Check your work or school email address to see if you qualify for a free home annual license of JAWS. All students, faculty and staff of an educational institution in the United States with up-to-date multi-user licenses of JAWS are entitled to receive free home annual licenses for their personally owned equipment.

Thank you!

Any questions? @racheleditullio on Twitter

Website: racheleditullio.com

Content errors detected

An error, or errors, were detected in your presentation's content—open the browser console for more info.

StorySlides mode help

Accessibility information

If you're using a screen reader, story mode can be navigated like any web page (with browse mode/the virtual cursor turned on).

HoweverIf you're using a screen reader, please disable browse mode/the virtual cursor when in slides mode, so that you can use the provided shortcut keys below to navigate. Those keys are displayed when first entering slides mode (they're different to the story mode keys below).

Default keys to toggle browse mode/the virtual cursor

JAWS: Press Insert plus Z
NVDA: Press the NVDA key plus Space (the NVDA key is usually Insert or Caps Lock).
VoiceOver (Mac): Ensure Quick Nav is turned off. Press both Left and Right arrow keys together to toggle Quick Nav.

In slides mode, theThe contents of slides will be announced as they appear. On slides with complex content, such as tables, you can always switch back to browse mode/use the virtual cursor to navigate that content.

Story mode can be navigated like any web page, with browse mode/the virtual cursor turned on, so you can easily move around.

☞ Tap near the left or right edge of the screen to move to the previous or next slide. If you have a keyboard attached, you can use the following shortcuts.

StorySlides mode keyboard shortcuts
Key	Action
`S`	Switch to story mode.
`F`	Toggle full-screen slide view (not supported on iPhone).
`Alt`+`G`	Go to the story behind a slide by number (opens a dialog).
`Escape`	Close an open dialog. If no dialog is open, go to slides mode.
`P`	If you're running a screen reader, announce the current slide progress as a percentage, followed by the current slide number and the total number of slides.
question mark `H`	Show this dialog.
`Alt`+`M`	Open the presentation's menu, which lets you access features via buttons instead of keyboard shortcuts.
`→` `↓` `Page Down`	Next slide. To prevent flashing, transitions are rate-limited. To rapidly move between slides, use the "go" feature.
`←` `↑` `Page Up`	Previous slide. To prevent flashing, transitions are rate-limited. To rapidly move between slides, use the "go" feature.

Using the JAWS screen reader to create better digital content

Rachele DiTullio

What we'll cover

Screen Readers

Who uses screen readers

Common screen readers in use

Finding information

Document accessibility

JAWS screen reader demonstration

Using a Screen Reader

JAWS start options

JAWS voice settings

JAWS basic navigation

Let's practice

JAWS content navigation

Let's practice

PDFs

Common issues with PDF documents

Reading PDFs with Adobe Acrobat

Let's practice

Word Documents

Styling text with Word

Providing text equivalents

Let's practice

Webpages

Use semantic markup

Let's practice

JAWS

Thank you!

Content errors detected

Story

Slides