Online Navigation
Online navigation works quite similarly to offline navigation, only the tools differ greatly. For online navigation, we mainly have zoom, screen magnifiers, and screen readers (or SR for short). Zoom and screen magnifiers are pretty easy to wrap your head around, either because you tested it on purpose or accidentally hit Ctrl while trying to scroll and got a jump scare by gigantic UI elements: They make things big. Checks out.
But screen readers are more intimidating at first. You boot them up and suddenly everything starts talking! Most of us are not particularly fond of their device issuing unexpected noises because it’s usually a bad thing.
While text-to-speech (or TTS for short) is the intended functionality of text-to-speech screen readers (shocking, I know), it is overwhelming at first. Monotone, technical-sounding voices are simply not a joy to listen to, especially when you have to concentrate on understanding what exactly these voices are describing to you. On another note: Braille displays peacefully coexist with TTS screen readers and are a staple for web access!
It’s time to talk about the oh-so-dreaded screen reader testing!
Screen Reader Output
So screen readers read what’s on the screen? Wrong! They read what you wrote into your code! While a software tester who uses a mouse and screen might not notice that your menu exit button is actually a styled div, the SR will. And it will not work as well.
This is where the accessibility tree comes into play. The accessibility tree is how SR and other assistive tech users navigate through a website, climbing along heading levels and structures to find the desired information. The accessibility tree is sprouted by the browser based on the DOM (shorthand for Document Object Model) tree and accessed by platform-specific Accessibility APIs.
The DOM tree contains objects representing all the markup’s elements, attributes, and text nodes. This is precisely why following the h1, h2, h3 … heading structure is important. When you skip heading levels, you cut off the branches that assistive tech needs for a sound climbing route.
But not all screen readers are the same. Let’s briefly go over the differences in screen reader output: Below are 2 popular screen readers reading the same thing in the same browser and both outputting something different:
NVDA vs JAWS
This table is from our workshop at We Are Developers 2024. The code for it is available on CodePen. You can download the NVDA screen reader for free and follow along.
NVDA will say
and JAWS will say
Same table, same code, same browser, yet 2 different outputs. That doesn’t mean that one is better than the other; they both get the job done. But be aware that there are some nuances between them.
Then what Screen Reader Setup is best for Testing?
Classic UX answer: It depends. Firstly, on your target demographic, but more tangibly, on the operating systems you are developing for. Every year, WebAIM releases a survey for screen reader users where they ask which SR-browser combination they use.
The latest survey was conducted between December 2023 and January 2024. Go check the Screen Reader User Survey #10 Results! While you’re at it, check out the WebAIM Million report as well. The Million report audited 1 million websites to give us a benchmark of progress in web accessibility over the years and the most common WCAG failures. (It’s still low contrast btw.)
Screen Reader Testing Summary:
JAWS and NVDA came out on top with 40.5% and 37.7% respectively. The 3rd place on the podium took VoiceOver with 9.7%. As for browsers, the big 3 are Google Chrome, Microsoft Edge, and Mozilla Firefox.
Source: WebAIM Screen Reader Survey
Offline Navigation
The white cane
She’s an icon, she’s a legend, and she is not only at the moment but a consistently reliable tool for obstacle detection. Reliable because it detects obstacles, floor texture, drop-off points, or stairs going in both directions: up and down. Many startups in the assistive tech space try to replace the white cane, but to be honest, it only took me 2 weeks at Hope Tech Plus to uncover the groundbreaking insight that nobody who uses a white cane actually wants that - surprise, surprise!
But that’s not to say that our global icon for low vision is the solution for everyone. Carrying something around all day puts some strain on your wrists, and bumping into an obstacle can quickly be painful if you have joint problems. For different reasons, people might prefer other techniques, for example, guide dogs.
Guide Dogs
The best of good boys and girls, also known as the four-pawed part of a guide pair. Training takes around 18 months to 2 years in a “puppy boarding school” and includes socialization, basic obedience, and specific keyword training for everyday actions. Labradors, Golden Retrievers, and German Shepherds are the most popular breeds because of their temperament, size, and trainability.
Not every puppy gets to graduate! The most important criterion is the dog’s ability to focus only on their handler and ignore environmental stimuli, such as food on the floor, other people or dogs trying to get its attention, or loud noises. At the same time, they have to stay vigilant about potential threats or obstacles on the way, which requires a lot of concentration. It’s hard work!
According to the International Guide Dog Federation, only around 23.000 dogs are on active duty. Most dogs work up to the age of 10, but this varies depending on the guide pair. The 10th birthday isn’t necessarily the definitive retirement day, but around that time, handlers will start to notice a decline in concentration or less excitement to work from their dog.
Braille
Braille is a code made up of raised dots that can be read with your fingertips. It was invented by Louis Braille (another icon, absolute king behavior) in the early 19th century. It has been in use all around the globe since then, but that doesn’t mean that it’s the same language everywhere. After all, Braille is not a language; it’s a script code. Think of how the Vietnamese language uses the Latin script, yet that doesn’t mean that people who speak Latin-based languages can read Vietnamese.
It is an important tool for literacy. While Text-to-Speech screen readers are awesome, relying exclusively on audio output can lead to limited literacy and a decrease in vocabulary over time. It’s the same concept as why everyone wants their children to read more books: reading benefits one’s literacy. So good on you for reading this! Great job!
For more, check out Braille.ch: it’s a fascinating tactile rabbit hole to go down!
Refreshable Braille Displays
In the Tech world, there are refreshable Braille displays or Braille screen readers. They do exactly the same thing as Text-to-Speech screen readers, but with text output. How many letters they display at once depends on the size.
In April 2024, I hosted a workshop together with Tetragon, who are developing affordable braille products: everything from display to keyboard to printer! The prototype we workshopped with participants - for example, the EcoBraille - requires only one actuator for an entire line of dots, regardless of the length of that line. If it’s a 20-character line: 1 actuator. If it has 80 characters, still only 1 actuator. This means that the display can be disassembled and extended with additional 20-character lines!
And how do Braille displays work?
Speaking of actuators: Refreshable braille displays function by pushing individual pins up into the right position to form a braille letter. Each braille character cell holds 6 pins in a 2 by 3 arrangement. At the bottom of each pin is an actuator that gives the pin the command to jump up or stay put.
How does the device translate to Braille?
Braille Keyboards and displays have braille tables integrated. In addition to 6-dot braille, there’s also 8-dot braille. Looks exactly how it sounds, like 8 pins instead of 6 in a 2 by 4 configuration. The additional 2 pins allow for special characters beyond the standard Latin alphabet. Braille is pretty neat, right?
Top comments (0)