Skip to main content

Keyboard

Many users with motor disabilities rely on the keyboard as well as many blind users. For many enterprise applications efficiency may the reason to use the keyboard. As an Ionic application can target the web its important to test for keyboard accessibility.

The first step in testing keyboard accessibility is to pressing the Tab key to see what interactive elements you can and cannot reach.

Testing can be done in any web browser or mobile device with a bluetooth keyboard.

You may need to enable tabbing to ensure all interactive controls will focus:

  • For Mac - Visit System Preferences > Keyboard > Shortcuts > Keyboard.
  • For Safari - Visit Safari > Preferences > Advanced and check the box Press Tab to highlight each item on a webpage

Hidden Controls

If you paste the following line in your dev tools console you can see whenever the active control changes and it will reveal controls that are focused but hidden:

 document.body.addEventListener('focusin', () => console.log(document.activeElement));

Tips

  • Setting opacity to none or height / width to 0 is often used to hide elements but they are still focusable with the keyboard. Use display: none to truly hide elements.
  • A typical cause for hidden controls is the css outline set to none or 0. Consider custom styling outlines instead.
  • The div element is not focusable. If a div has interactivity then it needs to be fixed (eg by changing to button and changing the style).
  • Test using arrow keys as well as the tab key. Not every element accessible via tab can be accessed via arrow keys (and should be).

You can override default styling for a button when you replace a div. For example:

    background-color: transparent;
border: none;
border-radius: 0;

Testing Escape

Pressing the Esc key on the keyboard will close Ionic components like an alertController, ion-picker, ion-menu etc. Make sure to test by pressing Esc on elements you have written and handle by using the keyup event and also be sure to focus() where the user should navigate from next.