Navigation and Images

What this is. When a group of links forms the navigation for your site, wrap them in a nav element. That tells assistive technology this is the navigation, so it can be skipped or jumped to directly.

If a page has more than one nav, give each an aria-label so they can be told apart.

LIVE PREVIEW
loading editor…

Your turn → Remove the aria-label. Nothing changes visually. On a page with two navigation areas, a screen reader would now announce both simply as navigation, with no way to tell which is which.

Images carry meaning or they do not. That single question decides how you write the alt attribute.

If the image conveys information, alt must describe that information.

If the image is purely decorative, use alt="" so assistive technology skips it entirely.

Omitting alt altogether is the one option that is always wrong, because the screen reader falls back to reading the filename.

LIVE PREVIEW
loading editor…

Your turn → Write alt text for the chart without looking at the current one. If your version does not carry the numbers, someone who cannot see the chart has lost the point of it.

◈ Graded Build

Build the primary navigation for your portfolio. It needs a nav element labeled Primary, containing exactly five links to index, about, projects, writing and contact. Then add one informative image with descriptive alt text.

Checked against the page you actually render, not against how you wrote it. 3 visible and 3 hidden checks.

loading editor…

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Practice Test →
← Back