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.

4 weeks ago

Comments (1)

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
5 days ago