Article Contentuseover, or keystroke.
- Prefer HTML whenever possible
- Discoverability - usability - device independence
- Add semantics
- Testing is mandatory
- Read more
Prefer HTML whenever possible
Discoverability - usability - device independence
Screen readers have trouble recognizing dynamically added content on web pages. Also, many behaviors are mouse-only, so they don't respond to keyboard input.
This applies to forms, for example. In the worst case it can happen that a completed form cannot be sent because the button only reacts to mouse input and not to the keyboard.
Which brings us to the next point: the input device should not be relevant. It shouldn't matter whether someone is using their device with a mouse, keyboard or touch.
Another area that can be problematic is dynamic menus. These menus expand when the mouse is moved over them. There are three reasons why these menus are difficult:
- They are almost never keyboard operable. In the worst case, the user gets stuck at the level he is currently on and cannot access the lower web pages. At best, he just has trouble moving from one level to the next.
- People with gross motor skills have trouble guiding the mouse precisely. The element collapses as soon as it is left, it becomes an ordeal to access the menu item.
A particular problem are the lightboxes, which are dialog boxes that are placed over the content of the website and expect an input. It can happen to blind people that they don't even notice what's happening on the screen because the screen reader continues to move over the website as if nothing were happening. The sighted keyboard user, on the other hand, notices that there is a dialog box, but cannot reach it with the keyboard.
ARIA basically just adds the semantics. Functionalities such as keyboard usability must also be added.
Testing is mandatory
In addition, the website should be checked with the keyboard. A screen reader test can't hurt either. I have already mentioned the critical points above: dynamic navigation, forms and lightboxes.