Nothing
We transform grand ideas into pioneering products. With the power of design.
How screen readers work
- a "gamified" approach
(to an otherwise hard-to-grasp topic)
Nothing AG, Berne
Fog of war
Try to play Pacman...
...but with fog of war!
?
?
?
?
Screen readers are like Pacman
but with fog of war!
- They start at top of page
- They allow to navigate through DOM
- Sequentially conveying one object after the other
Screen readers are linear
or: one-dimensional
- Vision is two-dimensional
- Perception of surface
- Overview of web page within 1sec
- Audio (speech) is one-dimensional
- Try to listen to people in parallel
Screen readers are slow
(Or are they?)
- Reading through full website takes time
- From top to bottom
- Speech rate can be increased
- Up to 1 mio. percent ;-)
- Blind users rely on other ways to navigate
- Heading outline
- List of all links / form controls
- Etc.
Screen readers:
Why they are important
Litmus tests
- Screen reader tests are considered "litmus tests" in the development of accessible user interfaces
- Regarding technical aspects (code)
- "If you say that something is a litmus test of something,
you mean that it is an effective and definite way of
proving it or measuring it."- Quote: CollinsDictionary.com
-
To develop accessible websites, you need to be able
to validate them with screen readers. Full stop.
- ADG: Knowledge: Screen Readers: What and Why
NVDA (desktop SR)
- Most used screen reader: NVDA (Non-Visual
Desktop Access) - Native Windows application
- Open Source: github.com/nvaccess/nvda
- Friendly & responsive community
- Especially suited for testing of websites
- Adheres to standards
- Non-intrusive and fast
- Visual cursor & Speech Viewer!
- More info
- ADG: Setup: Screen Readers: NVDA
Importance of semantics
- Philosophy & Linguistics: The study of meanings
- UI / Web Development
- Refers to the meaning of UI elements
- Meaningful structure of content
- For example
- "This is a heading"
- "This is a heading of level 2"
- "This is a text input"
- Screen readers evaluate this info
- They convey it to user (through audio)
- This allows meaningful interaction with elements
Bad vs. good semantics
Bad vs. good semantics
Hey! This is very similar to Word's styles!
3 commandments
of screen readers
I: Thou Shalt Reveal Thy Meaning!
Screen readers read and convey semantic information only.
<a href="...">Click me!</a>
<p>Some text here.</p>
<h2>A second level heading</h2>
<input type="text">
<!-- Naah...! -->
<span role="link">Click me!</a>They are not interested in visual stylings.
.heading {
font-weight: bold;
font-size: 28px; }
.link {
text-decoration: underline; }To be conveyed through audio, an element's meaning must be obvious.
II: Instruct Thy Ways of Interaction!
If an element is interactive, it must be obvious how to interact with it.
Traditional HTML is self-explanatory.
Custom solutions need manual explaining.
<label for="hobby">
Favourite Hobby
</label>
<select id="hobby">
<!-- List of <option>
elements -->
</select><!-- A JavaScript autocomplete -->
<label for="hobby">Favourite Hobby</label>
<input id="hobby" aria-describedby="desc">
<!-- Custom list of suggestions -->
<p id="description">
This is an autocomplete. Enter characters
to display suggestions, then select one.
</p>III: Thy Feedback Shalt Be Concise!
If an element is interacted with, it must provide clear and immediate information on what's the result of the interaction.
<!-- A JavaScript autocomplete -->
<label for="hobby">Favourite Hobby</label>
<input id="hobby" aria-expanded="false">
<!-- List of (initially hidden) suggestions -->
<script>
// On focus, toggle aria-expanded="true"
// (and show list of suggestions).
</script>Let's get
our hands dirty!
Mobile screen readers
- Integrated by default
- Wide distribution
- Good accessibility support
- Much simpler to use than desktop
- More info
- ADG: Setup: Screen Readers:
VoiceOver/iOS - ADG: Setup: Screen Readers:
TalkBack
- ADG: Setup: Screen Readers:
Take it to the test!
Learning accessibility
Is quite an adventure...
But like Pacman
You will make your way!
Thank you!
Reach out: josua@nothing.ch
Our services: nothing.ch/accessibility
Nothing AG - We are unlocking human potential through technology.
How screen readers work
By Nothing
