如何将 aria-invalid 和 aria-describedby 属性用于复选框组

Question

I have a checkbox set as a form element and need to use aria-invalid and aria-describedby attributes on them. Should the attribute be written on every single checkbox or on a fieldset?

Answer 1

In general, any object that is in error should have aria-invalid set to true. Setting that on the fieldset might be a bit confusing. Does it mean all the objects in the fieldset are in error? What if some are in error and others are not? Does that make the fieldset in error? Or is it partially in error? Perhaps you have a design where it makes sense to have the fieldset in error, but that is probably an exception rather than the rule.

Technically, from an html spec perspective, it is valid to set aria-invalid on a fieldset ( https://www.w3.org/TR/html51/sec-forms.html#the-fieldset-element ). See "Allowed ARIA state and property attributes".

I am confused, though, by your original question. You want to set aria-invalid on a checkbox? How does a checkbox become invalid? It's either checked or not. Do you put the user in a scenario where checking the box isn't valid? If so, shouldn't the checkbox be disabled?

And for aria-describedby , you'll want to test that with various browsers and screen readers. Sometimes the label associated with aria-describedby isn't read immediately. There can be a pause, or the screen might say to hit alt+ <somekey> to hear the description. aria-labelledby , on the other hand, is read immediately.

Answer 2

I have a checkbox set as a form element and need to use aria-invalid and aria-describedby attributes on them. Should the attribute be written on every single checkbox or on a fieldset?

From a theorical point of view, it makes more sense to set it on a fieldset .

An individual checkbox has only two states, and I can't see how one individual checkbox within a fieldset could have an error, except when there's only one checkbox (license agreement for instance)

For the same reason if your aria-describedby point to the error message, it has to be on the same element.

Answer 3

Tenon team has researched that case thoroughly and came to the conclusion of not using aria attributes at all since the results in various screen readers are discouraging.

There solution/ suggestion is the next:

Dynamically injecting the error text into the legend . Our winning combination came from completely stepping away from the tried and tested aria-describedby and manipulating the legend text based on the current validity state of the control. When an error occurred we appended it to the text in the legend and removed it again if no error condition existed.

Check their blog post for more details on the subject.

Answer 4

You shouldn't set the attributes on all elements but you could set the aria-invalid to true for the first check box only.

Example:

<input name="nom" aria-invalid="false"
    onclick="checkValidity('nom', ' ', 'your message 1');">
<br />
<input name="courriel" aria-invalid="false"
    onclick="checkValidity('courriel', '@', 'your second message);">

//js
<script type="text/javascript>
  var checkValidity = function(aID, aMsg){
  var elem = this,
    invalid = (elem.value.indexOf(aSearchTerm) < 0);
  if (invalid) {
   elem.setAttribute("aria-invalid", "true");
   updateAlert(aMsg);
  }  else {
   elem.setAttribute("aria-invalid", "false");
 }
}
</script>

OR you can use JQuery