Report: Table option

[zwiastunsw]

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:
  • 1.3.1 Info and Relationships (Level A)
  • 2.4.6 Headings and Labels (Level AA)
  • 3.3.2 Labels or Instructions (Level A)
• 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:

  • 1.3.1 Info and Relationships (Level A)
  • 2.4.6 Headings and Labels (Level AA)
  • 3.3.2 Labels or Instructions (Level A)

• 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

[dgrammatiko]

The multiple selection is base on chosen. This is an abandoned script and we should find a replacement.

[brianteeman]

my personal favourite for the replacement is https://github.com/alphagov/accessible-autocomplete

it is well tested and maintained and very flexible

See examples here https://alphagov.github.io/accessible-autocomplete/

[dgrammatiko]

I thought I already implemented this for review here: https://github.com/joomla/joomla-cms/pull/19671

FWIW I not fan of adding also react to joomla

[brianteeman]

why would you want/need to add react

[dgrammatiko]

It's included by the script...

[brianteeman]

i must be missing something then

[brianteeman]

Please test https://github.com/joomla/joomla-cms/pull/22008

This addresses

1. The ‘select’ elements do not have corresponding labels

[brianteeman]

And partially fixes

3. No labels in multiple-select lists

There are labels now just not the option names

[brianteeman]

Please test this promptly as it is a lot of work to make the changes everywhere and I would like to do it sooner rather than later

[zwiastunsw]

The problem is partially solved by @brianteeman. The PR was successfully tested, but we did not carry out any verification tests.