A few small habits separate a merely-functional <nav> from one that's genuinely accessible and SEO-friendly.
Use a Real List for Multiple Links
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/cources">Courses</a></li>
<li><a href="/notes">Notes</a></li>
</ul>
</nav>A <ul> of links lets screen readers announce "list of 3 items," giving users a sense of scope before diving in — a flat row of bare <a> tags doesn't communicate that.
Label Multiple nav Elements
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer navigation">...</nav>Without distinct labels, a screen reader user hears "navigation" three separate times with no way to tell them apart.
Mark the Current Page
<nav aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/cources">Courses</a></li>
</ul>
</nav>aria-current="page" tells assistive technology which link represents the page the user is currently on — CSS can also hook into this attribute for a visual "active" state, avoiding a separate class doing the same job.
Keyboard Support Comes Free — Don't Break It
Real <a href="..."> links are keyboard-focusable and activatable with Enter by default. Avoid rebuilding navigation with non-semantic elements like <div onclick="...">, which strips out this built-in behavior and requires you to re-implement keyboard support manually. See Keyboard Accessibility.
Common Mistakes
- Building navigation out of clickable
<div>or<span>elements instead of real<a>tags - Skipping
aria-labelwhen a page has more than one<nav> - Bare links with no wrapping list, losing the "N items" context for screen reader users
Interview Relevance
A practical checklist question: "What would you check to make sure a navigation menu is accessible?" — the points above are exactly what a good answer covers.
Practice Question
Audit a navigation menu built from <div> elements with click handlers, and rewrite it as accessible, semantic markup.
