Login

To vote or comment, enter your email and we'll send a magic link

3

A11y improvements

open

Use native form elements whenever possible for facet UI, especially simple facet types such as checkbox and radio buttons. Ideally done in conjunction with retiring the accessibility shim and making accessibility and semantic HTML first-class citizens of the plugin.

1 month ago

Comments (2)

Just to recap for anyone out of the loop:

FacetWP currently uses <div> elements for most facet types. The original intention was that this approach would greatly simplify styling, while also keeping HTML output at a minimum.

One example: native HTML checkbox inputs cannot be fully styled. Instead, you have to hide the checkbox, create a duplicate element that "simulates" the checkbox, then put it into a <label> element so it reacts to a user selection.

We decided to use <div>s directly to keep things simple. The problem is that screen readers have no idea when a <div> should be treated like a checkbox.

That's where ARIA comes in -- it lets you add HTML attributes to various elements, telling the browser / screen reader how to handle those elements.

Our A11y support uses JavaScript to dynamically add ARIA tags when needed. The support includes the following facet types, but admittdely ARIA isn't a perfect solution hence why this feedback exists in the first place:

  • checkboxes
  • radio
  • select (native)
  • fSelect
  • search
  • hierarchy
  • pager
1 month ago

Hello there,

If I may propose a solution : you could add an option (in the facet panel for radio buttons and checkbox) to let the user/developer choose between :

  • "Use a native HTML form element"
  • "Use a custom element with advanced styling capability (+ A11y JS shim)"

If they choose "Use a native HTML form element", it improves accessibility by default and also performance (you don't need to load the A11y shim). If they choose "Use a custom element with advanced styling capability", they can still style the <div> element as they see fit.

What do you think about it ?

1 day ago