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
- For Safari - Visit
Advancedand check the box
Press Tab to highlight each item on a webpage
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));
0is often used to hide elements but they are still focusable with the keyboard. Use
display: noneto truly hide elements.
- A typical cause for hidden controls is the css
0. Consider custom styling outlines instead.
divelement is not focusable. If a
divhas interactivity then it needs to be fixed (eg by changing to
buttonand 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:
Esc key on the keyboard will close Ionic components like an
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.