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.