Using Orca Screen Reader to improve perception of UX and Accessibility

Do you realize why structure is important for web pages? Use a screen reader and find out!

As a web developer, using a screen reader with a keyboard can improve your perception of usability and accessibility. One such screen reader is Orca, the default reader for Ubuntu. With Orca, I became more aware of how semantics are important for the web. But I had a hard time using Orca, because I couldn't find many tutorials on how to use it.

With this article, I share:

  • why using a screen reader can be a learning experience
  • my tips to get used to the Orca screen reader

So first, let's tackle the why.

Why a keyboard with a screen reader?

Nowadays, there are many accessibility guidelines and you now have guidelines and tools for the web. But using a screen reader and keyboard (without a mouse) made me aware of why such guidelines exist to begin with.

Indeed, using a screen reader made me realize:

  • how keyboard navigation works on the web
  • how structure is crucial to web pages
  • the needs of people who can't use a mouse

The screen reader is not a replacement for such guidelines and accessibility checkers, but it will help better understand them.

Why Orca (and not another screen reader)?

Screen readers for Windows and Mac, like NVDA and Voiceover, are already covered by many tutorials and demos. For Linux however, I had a hard time finding screen reader tutorials or examples. I eventually gave Orca a shot, since it came by default with my OS of choice, Ubuntu.

Using the Orca Screen reader

To learn to use the Orca Screen reader, I decided to learn:

  1. how to turn Orca on and off
  2. how to make it stop talking
  3. what the modifier key is
  4. how to navigate the web

Learning these steps made me more proficient with a screen reader, so let's tackle them in order.

1. How to turn Orca on and off

To turn Orca on or off, press:

Alt + Super + S

The key Super is to the left of Left Alt. It may have a Windows symbol for a label.

2. How to make it stop talking

As the name implies, a screen reader dictates what's on the screen, so there will be many situations where you just want it to stop talking.

To make Orca stop dictating (without disabling it), press Ctrl.

3. Find the modifier key

Orca (like other screen readers) has a modifier key, a combination of keys for specific screen reader commands.

For Orca, the default modifier is:

  • Caps Lock for laptops
  • Keypad Insert for desktops (same as '0' in the numeric Keypad)

To check what the modifier is, try:

  1. opening Orca preferences with Caps Lock + Space or Keypad Insert + Space (depending on your modifier key)
  2. access the Key Bindings tab to see or change the modifier key.

orca-preference-key-binding-demo.jpg

4. Navigate a web page

How does a user browse and operate on a page without the mouse? By using a screen reader and a keyboard, they can find page elements and sections. In Orca, this is possible with structural navigation.

Here's an example of structural navigation to reach first paragraph after the page's main title:

  1. Go to the first heading level 1 (by pressing '1')
  2. Go to the next paragraph or line of text (by pressing 'p')

And here's some examples of navigational commands:

  • Alt + shift + h: select a heading to go to
  • p: go to next paragraph
  • shift + 2: go to previous heading 2

The page Orca's Structural Navigation Commands has much more useful examples, and it's clear there's a pattern to these commands. For each element type, there's a command to:

  • get the next element (by pressing that type's key)
  • get the previous element (through Shift + the type's key)
  • display a list of all elements (through Alt + Shift + the type's key)

One more thing: use tab to go to the next interactive element (button, link, form field), or shift + tab to go to the previous one.

And that's pretty much the basics needed to use Orca to check on web pages.

Tip: Note down important commands

Occasionally, I forget some commands, like:

  • how to turn Orca on or off
  • what the modifier key is
  • an example of how to list elements of a specific type

Thus, I'm sharing my cheat sheet to use Orca. It's in Markdown, so feel free to copy and adjust it to best suit your needs!

# Orca commands

- **Modifier**: Caps Lock

## Overall commands

- **Turn on or off**: Alt + Super + S
- **Open preferences**: Modifier + Space
- **Toggle structural navigation**: Modifier + z
- **Stop dictating**: Ctrl
- **Dictate current element**: Modifier + i

## Structural navigation examples
**Warning**: Structural Navigation must be enabled

- next heading 1 to 6: 1 to 6
- previous heading: shift + h
- list headings: alt + shift + h
- next paragraph: p
- previous button: shift + b
- list landmarks: alt + shift + m
- list form fields: alt + shift + f
- list links: alt + shift + k 

For more examples, see:
- [Structural navigation commands, Gnome Help](https://help.gnome.org/users/orca/stable/commands_structural_navigation.html)

Don't write too many commands, though! These notes are just a memo, and should be clean and easy to read.

Conclusion

I had a tough time learning Orca, but it was worth it. I now have a better grasp of why semantics are so important for accessibility and usability. And I can definitely relate better to keyboard-only users.