Description
Version
5.0.0-beta.7
Environment info
System:
OS: Windows 10 10.0.19042
Binaries:
Node: 17.0.1 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Steps to reproduce
Select the router option
What is expected?
Semantic HTML5 nav tag
What is actually happening?
<div id="nav">
For the navigation currently, you are using a none semantic tag div which is a bad practice, not to mention it will also cause some accessibility issues.
HTML5 defines a <nav> menu, which is to be used to contain the primary navigation of a website.
According to the WCAG 2.0 gridlines:
"If you have to use more generic elements such as a div, add role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies"
Using nav and lists to create menus is great for several reasons:
-
It is easy to differentiate the primary navigation lists/links from other lists and links on the page because they are the ones inside the
<nav>. Not only will this make finding it easier for screen reader users, as mentioned above, but it makes targeting it with CSS and JavaScript easier too. -
Lists can be nested, which means you can easily create several levels of navigation hierarchy.
-
Even without any styling applied to the list, the browser rendering of the HTML makes sense and it is easy to grasp for a visitor that these links belong together and make up one logical unit.