Question

I'm completely new to ARIA, so please be gentle if this is a stupid question. Is it proper to give a container div the role of "main" if it contains a sidebar? If I have a nav element floated inside my container div, will adding an ARIA role of "main" to the container div confuse screen readers or is this ok?

enter image description here

Here is an example of the HTML to explain further.

<div id="container" role ="main">
    <h1>Content Here</h1>
    <nav id="sidebar">
        <ul>
            <li><a href="foo.com">Foo Item 1</a></li>
            <li><a href="foo.com">Foo Item 2</a></li>
            <li><a href="foo.com">Foo Item 3</a></li>
        </ul>
    </nav>
    <p>More content</p>
</div>
Was it helpful?

Solution

I provided a link to a question that was just asked, my answer covers most of it.

Since you are using HTML5, you automatically use HTML 5.1, which has the <main> tag. Which can replace <div role="main"> due to the fact that some HTML5 tags have certain WAI-ARIA attributes by default.

Proper HTML tagging of

<div id="container" role ="main">
    <h1>Content Here</h1>
    <nav id="sidebar">
        <ul>
            <li><a href="foo.com">Foo Item 1</a></li>
            <li><a href="foo.com">Foo Item 2</a></li>
            <li><a href="foo.com">Foo Item 3</a></li>
        </ul>
    </nav>
    <p>More content</p>
</div>

would be

<main>
 <nav role="navigation"> 
  <ul>
   <li><a href="foo.com">Foo Item 1</a></li
   <li><a href="foo.com">Foo Item 2</a></li>
   <li><a href="foo.com">Foo Item 3</a></li>
  </ul>
 </nav>
 <section>
  <h1>Content</h1>
  <p>....</p>
 </section>
</main>

Or pop the navigation outside, wrap it in a <div role=complementary>. Take a look at this WAI-ARIA landmark example

Chris said

Navigation skip links(the alternative) are usually clunky, and either wreck the visual of the page, or create weird keyboard navigation with links that are hidden unless they have focus. If your sidebar is short, and/or contributes to the content of the page, sy by providing an outline of other in page content, I would suggest that it is acceptable.

Skip links and navigation "menus" are two different things. Yes if you have only a short navigation or things that get focus (links, form controls, stuff with tabindex='1') before getting to the main content, you could probably get away with no skip links. While WAI-ARIA is supported by a good portion of assistive technology, it is not exposed to every user. So people getting to your main content with a screen reader can use either the Landmark navigation or another method to get there, people who don't use the mouse (physical disabilities) still have to press Tab numerous times. Skip links should either be visible always or become visible as they gain focus.

Reply to OP's comment

Technically at this point we are talking semantics, and that convo could go no where. The true difference is small, and won't break anything unless you are super hardcore about stuff. Having element 4 (which should be an <aside>) inside the <main> means this content is specifically for the main topic of the page. Outside, means the element is for the site as a whole.

Could somebody mis-interpret it? Maybe, but if you are using good language, this shouldn't be a big issue.

If I put it outside, could people miss it copletely? Sure, but this is possible in any design though. You could pop on a WAI-ARIA role navigation/complementary to catch people browsing that way. Using headings is another.

OTHER TIPS

It depends on how "inconvenient" your nav bar is, and what the contents of your navigation bar are. The intent behind the "main" role is to circumvent the need for navigation skip links by providing ATs a landmark for the start of the "content" of a given page. Navigation skip links(the alternative) are usually clunky, and either wreck the visual of the page, or create weird keyboard navigation with links that are hidden unless they have focus. If your sidebar is short, and/or contributes to the content of the page, sy by providing an outline of other in page content, I would suggest that it is acceptable. However, if there are a lot of links in the sidebar, and they aren't links you would deem as being part of the "content" of the page, you should place the main role closer to the content segment of the page. In general, consider accessibility an extension of usability, and use your best judgment as to where the most appropriate place for your "main" role to be. As long as you are using a given role for the correct purpose, there is no factually correct answer to your question. There are definitely inappropriate uses of Aria roles, but both of the uses you have outlined are perfectly acceptable for "main".

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