Search code examples
htmlwai-ariasection508

Correct 508 markup for requiring one of a set of checkboxes


I have a form that has a set of checkboxes. The user needs to check one or more of these. I'm confused as to how to deal with this via form validation and markup. I have an Error summary box that I can add a message, but my other form fields also have a message under each field that specifies the error, but since this is an issue with the set, I don't think that would be appropriate, so I assume just having it in the error summary box and being able to click on a link to the first of the set of checkboxes would be acceptable? Secondly, what about aria tagging? Would aria-required be appropriate? If so, how do you specify this for the entire set of checkboxes rather than each one individually, since none of these are required in and of themselves?


Solution

  • There isn't good markup to say a group of stuff is required but each one individually isn't necessarily required (although at least one is required). It's hard enough to express that in English :-)

    With aria, you can sort of get around that.

    <div role="group" aria-label="my list of checkboxes, you must select at least one">
      <input type="checkbox"...>
      ...
      <input type="checkbox"...>
    </div>
    

    aria-required="true" isn't allowed on the group.