CODEWITHSUNDEEP
htmlaccessibilitywai-aria
user3433451
user3433451

Reputation: 101

Can I use multiple ARIA roles on a parent element

Can I have multiple roles on a parent element for example:

<div class="row">
    <div class="col-sm-6" role="rowheader">
        <p>Access to our award-wi</p>
    </div>
    <div class="col-xs-6 col-sm-3" role="row gridcell" >  <<<
        <img src="#{request.contextPath}/resources/books/images/icon_tick_table.png" role="gridcell"
             alt="" title="s" class="table-image"/>
    </div>
    <div class="col-xs-6 col-sm-3">
        <img src="#{request.contextPath}/resources/form/hello.jpg" role="gridcell"
             alt=": Yes" title="s" class="table-image"/>
    </div>
</div>

Upvotes: 8

Views: 8528

Answers (1)

unor
unor

Reputation: 96567

WAI-ARIA’s role attribute can have a list of values, but only the first valid and supported WAI-ARIA role will be used:

The first name literal of a non-abstract WAI-ARIA role in the list of tokens in the role attribute defines the role according to which the user agent MUST process the element.

From the User Agent Implementation Guide about Role mapping:

[…] WAI-ARIA allows multiple roles to be specified as an ordered set of space-separated valid role tokens. The additional roles are fallback roles similar to the concept of specifying multiple fonts in case the first choice font type is not supported.

Upvotes: 11

Related Questions