CODEWITHSUNDEEP
accessibilitywai-aria
Varvara Stepanova
Varvara Stepanova

Reputation: 3569

Which value of the role attribute suits better to be included into role="main" and readable?

Is this possible an correct to have more than one element on a page marked with role="main" attribute?

There is a page with search results divided into portions. Portions are similar to pages, but a new portion appears on a page when more data came with AJAX.

I would like users of JAWS (and so on) understand the structure of the document and provide them with information that there is a search result page in front of them and it is divided into portions.

This markup is pronounced by JAWS exactly as I wish:

<div class="main" role="main" aria-label="Search results">

    <div class="main__portion" role="main" aria-label="Page 1">
        <a href="#">Link 1</a><br/>
        <a href="#">Link 2</a>
    </div>

    <div class="main__portion" role="main" aria-label="Page 2">
        <a href="#">Link 1</a><br/>
        <a href="#">Link 2</a>
    </div>

</div>

But is looks overheaddy to mark every single portion with role="main". Which role suits better? And the requirement is that JAWS has to read "Search results page 1" when focusing on the first link.

Upvotes: 0

Views: 81

Answers (2)

stringy
stringy

Reputation: 1353

Marking each div as main will validate, but it doesn't provide useful information to a non-sighted user. Main is used to mark the primary content as distinct from secondary content, so using it on your outer div as you already have is appropriate. Putting it on all the inner divs as well just becomes noise and one more thing to listen to before they get to the actual content.

Screen reader users will find it more useful to know how many results there are in total and which one they're up to. This can be done using list markup, or giving a total at the top of the page then numbering each result as part of its title/heading/link text. As a general rule, any information which is obvious to a sighted user should also be present in the content or the markup, with ARIA only providing a fallback or additional support if necessary.

Upvotes: 2

unor
unor

Reputation: 96517

WAI-ARIA main role:

Within any document or application, the author SHOULD mark no more than one element with the main role.

But it’s a SHOULD, not a MUST.

(Note that HTML5’s main element may only be used one time in a document.)

Upvotes: 0

Related Questions