Field labels for accessibility

  • Resolved slingshotdesign

    (@slingshotdesign)


    4 years ago

    Hi, I think this plugin is really great!

    However I have a page that uses dropdown menus (select fields) to filter posts and when I test the accessibility of the page with tools such as axe devTools the dropdowns/selects return a critical error that says “select element must have an accessible name”.

    More info on the error here

    Is there an option to use standard html labels for fields rather than putting the wpc-filter-title in divs?

    Is this a feature of the Pro version?

    For now I guess I’ll have to override the templates but given that accessibility is so important, it would be great if regular form labels were used or there was an option in the plugin?

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter slingshotdesign

    (@slingshotdesign)

    4 years ago

    For anyone else interested in this, because the select is already labeled visually by the filter title, the dropdown.php template can be overridden by copying it to yourtheme/filters/dropdown.php.

    You can then add an aria-label tag to the select element like this:

    <select id="wpc-<?php echo esc_attr( $filter['entity'] ); ?>-<?php echo esc_attr( $filter['e_name'] ); ?>-<?php echo esc_attr( $filter['ID'] ); ?>" aria-label="wpc-<?php echo esc_attr( $filter['entity'] ); ?>-<?php echo esc_attr( $filter['e_name'] ); ?>-<?php echo esc_attr( $filter['ID'] ); ?>" class="wpc-filters-widget-select">

    The dropdown is then better for accessibility.

    Plugin Author stepasyuk

    (@stepasyuk)

    4 years ago

    Hi @slingshotdesign

    Thank you for your advice. I added this code to the dev version of the plugin and it will be available in the next update.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Field labels for accessibility’ is closed to new replies.