Accessibility & JetSmartFilters

[chwebagency]

OVERVIEW

The majority of JetSmart Filters, while amazing for mouse and visual users, lack the ability to select with TAB/Keyboard or work correctly with a screen reader.

FILTERS

Checkbox Filters

1. Keyboard: Unable to access checkboxes with TAB/Keyboard. Should be able to check and uncheck with spacebar.
2. Screen reader: No attribute to indicate checked or unchecked.

Here is an example of how checkboxes could work: https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html

Radio Buttons

1. Keyboard: Unable to access radio buttons with TAB/Keyboard. Should be able to check and uncheck (if feature is enabled) with keyboard.
2. Screen reader: No attribute to indicate which radio button has been checked or unchecked.

Here is an example of how radio buttons could work: https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html

Pagination

1. Keyboard: Unable to access pagination with TAB/Keyboard. Should be able to navigate through numbers with just keyboard.
2. Screen reader: No attribute to indicate which number is current page

This could be a resource: https://designsystem.digital.gov/components/pagination/

Combo Box/Select Appears to work correctly. It's accessible by keyboard. And identifies when expanded and closed.

...

Support suggested installing the plugin accessiBe to have accessibility. Accessibility Plugins are unfortunately not a sufficient solution for many clients.

Recommended Solution: Add the appropriate roles, tabindex attributes, and aria attributes to make these filters accessible to keyboard and screen reader users.

Please make these a priority fix.

[jamsheehan]

+1

[blb48]

+1

[heroicP]

+1

[heroicP]

The Month Selector filter has been giving me the most problems. It's easy to overlay my own JS to make the various items keyboard accessible but without much insight into how your events are working and without any hooks I can't make the selector actually function properly for people using screen readers and keyboard navigation.

[blb48]

We're also using a hacky JS solution to fix SmartFilters (similar to #4514). These really need to be accessible out of the box.

[prostylewebdesign]

Also would add that there are duplicate ID's that are generated when using Hierarchal Filter, which are critical issues to meet WCAG 2.1 AA. Would be a good ability to change ID's, add aria-label, etc. to pretty much every component.

[this-is-ries]

+1 much needed, Jet Smart Filters really need to be accessible

[Samouk]

+1 this really is a much needed functionality, hoping that it does indeed get added soon. In the meantime does anybody know how to imprement a temporary fix?