CODEWITHSUNDEEP
htmlaccessibilitywai-aria
Phoenix
Phoenix

Reputation: 33

Why does the 'role' attribute have no "container" value?

<div class= "container" role= "grid">

For the role attribute of div.container, I choose the grid value.

Why is no container value?

<!-- =layout: start -->
<div class="container" role="grid">
    <div class="row" role="row">
        <aside class="col col-aside" role="complementary">
            <h2>aside</h2>
        </aside>
        <main class="col col-main" role="main">
            <h2>main</h2>
            <!-- =panel: start -->
            <div class="panel" role="region">
                <h3>panel</h3>
            </div>
            <!-- =panel: end -->
        </main>
    </div>
</div>
<!-- =layout: end -->

Upvotes: 0

Views: 1136

Answers (2)

Adam
Adam

Reputation: 18807

You can read more about ARIA authorized roles in the ARIA in HTML reference doc

There is no "container" role. You're perfectly right.

Why? Because you don't have to give a role for elements used purely for decoration purpose like in your case a wrapper div for non interactive elements.

See for instance the grid definition:

A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table.

This is not the case here.

Upvotes: 3

Josh
Josh

Reputation: 4322

ARIA landmark roles (via the region value), are similar to what you're describing in that they do allow you to create and name your own containers that assistive technology can then identify and navigate directly to.

  <div role="region" aria-labelledby="region1"> 
    <h2 id="region1">Title for Region Area 1</h2> 
      ... some content ...
  </div>

The caveat here is that you should only create named regions where they're actually useful for users of assistive technology. Don't go around creating landmarks for every little thing, because they'll be annoying.

It's also worth noting that the title of the region should be useful and make sense without additional context. A good example would be "Search". A bad example would be "Region 1".

The image below shows what a screen reader (NVDA) user would see when navigating by roles. All of the roles used are default values, with the exception of search. NVDA Elements List Window

Upvotes: 2

Related Questions