Accessibility Testing with a Screen Reader
Sergei Kriger
Accessibility
Testing with a
Screen
Reader
Hi there! 
What's up?
Hiring
Why we need it
- understand users
- accessibility testing
- new skill
Survey
© WebAIM
October 2017, 1792 responses.
Plan
- setup
- common pitfalls
- checklist
VO Setup
Nope. Just use it. 😎
JAWS Setup
- download
- activate
(auth key / USB dongle / 40 min.)
Turn on/off
-
JAWS
menu,
Ctrl + Alt + J *
-
NVDA
menu,
Ctrl + Alt + N *
-
VO
menu,
⌘ + F5 ⌘ + 3xID
Screen reader key
-
JAWS
Insert or Caps Lock
-
NVDA
Insert or Caps Lock
-
VO
Ctrl + Alt or Caps Lock
Checklist
- Headings
- Links
- Reading
- Landmarks
- Navigation tool
Headings
-
JAWS
H 1-6
-
NVDA
H 1-6
-
VO
VO + ⌘ + H H 1-6 *
Giant panda
The giant panda is a bear native to south central China.
Behavior
The giant panda spends its life roaming and feeding in the bamboo forests of the Qinling Mountains and in the
hilly province of Sichuan.
Diet
The giant panda's diet is primarily herbivorous, consisting almost exclusively of bamboo.
...
<div>Giant panda</div>
...
<div>Behavior</div>
...
<div>Diet</div>
...
...
<h1>Giant panda</h1>
...
<h2>Behavior</h2>
...
<h2>Diet</h2>
...
Giant panda
The giant panda is a bear native to south central China.
Behavior
The giant panda spends its life roaming and feeding in the bamboo forests of the Qinling Mountains and in the
hilly province of Sichuan.
Diet
The giant panda's diet is primarily herbivorous, consisting almost exclusively of bamboo.
Links
-
JAWS
Tab V U *
-
NVDA
K V U
-
VO
VO + ⌘ + L, V L, V *
Giant panda
The giant panda is a bear native to south central China.
Behavior
The giant panda spends its life roaming and feeding in the bamboo forests of the Qinling Mountains and in
the hilly province of Sichuan.
Diet
The giant panda's diet is primarily herbivorous, consisting almost exclusively of bamboo.
...
<span onclick="goto(url)">China</span>
...
<a onclick="goto(url)">Qinling Mountains</a>
...
...
<a href="url">Qinling Mountains</a>
...
<a href onclick="goto(url)">Qinling Mountains</a>
...
<span role="link" onclick="goto(url)">China</span>
...
Giant panda
The giant panda is a bear native to south central China.
Behavior
The giant panda spends its life roaming and feeding in the bamboo forests of the Qinling
Mountains and in the hilly province of Sichuan.
Diet
The giant panda's diet is primarily herbivorous, consisting almost exclusively of bamboo.
Reading
-
JAWS
JAWS + ↓ ↑ ↓
-
NVDA
NVDA + ↓ ↑ ↓
-
VO
VO + A VO + →, →
Giant panda
Behavior
The giant panda spends its life roaming and feeding in the bamboo forests of the Qinling Mountains
and in the hilly province of Sichuan.
Diet
The giant panda's diet is primarily herbivorous, consisting almost exclusively of bamboo.
...
<img src="text.png">
...
...
<img src="text.png" alt="The giant panda is a bear...">
...
Giant panda
Behavior
The giant panda spends its life roaming and feeding in the bamboo forests of the Qinling Mountains
and in the hilly province of Sichuan.
Diet
The giant panda's diet is primarily herbivorous, consisting almost exclusively of bamboo.
Landmarks
-
JAWS
Elements list,
R
-
NVDA
Elements list,
D
-
VO
Rotor
JAWS Elements list
JAWS Elements list
NVDA Elements list
NVDA Elements list
Rotor
Rotor
Rotor – settings
The giant panda is a bear native to south central China.
Behavior
The giant panda spends its life roaming and feeding in the bamboo forests of the Qinling
Mountains and in the hilly province of Sichuan.
Diet
The giant panda's diet is primarily herbivorous, consisting almost exclusively of bamboo.
<div class="header">
<div class="nav"></div>
</div>
<div class="main"></div>
<div class="footer">
<div class="nav"></div>
</div>
<header>
<nav></nav>
</header>
<main></main>
<footer>
<nav></nav>
</footer>
The giant panda is a bear native to south central China.
Behavior
The giant panda spends its life roaming and feeding in the bamboo forests of the Qinling
Mountains and in the hilly province of Sichuan.
Diet
The giant panda's diet is primarily herbivorous, consisting almost exclusively of bamboo.
Checklist
- Headings
- Links
- Reading
- Landmarks
- Navigation tool
Recap
- JAWS, NVDA, VoiceOver
- we need screen readers
- it's easy (see checklist) 😁
