Keyboard - GermanCentralLibraryForTheBlind/readium-js-viewer GitHub Wiki

Introduction

The Readium "web / cloud" reader and the Readium Chrome extension both support mixed keyboard and mouse interaction.

The HTML-based interface has been designed to accommodate the needs of users with disabilities, such as people with visual impairments. Readium has been tested with several screen readers (e.g. ChromeVox, NVDA, Window Eyes, SuperNova), but ; due to technological limitations in web browsers and screen readers ; the most suitable level of accessibility can effectively be achieved using VoiceOver on Mac OSX, and JAWS on Windows OS.

Basic gestures

In order to navigate the application's user interface and to activate commands, the following basic keyboard actions can be used (with or without a screen reader):

  • "tab" and "shift+tab" moves the keyboard focus across the main controls (buttons, links, sliders, etc.). Note that the focused item gets highlighted using a dotted border + glowing surround.
  • "enter" or "space" keystrokes activate buttons and associated commands.
  • "left" and "right" arrow keys change slider values, and select radio button options.
  • the "escape" key closes popup dialogs.
  • pre-defined single-key shortcuts are directly associated with specific commands (see list below).
  • HTML "access keys" identical to the single-key shortcuts are also exposed. This redundant access mechanism is necessary, because some screen readers disable Readium's standard keyboard gestures. Depending on web browsers, operating systems, and whether or not a screen reader is running, accesskeys can be triggered using a combination of "ctrl" and "alt" modifiers. On some system configurations, querying an access key results in the keyboard focus moving to the corresponding button, which then requires an extra keystroke for activation ("enter" or "space" key).

Command shortcuts

  • Goto to previous page: 'left arrow' or '1'
  • Goto to next page: 'right arrow' or '2'
  • Show / hide the TOC sidebar (table of contents): 't'
  • Switch to library view: 'b'
  • Toggle "night theme" mode: 'n'
  • Hide the toolbar: 'x'
  • Show the toolbar: 'v'
  • Enter / leave fullscreen mode: 'h'
  • Open settings dialog: 'o'
  • Close settings dialog (save and apply options): 's'
  • Close settings dialog (ignore options changes): 'c'
  • Audio Media Overlays - play / pause: 'm'
  • Audio Media Overlays - previous phrase: 'y'
  • Audio Media Overlays - next phrase: 'u'
  • Audio Media Overlays - show / hide advanced control panel: 'g'
  • Audio Media Overlays - escape current context: 'r'
  • Audio Media Overlays - increase speech rate: 'l'
  • Audio Media Overlays - decrease speech rate: 'j'
  • Audio Media Overlays - reset speech rate: 'k'
  • Audio Media Overlays - increase volume: 'w'
  • Audio Media Overlays - decrease volume: 'q'
  • Audio Media Overlays - mute / unmute: 'a'
  • Audio background soundtrack - play/stop: 'd'

( Developers, see https://github.com/readium/readium-js-viewer/blob/develop/lib/Keyboard.js#L436 )

Customisation

The "settings dialog" contains a section to configure keyboard shortcuts. Each command has a dedicated text input field, where the keyboard shortcut can be typed-in (e.g. "shift + control + alt + o"). Note that upper and lower case characters are treated equally, space separators are optional. The '+' plus signs that separate keyboard modifiers and the key code can be omitted (as they are inserted automatically upon confirmation), but of course whitespace should be used instead to separate fields.

Checks are performed whilst typing and upon confirmation, to avoid duplicated shortcuts and invalid key combinations (visual markers as well as a user interface label denote the two types of errors).

The keyboard shortcuts are normalised automatically using the following syntax: "shift + ctrl + alt + X", where X represents a single key: 0-9, a-z, "up"/"down"/"left"/"right" (arrow keys), "space", "return"/"enter" (note that function keys such as "F8" are not supported, nor are punctuation characters such as "," or "]").

The key character in a keyboard shortcut is significant, as it becomes the HTML access key for the associated command / button (e.g. "shift + control + alt + o" => access key is 'o').

Next to each text input field, there is a button to restore the default keyboard shortcut. There are also buttons above and below the list to reset the entire set of keyboard shortcuts.

For the new configuration to take effect, the browser page must be reloaded (a popup message reminder is displayed when keyboard shortcuts are changed).

Final note: due to HTML access keys and screen readers either interfering or conflicting with keyboard interaction, it has not been possible to reliably implement an easier method for entering keyboard shortcuts, such as a special field input to record key presses.

Reading the book content

To reach the frame containing the actual e-book pages, screen reader users can navigate via the TOC sidebar (table of contents): each time a heading link is activated, the keyboard focus is automatically redirected to the content frame. Once there, screen readers should be able to read the document presented within the frame.

Known caveats

Some web browsers disable keyboard interactivity when entering fullscreen mode. Also note that web browsers usually implement security measures that require user confirmation before fullscreen activation, thus making the single-key shortcut fail on some platforms (in which case, tab-navigating to the fullscreen button is the recommended alternative method to activate the command).

JAWS (unlike other screen readers tested) sometimes gets out of sync with the item that is currently keyboard-focused, particularly when navigating the user interface using fast successions of keyboard commands. Usually, a "tab" + "shift tab" sequence re-syncs JAWS's internal buffer, and the next "enter" or "space" keystroke is then able to activate the correct button. Sometimes also, JAWS repeats the same user interface label despite the keyboard focus moving correctly, like if JAWS's internal buffer was "stuck". When that happens, "alt tab" can be used to switch the application window, or alternatively "ctrl r" / "F5" can be used to reload the page (which usually seems to "cure" JAWS's erroneous state).