Improve accessability support

[anoQlik]

Collection on accessibility issues as reported by audit of mashup example (edit by Caele)

• tags are decorative and provide no information to users should have aria-hidden="true" attributes (applies to filterpane) - (note/Caele: Listbox icons used, probably lock icon)
• Buttons that are not marked up as such; screen readers will not identify them as actionable and they will not be usable by keyboard users.

elements:

• Listbox > more buttons

• Buttons in current selections

• Expanded content uses ARIA menu roles, which are only intended for desktop-style application menus. Improper use of these roles often prevents screen reader users from accessing the expanded content.
  elements:

  • Listbox > more button (expanded) > list of buttons
    Remove the ARIA menu roles from this menu, including role="menu", role="menuitem", and role="menubar"

• Focus indicator missing

  • Listbox > more button (expanded) > list of buttons
    A focus indicator should always be visible, and have sufficient contrast. It is best to intentionally style the focus indicator for all links, buttons, fields, etc. We encourage you to change the shape somehow (add a border, box, underline, etc.) as well as choose a color that has sufficient contrast, and test each element with the tab key to make sure a focus indicator is always visible for each focusable element.

• Elements control expandable content, but it is not indicated by screen readers.

  • Listbox > more button
  • Buttons in current selections
    Add an aria-controls attribute to the elements that control the expandable content and set the values of those attributes to equal the ids of the tags that wrap the expanded content. Also add an aria-expanded="true" attribute to those same control elements when content is expanded, and aria-expanded="false" otherwise.

• Ensure that information of the selectable nature of elements is conveyed. (listbox rows)

• Buttons incorrectly labeled
  Add screen reader only text or an aria-label attribute to each of these buttons which tells users where they go and/or what they do. These are labeled with title attributes, but this is not sufficient for these labels to be ready consistently across various browser and screen reader combinations.

• Form field for search in listbox should be correctly labeled