By Michael Große, WMDE
Modern websites are expected to be accessible for as many users as possible. Universal design includes aspects such as color contrast, keyboard navigation, or input methods. Blind users and users with visual impairments often also use screen reader software which renders text and images as speech or Braille output.
Hence developers need to design and implement websites that work well with assistive technology such as screen readers. The best way to ensure this is to actually use a screen reader yourself.
This tutorial covers how to install, set up and use Orca on Linux systems, with sighted developers, product managers, and user experience designers in mind. Orca is a screen reader available on Linux which is being continuously developed as part of the GNOME project. It is probably the best choice to test screen reader conformance when developing on Linux.
In addition to this tutorial, I also found a video with Orca installation, setup and usage instructions on Youtube for those who prefer a video format.
If Orca is not available by default on your system, you need to install the packages
espeak-ng as provided by your distribution. The
espeak-ng voices aren’t great at all, but so far they seem to be the only thing that works.
Setting it up
You can open the Orca settings dialog by pressing Alt+F2 (the application launch menu) and typing “
orca -s” and then pressing Enter. The most important setting is in the top left: Keyboard Layout. This switches between two sets of key bindings suitable for either the narrow laptop keyboards or wide external keyboards with a dedicated Numpad. That keys on that Numpad will be referred to as “KP”, e.g., KP Plus for the plus key on the Numpad. Note that the num-lock must be disabled.
Select what is appropriate for you. This article will always mention both key bindings if they differ.
One of the important keys is the Orca Modifier key, which enables some meta commands for Orca.
- Desktop: Insert or KP 0
- Laptop: Caps Lock
You can open the settings again while Orca is running with Orca Modifier+Space.
Starting and stopping Orca
When Orca is not running you can start it by bringing up your application launch menu with Alt+F2 and type “
orca” and press Enter. You can stop it similarly: in the application launch menu type “
killall orca” and press Enter.
When Orca is running it replaces many of your normal keyboard letters with commands for navigating the document by structure (more on that below). You can toggle this behavior with Orca Modifier+z.
Having Orca talk all the time can be pretty annoying. You can silence it with Orca Modifier+s. But note: Orca’s structural navigation commands affecting many of your keyboard keys (mentioned above) are not disabled by this and might still be active. This can lead to behavior that is confusing and tricky to debug, so take care.
Use Arrow Left and Arrow Right to go forward/backward by one character and Ctrl+Arrow Left and Ctrl+Arrow Right go forward/backward by one word. Arrow Up and Arrow Down read the previous/next line. You can use the Tab (and Shift+Tab) key to move between focusable elements (links, buttons, inputs, etc.).
Orca’s Say All command will cause Orca to speak the entire document beginning from your current location.
- Desktop: KP Plus
- Laptop: Orca Modifier+Semicolon
Listening to a document from start to finish is likely not the usual use case. Screen readers offer a variety of commands to navigate the document’s structure. A full list is available at the official documentation on structural navigation. Below is a selection of commands to get you started.
As mentioned before, these commands can be toggled on or off with Orca Modifier+z. By default, they are on.
Moving by headline
- Next and previous heading: H and Shift+H
- Display a list of headings: Alt+Shift+H
You can use 1 to 6 to go to the next headline of the respective level and Shift+1 to Shift+6 to go to the previous one. Alt+Shift+1 to Alt+Shift+6 gives a list of all headlines of that level
Moving by landmark
Different regions of a webpage have different functions, like navigation, main content or search. The regions are ideally marked up as so-called landmarks to help with navigation.
- Next and previous landmark: M and Shift+M
- Display a list of landmarks: Alt+Shift+M
Moving by link
- Next and previous link: K and Shift+K
- Display a list of links: Alt+Shift+K
Moving in lists
- Next and previous list: L and Shift+L
- Display a list of lists: Alt+Shift+L
- Next and previous list item: I and Shift+I
- Display a list of list items: Alt+Shift+I
You can follow links by pressing Enter, push buttons by pressing Space or Enter.
When navigating forms, you can use Tab/Shift+Tab to go to the next/previous focusable object, regardless of type or you can use Orca’s structural navigation commands for forms to move to the next or previous form field. In order to use the structural navigation commands to exit a form field, you must be in browse mode. If you are in focus mode, you can switch to browse mode by pressing Orca Modifier+A.
You should now be able to move around the document in some basic ways and have the screen reader tell you its contents. More useful commands can be found in the Orca command reference and Orca preferences documentation. More information on high-level concepts can be found in the Orca documentation. Guidelines for how to ensure accessibility issues can be found in Mediawiki’s Accessibility guide for developers.
Try to get more familiar with your screen-reader, then start to use it with your eyes closed or wearing a blindfold or with your computer monitor turned off. It is surprising how different one’s product can appear when one can’t see what is going on.