Images, navigation & accessible names
Give content a clear meaning
Lesson 10 of 20 · 9 min · Module 4: A complete little website
A page should remain understandable when someone cannot see an image or uses a different way to navigate.
Start this lesson →Free. No installation: you write and run the code in your browser, and it is checked automatically.
By the end, you’ll be able to…
- Write informative image alternatives
- Name a navigation region
- Connect a fragment link to a destination
The idea
Use alt to describe informative images. Use nav for a navigation region and meaningful link text for destinations. Decorative images normally use empty alt text.
<nav aria-label="Main"><a href="#work">My work</a></nav>
<img src="scene.svg" alt="A green hill under a blue sky">01Describe purpose, not every pixel
Good alternative text communicates what the image contributes to the page. Decorative flourishes do not need a description; informative content does. This scene is the content of the exercise, so it has a description.
02Use native semantics first
A real link with href supports keyboard navigation and browser behavior. A nav element identifies its purpose without inventing a custom clickable control.
Your turn
nav with aria-label="Main" and a link saying My work to #work. Give the supplied image the alt text Green hills under a blue sky, and add a section with id="work".What the checks look for
- Navigation has a name
- Link describes its destination
- Image has informative alternative text
- Work destination exists
Take this with you
Meaningful HTML helps people use content through different senses and input methods.