Question 405494 in Html Question posted in
Some basic documentation can be found here.

Html – What WAI-ARIA tags are required for an input that filters a list of checkboxes?

Let’s say I have a list of checkboxes inside a <fieldset>. I want the user to be able to filter this list (given that this is pretty big), that is, you type something in this input, and only the checkboxes that match this input will be visible. What WAI-ARIA tags are required on this input and/or the checkboxes?

Or is none required with some good labeling?

Tags:

2

Answers


  1. 0

    When it comes to ARIA, as I see it, this is an untypical Combobox if the value remains in the input: value="Zebra, Zoom"

    The pattern is established and supported by assistive technology, and makes it clear for users of assistive technology that they need to pick options, but that an additional input helps them find (filter) options.

    Typically, the initial state of a combobox is collapsed.

    Contrary to the typical combobox, the associated listbox is permanently visible, so the state is not collapsed but expanded.

    The ARIA standard lists such a pattern in Example 9.

    The required ARIA attributes for the <input> are:

    • aria-expanded="true" always
    • aria-controls="id-of-the-listbox"
    • aria-autocomplete="list" to explain that a list of suggestions is provided

    And those for the listbox:

    • role="listbox", obviously
    • aria-labelledby="id-of-the-label" to provide the required accessible name
    • role="option" on the children
    • or role="group", if grouping options is of interest

    Here’s the trimmed code from the ARIA example.

    <label id="tag_label" for="tag_combo">Tag</label>
<input type="text" id="tag_combo" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="popup_listbox">

<ul role="listbox" id="popup_listbox" aria-labelledby="tag_label">
  <li role="option">Zebra</li>
  <li role="option" id="selected_option">Zoom</li>
</ul>

    As both elements (the input and the list) are within one ARIA widget (or pattern), no <fieldset> is necessary.

    Keyboard navigation

    Especially since the list is very long, as you mention, you definitely should manage focus, i.e. have only one focus stop, and pick options with arrow keys.

    […] authors SHOULD provide keyboard mechanisms for moving focus between the combobox element and elements contained in the popup. For example, one common convention is that Down Arrow moves focus from the input to the first focusable descendant of the popup element.

    The popup element in this case is the listbox.

    Otherwise, keyboard users need to step through all the option elements to continue on the page. This would fail WCAG’s Success Criterion Bypass Blocks.

    If you don’t want to manage focus, you might add a skip link before the listbox:

    <a href="#after-listbox">Skip options</a>
<ul role="listbox" …
  <li …
</ul>

<label id="after-listbox" …>Next input</label>

    Better hide the listbox if it’s long

    If the list is, as you mention, very long, it should be hidden by default.

    In that case, you are using the most established combobox pattern, which is well-documented in the APG.

    • aria-expanded needs to be managed
    • along with the visibility of the listbox
    Login or Signup to reply.
  2. 0 
    <fieldset>
  <legend>Filter options</legend>
  <label for="filter">Filter options:</label>
  <input type="text" id="filter" aria-controls="checkboxes" aria-expanded="true" placeholder="Filter options...">
  <div id="checkboxes" aria-live="polite">
    <label><input type="checkbox" value="Option 1"> Option 1</label>
    <label><input type="checkbox" value="Option 2"> Option 2</label>
    <!-- More checkboxes -->
  </div>
</fieldset>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search