Instructions for working with Accessible Diagrams
You can navigate through the diagrams with various keys. Reading the diagram is possible on every platform and browser. Below is a list of keys that you can use for navigation, some more detailed instructions on how to navigate inside a diagram, and some tips on working with some selected screen readers.
Keys to Navigate
Initialisation
| Key | Effect |
|---|---|
| Enter, Left-Click, or A | Activate keyboard driven exploration |
| B | Activate menu driven exploration |
| Escape | Leave exploration mode |
Righthanded Navigation
| Key | Result |
|---|---|
| Cursor down | Explore next lower level |
| Cursor up | Explore next upper level |
| Cursor right | Explore next element on level |
| Cursor left | Explore previous element on level |
Lefthanded Navigation
| Key | Result |
|---|---|
| D | Explore next lower level |
| E | Explore next upper level |
| F | Explore next element on level |
| S | Explore previous element on level |
Other Interaction Control
Magnification
| Key | Result |
|---|---|
| N | No magnification |
| M | Step magnification |
| Comma | Direct magnification |
Speech Output and Display
| Key | Result |
|---|---|
| X | Toggle expert mode |
| L | Next language (if available) |
| Z | Toggle subtitles |
| V | Toggle screenread style subtitle |
| C | Next high contrast color |
| T | Toggle monochrome display |
Sound Output
| Key | Result |
|---|---|
| K | Kill sound |
| O | Start sonification (if available) |
| P | Repeat sonification |
| Y | Stop self-voicing (if available) |
| U | Repeat last utterance |
| Space | Repeat last sound |
Navigating in a Diagram
If you focusing a diagram you screen reader should announce ‘Navigatable Diagram’ or ‘Navigatable Molecule’. Press ‘Return’ or ‘A’ to start navigation. This will present the name or caption of the diagram or a simple top-level description.
- With the down arrow you go one level deeper. We call this level 1. You are on a (main) component of the diagram. To find out how many main parts there are, press the right arrow key. You step back with the left arrow key.
- To find out what one of the main components consists of, go to that component and press the down arrow key again. Now you have entered level 2, which is a level deeper.
- To know if you are at the deepest possible level, try your down arrow. If another explanation is presented you have entered another, deeper level with additional details. Otherwise you are already on the deepest possible level.
- To move back up one level higher, use the up arrow key.
- In this way you can walk through the diagram and can form a mental picture of where you are in the diagram and how its components relate to each other.
Getting started with your Screen Reader
Here are some tips on what you might need to do to make it easier to work with the accessible diagrams with your particular screen reader or platform.
Voice-over on Mac OS
Do you work with voice-over on the Mac? Before you start using the website, you must do a number of things:
- In the VoiceOver utility under the Web tab, check the last option (Always allow keyboard commands to navigate websites).
- Turn off your quick navigation when viewing the diagrams.
- As soon as you hear the announcement of “navigable diagram/molecule”, press A. You can then navigate the diagram. To leave navigation, use quick navigation or press CTRL + Option + arrows.
Windows with Jaws
If you work with Jaws, navigate to the diagram with Jaws and press space and then A to enter navigation mode. To exit navigation mode, press the plus on the numeric keypad twice.
Windows with NVDA
With NVDA you can enter the diagram by focusing on it pressing Tab. Then press A to enter navigation mode. To exit navigation mode, press ctrl + NVDA + space.