Accessibility issues on most fields

  • Hi I love the plugin but, it is lacking a lot to make it compliant with WCAG standards, an example is that labels are displayed as h4 tags, also the range dates lacks labels and are users can not use the keyboard to use the calendar.

    Could these features be improved to meet Success Criterion 2.4.6?Headings and Labels at least?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Code Amp

    (@codeamp)

    Hey @sadesades

    In the next couple of months we’re about to replace this version with a completely new version rewritten ground up.

    You can find more info (and download it) here: https://searchandfilter.com/version-3/

    Just yesterday we started an a11y audit on the new plugin:
    https://x.com/SearchAndFilter/status/1810251474644988277

    It will take several passes and there is a lot to cover, but rest assured we’re working hard on a11y and I think in a few months we’ll be in a really good place.

    A warning, the new version is quite different from this version, and its still in testing + development, if you do test it out, we would love to hear your feedback.

    While it does have a lot more features, it’s also not covering some use cases (yet) that the current version does, so if that’s the case with you we want to know about it so we can make sure we’ve got you covered.

    Thanks

    Thread Starter sadesades

    (@sadesades)

    The new version is looking good, I did not find a way to add date rangers, I did some testing and this is what I found:

    Input fields, select fields etc this is for the default plugin styles or functionalities…:

    Focus Identifier should have a contrast ratio of at least 3:1

    https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum

    The focus identifier should display as a solid outline around the actionable field and fully visible ( The default styles is hard to notice so recommended ) Understanding Success Criterion 2.4.13: Focus Appearance | WAI | W3C

    Date Picker:

    Focus identifier as above and is even harder to notice.

    Ensure that all content can be accessed with the keyboard alone. this part fails when using the date picker, users can only navigate through the days to get to a month they need to press the arrows to the first day or last day of the month, there is no way with keyboard to access the month and year drop down on the top of the datepicker.

    https://www.w3.org/WAI/WCAG22/Understanding/keyboard-accessible

    Imagine the scenario a keyboard users is on the calendar widget and wants to search 15 years ago, or 8 months back, the way it is working right now would not be efficient, and hard to reach, even if they can type the year or dat, since there is a calendar widget it needs all its elements to be able to be accessed by keyboard.

    On the same Calendar widget the focus order after using the arrow keys to select a day, if I press the tab key, it jumps to the first element on the page (Skip Content link for example), this focus sequence is wrong and fails for https://www.w3.org/WAI/WCAG22/Understanding/focus-order

    Another issue with the datepicker, after picking a date if using the keyboard i remove the date the focus on the field is not visible.

    Hope this helps to improve the plugin, it is looking great hope to be able to use the final version soon.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Tags