Accessibility issue

Hello WooBeWoo team,

we are trying to make a woocommerce shop as accessible as possible, but the inputs that are being generated by your filter-widget have some accessibility issues.
(Note: I’m using only price and checkbox-list (multiple select) inputs, I don’t know if the rest of the inputs have the same problem)

The problems with the input fields that are being generated are:

1) All inputs have an EMPTY label, which is wrong in terms of accessibility. Instead you could probably use an aria-label tag in order to give more info for users with disabilities ( see here for more )

2) All inputs are wrapped by a <label> tag, which can confuse screen reader because it appears like these inputs have 2 labels ( both empty ). It would be better if you could wrap your input fields with div or something.

Sample of the code generated by the plugin:

<label>
  <span class="wpfCheckbox">
    <input type="checkbox" id="wpfTaxonomyInputCheckbox30145962">
    <label for="wpfTaxonomyInputCheckbox30145962"></label>
  </span>
  <span class="wpfDisplay">
    <span class="wpfValue">
      <div class="wpfFilterTaxNameWrapper">One Size</div>
    </span>
  </span>
</label>

1. Do you have any plans changing this behavior soon?
2. Also, is there any easy way to change this behavior without changing the source code?

Thank you in advanced!

• This topic was modified 4 years, 9 months ago by cuniq.
• This topic was modified 4 years, 9 months ago by cuniq.