notification: Focus order is not logical #135
Description
WCAG Level
Level A
Priority
Medium
Pages/screens/components affected
Description
For people who navigate using a keyboard or keyboard-like device (such as a switch control or a joystick) the focus order of interactive controls in a document should be logical and intuitive.
When the notifications are displayed they can optionally include a control to close the notification. However, because the notifications are added to the end of the <body> element to allow for positioning anywhere within the viewport the notification component and any focusable elements within the notification will not immediately follow the trigger control (if there is one) in the focus order or allow for easy access to the component with a keyboard.
User impact
If the focus order is not logical, sighted keyboard users are likely to be confused and irritated when navigating through a site, particularly if the focus appears to "jump" in an illogical manner to different, seemingly unconnected parts of the screen. This issue will be even more problematic of users of assistive technologies, who may not have the benefit of being able to perceive the overall layout/structure of the page to realise that that the illogical focus order has potentially moved them – or require them to move – to a completely separate part of the current page.
While the impact of this is potentially high in terms of the level of frustration it would cause, this is only applicable to notifications that do not auto close and/or those that contain interactive content.
Required solution
When content displayed on a site of application contains interactive controls it must be possible to interact with these controls using a keyboard. This should take in to account practical limits of keyboard use, for example it is not reasonable to conclude that because it is technically possible for a keyboard user to tab through intervening content to access a notification positioned at the end of the <body> element that it is accessible in a practical way.
Implementation guidance
While the broad range of possible uses of the notification component make it difficult to provide one solution to this problem, the documentation does at least provide good advice in the Making Interactive Elements Keyboard-Accessible section.
Our recommendation is to provide alternative interactions, to move focus to the notification or to trigger the closing of the notification for example, standard. While keyboard shortcuts should be used with care, and must follow the requirements of WCAG 2.1 Success Criterion 2.1.4 Character Key Shortcuts (Level A), shortcuts such as pressing the ESCAPE key to close a notification while the triggering control is focused should be considered.
Test procedure(s)
Use these steps to confirm that the solution has been correctly applied:
- Use
Tab/Shift+Tabto navigate through the page. - Verify that the order in which elements receive focus is logical and consistent.
- If interactive content is added to the page ensure that one or more of the following is true:
- focus is moved to the new content;
- it follows the triggering control in the focus order;
- focus can be moved to the new content with a keyboard shortcut;
- any actions possible using a mouse or other pointing device can also be taken using a keyboard, for example with a keyboard shortcut;
Definition of done
Complete all of these tasks before closing this issue or indicating it is ready for retest:
- All issues identified within the test sample have been resolved.
- The rest of the components, their variants, and the documentation website have been tested for the same issue.
- All issues identified throughout the rest of the components/website have been resolved or filed as new issues.
Related standards
More information
Test data
Test date: March 2021
Website: vaadin.com/components, vaadin.com/docs-beta