Report: Table option #45
Description
Review process
- Scope of review
- name of UI elements: Table option
- date of review: 21/07/2018
- Reviewers: Stefan Wajda
- Evaluation environment:
- Windows 10,
- Chrome 67.0.3396.99
- Methods and tools
- Tools: aXe, Lighthouse, NVDA
- Methods: code inspection, testing keyboard only, testing with screen reader
Result and recommended action
Summary of results
The sorting and filtering functions provided by the tool are accessible. However, a few of problems have been identified that may result in inaccessibility.
Strengths
All sorting and filtering options are accessible from the keyboard..
Failures and recommendations
1. The ‘select’ elements do not have corresponding labels
The select lists do not have correspondingly associated labels. The function or purpose of the lists can not be presented to screen reader users. Some users may also have problems understanding the purposes of the lists. The functions of some lists can be deduced by users from the name of the first option ('Select Category', 'Select Status', 'Select Access', etc.). But in a few cases there is no such value describing the purpose of the list: (1) a list limiting the number of items per page, (2) a list ‘Select location’ on pages: “Modules manage” “Language installed”, “Templates: Styles”.
- Recommendation:
- Add labels for users of screen readers (hidden from sighted users - ‘sr-only’)
- Add first option value: “- Select Location -” and “- Item per page” for sighted users
- Success Criteria:
- Suggested techniques:
- H44: Using label elements to associate text labels with form controls
- G131: Providing descriptive labels
- ARIA6: Using aria-label to provide labels for objects
- ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used
- ARIA16: Using aria-labelledby to provide a name for user interface controls
2. Select must not change context
When a keyboard-only user uses the Escape key on an option that has a focus, the page is automatically reloaded. Similarly, when the screen reader user changes a selected option in the list is collapsed using the arrow keys, the page is automatically reloaded.
Select elements with onchange event handler must not automatically change the user's context when keyboard focus moves between options.
User's can become disoriented if the focus changes cause unpredictable actions.
When the user is using the keyboard to explore select box options, the focus must stay on the options, until the user selects one of the options.
See: FAE - select must not change context
- Recommendation: Do not use onchange event handlers on select elements. Use selections should be made using the enter key.
- Success Criteria:
- 3.2.2 On Input (Level A). Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
- 2.1.1 Keyboard (Level A)
3. No labels in multiple-select lists
Multiple-select lists are used on the Article manager page. The user does not see the description of these lists as they are expanded. Screen reader users hear neither list description nor list option names.
- Recommendation:
- Add labels for users of screen readers (hidden from sighted users - ‘sr-only’)
- ????
- Success Criteria:
- Suggested techniques:
- H44: Using label elements to associate text labels with form controls
- G131: Providing descriptive labels
- ARIA6: Using aria-label to provide labels for objects
- ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used
- ARIA16: Using aria-labelledby to provide a name for user interface controls
Appendix: Keyboard interaction
- Tab / Shift+Tab:
- moves focus from the previous/next interactive element to a button when it is collapsed (all list are collapsed)
- when the lists are expanded, moves focus between the lists
- Enter:
- when the focus is on a collapsed button, expand the lists
- when the focus is on a collapsed list, expand the list
Note: If none of the options are selected before the listbox receives focus, the first option receives focus. Otherwise, the currently selected option in the list receives focus.
when the focus is on the selected option, activate this option
- Space:
- when the focus is on a collapsed button, expand the lists
- when the focus is on a collapsed list, expand the list
- Arrow Up / Arrow Down: moves focus to the previous/next option
- Home / End: moves focus to the firs/last option
- Type a character: moves focus to the next/previous option with a name that starts with the typed character.
- Quickly type multiple characters: moves focus to the next/previous option with a name that starts with the string of characters typed
- Backspace: remove an option from the multiple-choice list
- Escape: collapses the listbox without selecting the currently focused option