ARIA - Do you need to use ARIA-EXPANDED with ARIA-HIDDEN?

StackOverflow https://stackoverflow.com/questions/21832334

  •  12-10-2022
  •  | 
  •  

Question

I am new to ARIA roles. If I have tool-tip type functionality, i.e. if someone click the question mark button more text is displayed detailing instruction on how to fill in the form field, should I be using the aria-expanded attribute, the aria-hidden attribute or both?

<div class="login-form-field tt-highlight">
    <div class="error-message error-style">
        <p>Sorry you have not entered anything in the field above.</p>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-10"> 
        <label for="inputTxtCustomerPostcode" class="login" />Postcode:</label>
        <input id="inputTxtCustomerPostcode" type="text" />
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
        <a title="Please enter a valid case reference tooltip" class="login-tooltip" data-toggle="collapse" data-parent="#accordion" href="#collapseTxtCustomerPostcode" role="button" aria-pressed="false"></a>
    </div>

    <div id="collapseTxtCustomerPostcode" class="panel-collapse collapse" role="tree tooltip">
        <div class="panel-body" role="treeitem" aria-expanded="false" aria-hidden="true">
            <p>some text goes here for the tooltip</p>
        </div>
    </div>
</div>
Was it helpful?

Solution

Use the RDF model diagram to help:

RDF Data Model Diagram

aria-expanded is defined for the treeitem role via inheritance.

aria-hidden is defined for all roles, but has this caveat:

Note: Authors are advised to avoid using aria-hidden="false" with styles or attributes that have historically prevented rendering in all modalities, such as display:none or visibility:hidden in CSS, or the hidden attribute in HTML 5. At the time of this writing, aria-hidden="false" is known to work inconsistently when used in conjunction with such features. As future implementations improve, use caution and test thoroughly before relying on this approach.

As a result, aria-expanded by itself should suffice.

References

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top