A quick question re: HTML5 nav, specifically that of sub navigation (from a semantic point of view).
I have <nav> in the header for the main menu. Down the left of a standard page I have second level nav and down the right third level nav (no, I didn’t design the site). Is there anything I can do HTML5/ARIA wise to differentiate between the 3 menus? Or are they all simple <nav> blocks?
I dont even think I need <aside> in either left or right column as there isnt any additional info apart from these actual menus.
Any thoughts/advice would be much appreciated.
This may be an old question, but there is a better answer now:
You can label each navigation section implicitly using headings, and explicitly use WAI-ARIA attributes:
<nav role="navigation" aria-labelledby="firstLabel">
<h2 span id="firstLabel" class="hidden">Main menu</h2>
<ul/>
</nav>
...
<nav role="navigation" aria-labelledby="secondLabel">
<h2 span id="secondLabel" class="hidden">Local pages</h2>
<ul/>
</nav>
For user-agents like screenreaders, they can report that as "Local pages, navigation" (although they vary in how it's reported).
Read more on a W3C wiki page on using labelledby.
I would differentiate between the navigation sections by giving them semantically relevant ids and by placing them in order of importance in the HTML code, along the following lines:
<body>
<nav id="main-navigation">
<!-- The main menu goes here -->
</nav>
<nav id="sub-navigation">
<!-- The left hand menu goes here -->
</nav>
<nav id="leaf-navigation">
<!-- The right hand third level menu goes here -->
</nav>
<section id="content">
<!-- Actual page content -->
</section>
</body>
Other than that, I see no real need for further differentiation between the sections. The above approach is easy to understand, should be reasonably easy to style and is semantically clear, which is certainly good enough for me.
Related
I have a simple question. Should the button, that I use to open/close my navigation menu be included in the nav tags?
The button itself is not helping in navigating but without him, there is no access to navigation.
<nav>
<ul class="nav">
<li class="nav__el nav__el-active">Home</li>
<li class="nav__el">Generic</li>
<li class="nav__el">Services</li>
<li class="nav__el">Blog</li>
<li class="nav__el">Contact</li>
</ul>
<i class="fas fa-bars"></i> //menu btn
</nav>
that's the example. Now the btn is in the nav, but it also can be like that:
<div class="topbar">
<nav>
<ul class="nav">
<li class="nav__el nav__el-active">Home</li>
<li class="nav__el">Generic</li>
<li class="nav__el">Services</li>
<li class="nav__el">Blog</li>
<li class="nav__el">Contact</li>
</ul>
</nav>
<i class="fas fa-bars"></i> //menu btn
</div>
At first glance, when reading this at WHATWG:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
It seems to me that the button should not be included, as that's clearly not a navigation link.
Anyway, if you continue reading:
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
With that in mind, it makes sense to include that button and any other non-link control you might have (usually in the header area) because if a screen reader user wants to...:
...skip the whole navigation, they also want to skip the other controls that are not links.
...jump straight to the navigation, they might also want to use some navigation elements that are not links.
If you check some of the examples at WHATWG, it looks like they are applying these criteria. The first example is:
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>...</nav>
<article>...</article>
...
</body>
Here, it makes sense not to skip the title on the page (to know where you are) but then skip all the navigation elements and jump straight to the content.
However, on the last one:
<nav>
<h1>Folders</h1>
<ul>
<li><a ...>... </a></li>
...
</ul>
</nav>
It would make sense to skip the Folders heading element if you are not interested in the navigation because it's actually part of it, the same way you put the heading of a section inside a section and not before it. The same applies to your menu button.
Some other examples of elements that might be part of the main navigation of the site, and thus go into <nav> are logos that link to the root of the site or search forms.
For example, LinkedIn is doing that:
Also, Bruce Lawson, who is part of the Accessibility Task Force, has the search inside the <nav> element on his personal website:
However, you can also find examples of the opposite. For example, AirBnB only includes some links in the <nav> element:
While in this case, I would have also included the search, that for me clearly represents the main way to navigate on their site.
Anyway, you could and should also use ARIA for accessibility and structured data / Schema.org markup for search engine support.
I'm still pretty new to html5 and I'm curious about the semantics of whether or not I should put social links (facebook, twitter, etc.) in either a <nav>, <menu>, or <div> element.
I am trying to learn the best practices along with the language so I dont develop bad habits early on. I think I understand that <nav> is meant to be used for main site related links only. However I thought I'd try to get some clarity before assuming.
Currently there doesn't seem to be any standard for what to put social links or social share buttons in, so it's really up to you, but it is possible to rule some options out.
NAV element definition:
"The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links."
Based on this definition you could potential rule out the NAV tag, because the social links are not linking to other sections of the page or website and they are not considered "major navigation blocks" on a page.
MENU element definition: "The menu element represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked."
Based on this definition you could also rule out the MENU tag, because it is semantically meant for app functionality, or rather javascript events, to control the page/app. It isn't meant to be used for links.
So this leaves you with the DIV tag, but I would also argue that the UL tag could work just as well, if not better. Placing your social media links in the list would give slightly more context to a screen reader, because they would know they are entering a list of items. When a screen reader reaches a DIV tag they can't determine any information about it, unless you supply an aria-label attribute to the markup.
TL;DR; My recommendation would be to use a UL element to hold your social links/buttons.
If the social links are contextual to the website/author, they're essentially contact information; so you can use <address> for them.
Address--MDN
Address--Standards
There is not a specifically element to place the social media anchors, I would say the most common and better one is to place it inside a div element, but it's a really open question with a lot of possible answers.
After searching, I found that it is better to use the tag. It may be wrapped in tag also. Check the following link https://codepen.io/aardrian/pen/BgQqrQ?editors=1000 to see some semantic page layout.
<aside>
<section class="share">
<h2>Share</h2>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Email</li>
</ul>
</section>
<!-- Not sure <section> adds value here -->
<!-- Leaving as it does not add SR noise -->
<section class="recommended">
<h2>Recommended</h2>
<ul>
<li>
<!-- Removed unnecessary <article> -->
<!-- The content is in a list item, -->
<!-- in a list, under a heading, in a region -->
<!-- This is overkill -->
<!-- Removed unnecessary <h3> -->
<!-- See preceding reasons -->
<!-- Left in a <p> so no need to rely on CSS -->
<!-- that would still cause SRs to run it together -->
<p>Related article</p>
<p>Article description</p>
</li>
<li>
<!-- Removed unnecessary <article> -->
<!-- The content is in a list item, -->
<!-- in a list, under a heading, in a region -->
<!-- This is overkill -->
<!-- Removed unnecessary <h3> -->
<!-- See preceding reasons -->
<!-- Left in a <p> so no need to rely on CSS -->
<!-- that would still cause SRs to run it together -->
<p>Related article</p>
<p>Article description</p>
</li>
</ul>
</section>
</aside>
This is the markup I have written for the header of web commerce site. I am not sure if it is semantically correct - especially the utility bar. Should I add the role-navigation to the container div of the links to the account, wishlist pages or should that also be within a nav element or an aside?
Also please let me know what I can do to make THIS design (can't change the order of the design - client wants it like this) more accessible and friendly towards assistive technologies.
<header>
<div role="navigation" aria-labelledby="utility-nav" class="utility-nav">
<h2 class="visuallyhidden" id="utility-nav">Account and store pages</h2>
<div class="align-right">
my account
find a store
credit center
track order
wishlist
</div>
</div> <!-- utility bar -->
<div id="logo-search">
<!-- logo -->
<!-- search -->
<!-- mini cart/shopping bag -->
</div> <!-- logo, search, shopping bag container -->
<nav id="top-nav">
Women
Men
Juniors
Baby
<!-- etc -->
</nav> <!-- top nav -->
</header> <!-- header -->
Instead of <div role="navigation"> just use <nav>. It is ok to have more than one <nav> element on the page, even in a <header>. While <nav> is generally reserved for major blocks of navigation (meaning realistically you would max out at two or three on a page), I think both of these qualify in your example.
Consider putting your links within a list as that announces the number of items to a screen reader user.
Also, I suspect your visuallyhidden class is there to hide the <h2> from all users except screen readers. Pairing that with aria-labelledby results in it being announced twice. Having the <h2>can also create unnecessary stops in heading navigation within a screen reader. Consider dumping the <h2> altogether and using aria-label instead. This way you don't need to visually hide it and you can still provide context to your screen reader users.
At that point, you might want to also do that to the primary navigation (or not, depending on user testing and how verbose it makes the page).
So, to tweak your example a bit:
<header>
<nav aria-label="Account and store pages" class="utility-nav">
<ul class="align-right">
<li>my account</li>
<li>find a store</li>
<li>credit center</li>
<li>track order</li>
<li>wishlist</li>
</ul>
</nav> <!-- utility bar -->
[…]
<nav aria-label="Primary navigation" id="top-nav">
<ul>
<li>Women</li>
<li>Men</li>
<li>Juniors</li>
<li>Baby</li>
<!-- etc -->
</ul>
</nav>
</header>
If you can, consider downloading the free screen reader NVDA (and donating if your employer has the cash) and running it through the page you build.
My question is specifically about semantic HTML5.
In a case where the primary navigation is not part of the header by design, but is still site-wide, should it then be nested within the <main> tag?
The W3C specification states about the <main> tag:
"The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application."
To me, this would indicate that I should place the <nav> outside <main> like so:
<body>
<header>
[...]
</header>
<nav>
[...]
</nav>
<main>
[...]
</main>
<footer>
[...]
</footer>
</body>
I also get the notion that the <main> tag can be used on level with <header> and <footer> and effectively include everything between those two tags:
<body>
<header>
[...]
</header>
<main>
<nav>
[...]
</nav>
[...]
</main>
<footer>
[...]
</footer>
</body>
Which one is more semantically correct? Does it matter?
All of the most reliable sources on the <main> tag conveniently avoid the issue in their examples by either nesting the primary navigation in the header or making the navigation directly related to the content.
I guess this might bring up how much design should dictate semantic markup?
I'm also interested in whether a sidebar <aside> that is repeated across a website, and is not directly related to the topic of the page, should be nested in the <main> tag, but I image that would be covered by answers to my main question.
The basic idea of the <main> element is that the content within it is considered unique to the document (which lends itself to the entire concept of individual documents within a site).
Since site-wide navigation is supposed to exist across the whole site, it should exist outside of the <main> element.
Likewise for any content that pertains to the site as a whole, rather than being document-specific, such as sidebars.
To be clear, as Kunaal Topraniu mentions, you can place a <nav> within a <main> provided that it consists of navigation that is specific to the <main> content, such as a table of contents. Site-wide navigation, of course, is not content-specific, and therefore does not belong in a <main> element.
I'm sure you've long solved this issue by now, but I thought I'd clarify anyway.
As the <main> element is supposed to be used for the main, unique content of your site, your <nav> should not be inside it if it is navigation for your entire site. You CAN, however, put a <nav> inside your <main> if, for example, you have page content or content-related navigation, e.g. anchors for sections of your content.
However, if you are using <nav> for your main, site-wide navigation, and it doesn't belong in your header--for example, if you're using sidebar navigation--I would do something like this:
<header>
<!-- header stuff -->
</header>
<div id="mainPanel"> <!--(or whatever)-->
<nav>
<!--your nav-->
</nav>
<main>
<!--main content-->
</main>
</div>
And that would be perfectly semantically correct. Since what (I think) you want to do is to position your navigation somewhere, and not really change what you mean by navigation and main content, a div is actually the correct usage, since divs don't carry semantics.
Edit: I should add that I conditionally disagree with some of the responses that prescriptively claim that nav should be in header. As header is not considered sectioning content per W3C, this is not only often unnecessary but would be flatly incorrect in some website models.
The issue with standards is that many people are still doing it wrong and don't really respect the standards. Even at school they are still telling us that nav needs to be in the header. What is really a shame is that this new generation still applies their work incorrectly. This is how I'm doing it so far.
<html>
<head></head>
<body>
<!-- HEADER -->
<header>
<div class="banner" role="banner"></div>
</header>
<!-- NAV -->
<nav>
<div class="brand"></div>
<div class="menu" role="menu"></div>
</nav>
<!-- CONTENT -->
<main>
<section class="container"></section>
<section class="container"></section>
<section class="container"></section>
</main>
<!-- FOOTER -->
<footer>
<div class="copyright"></div>
</footer>
</body>
</html>
I have put nav inside header and it works fine
<body>
<header>
<nav>
[...]
</nav>
[...]
</header>
<main>
[...]
</main>
<footer>
[...]
</footer>
</body>
<nav> should be declared in this format:\
<header>
<nav>....</nav>
</header>
<main>
<nav>....</nav>
</main>
<footer>....</footer>
Can we use multiple tags on the same page in html5?
I've read this article on Zeldman.com but it's not entirely clear to me
i.e.
<header><nav>links here</nav></header>
<footer><nav>links here</nav></footer>
Yes, absolutely. You can have multiple header, nav, and footer tags sans penalty.
As long as you're making sure you are using tags semantically and you aren't putting them in invalid places (they're block-level elements, so you can't put them inside an inline element, for example) then you shouldn't worry too much about what the sticklers are saying. It's all to easy to get caught up arguing about tiny details instead of moving forward on your project.
Yes, having multiple <nav> elements is absolutely ok.
You just have to make sure you're making them distinguishable for people using screen readers. You can do it by labelling each <nav> using aria-label.
<nav aria-label=’primary’>
<ul>
...List on links here...
</ul>
</nav>
<nav aria-label=’secondary’>
<ul>
...List on links here...
</ul>
</nav>
Or, if one of the <nav> as visible text on screen that can be identified as labelling element, you can use aria-labelledby like follows:
<nav aria-label="Site Menu">
<ul>
...List on links here...
</ul>
</nav>
<article>
<h1>Title</h1>
...
<nav aria-labelledby="id-1">
<h2 id="id-1">
Related Content
</h2>
<ul>
...List on links here...
</ul>
</nav>
</article>
You can read more about using Multiple Navigation Landmarks.
The answer is yes. You can have a <nav> tag in the footer, for more info check mdn <nav> documentation.