Rullst AcademyRullst Academy/Lesson
Semantic HTML and accessibility · Lesson 05 / 10

An image, a purpose

Important image information must also reach people who cannot see it.

Learning paths14 min

Let's discover together

  1. 1

    Img is a void element: it has attributes but no </img> closing tag. Src points to a file; alt provides a text alternative. The kit image is named route.svg and belongs beside index.html.

  2. 2

    The kit’s informative image shows three stages: idea → test → revision. Useful alt text communicates that process. “Beautiful image” does not replace the information. Context determines how much to explain; complex details may need a nearby explanation.

  3. 3

    If an image is purely decorative, alt="" identifies it as unnecessary to the reading experience. Omitting alt is different: the file may be announced without context. If an image alone is a link, describe its destination or function.

  4. 4

    Figure and figcaption associate an image with a caption, but a caption does not automatically remove the need for alt. The preview accepts only the kit’s route.svg; other images appear as text placeholders. Test your own files locally and review their purpose.

HTML workshop: write, observe, review

Edit HTML in “My files and GitHub” and update the preview. It uses study elements and reading styles: scripts, custom CSS and external navigation are disabled. Only the kit’s route.svg is shown as an image.

Go to my HTML

These simple checks are neither complete HTML validation nor a WCAG audit. Review content, keyboard, zoom and assistive technologies; record what you have not tested.

Official links and next step

✦
YOUR MISSION

Choose text alternatives according to an image’s function.

Now it's your turn

Discovery workshop

Read, predict, try

A diagram conveys idea → test → revision. A nearby ornament adds no information.
Build your answers and check when you are ready.
A moment to understand

Does detecting alt prove that it is good?

I need a hint

Compare the intent with the meaning of the elements; appearance alone does not demonstrate accessibility.

Loading your journey…

Take it with you

Change an image’s purpose from explanation to decoration. Explain how alt changes and record what information remains in text.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.