Search code examples
htmlaccessibilitywai-aria

Is there any benefit to writing aria-required="false"?


Is there any benefit to writing aria-required="false" or is it best only to add aria-required="true" as needed and otherwise leave it off?

I have struggled to find any clarification on this in the WCAG docs I have read.


Solution

  • For simplicity, I always leave off the attribute rather than setting it to false even if false is the default value. Most(*) of the time you're ok either way. From a javascript perspective, sometimes it's easier to use a conditional (ternary) operator rather than remove the attribute.

    disabled = obj.getAttribute('aria-disabled');
    obj.setAttribute('aria-disabled', disabled ? "false" : "true");
    
    /* versus */
    
    disabled = obj.getAttribute('aria-disabled');
    if (disabled) 
      obj.removeAttribute('aria-disabled')
    else 
      obj.setAttribute('aria-disabled', "true");
    

    Sometimes there's a note in the doc to not do this, as with aria-hidden

    Note
    At the time of this writing, aria-hidden="false" is known to work inconsistently in browsers. As future implementations improve, use caution and test thoroughly before relying on this approach.

    (*) There are a few aria- attributes where you do have to set the value specifically to true or false because setting it to false is not the same as not having the attribute, such as aria-expanded, aria-pressed, aria-checked, aria-selected. For example, not having aria-expanded doesn't have any meaning but having aria-expanded="false" means you have an expandable/collapsable section that is currently collapsed. Not having aria-checked doesn't have any meaning but having aria-checked="false" means you have a checkbox that is unchecked.

    With aria-required, since it's value will typically not change once it's set (unlike the four attributes just mentioned which do typically change based on user interaction), I keep the code simple and just don't have the attribute.