Throughout the previous modules we kept deferring the detail of text alternatives "until Module 5". The moment to settle that debt has arrived. Criterion 1.1.1 (Non-text Content) is level A and is, probably, the most violated on the entire web: it requires that every image have an appropriate text alternative... and "appropriate" does not always mean "describe what you see". The same image file may need a long alt, an empty alt, or a description of an action, depending on its function on the page. In this lesson we build a decision tree that we will apply to the real images of Cursalia: the course thumbnail, the logo, the category icons, and the student's progress chart. With it, we close Module 5.

1. Why the correct alt depends on the function, not the image
2. The alt decision tree
3. Decorative, informative, functional, text, and complex images
4. How to write a good alt
5. figure and figcaption
6. SVG, icons, and CSS background images
7. Applying it to Cursalia
8. Common mistakes, exercises, and conclusion

Marta, using NVDA, does not see the image: she hears what you put in the alt. And here is the idea that changes everything: the same photo may require completely different alternatives depending on what it is there for. A photo of a padlock can be:

• pure decoration next to a headline → alt="" (so the AT ignores it),
• the illustration of an article about security → alt="Closed padlock on a keyboard" (it informs),
• the icon of a "lock account" button → alt="Lock account" (it describes the action).

That is why there is no "correct" alt in the abstract: first you decide what function the image serves and the alternative follows from that.

Walk this tree for each image. The first question —"does it convey anything or is it just ornament?"— is the most important and the one most people skip.

It conveys no information: separators, ornamental backgrounds, a generic filler photo next to text that already says it all. It must be ignored by assistive technology, and for that the alt must be empty but present:

The difference between alt="" and omitting alt is enormous: alt="" explicitly says "there is nothing to announce"; omitting the attribute makes many readers read out the file URL. An equivalent alternative: role="presentation" (or role="none"), though alt="" is the simplest and most robust.

It conveys information that the surrounding text does not provide. The alt must communicate that information, concisely:

Ask yourself: "if I removed the image and replaced it with this text, would the reader get the same thing?". If the answer is yes, your alt is good.

The image is inside a link or a button and represents its action. Here the alt does not describe the image, it describes what it does:

If a <button> contains only an SVG icon, hide the SVG with aria-hidden="true" and put the name on the button itself with aria-label (as we saw in the player in 05-03).

An image whose content is text (a "Buy" button rendered as an image, a headline in a JPG). It should be avoided: it does not scale, cannot be selected, gets worse with Sofía's zoom, and violates criterion 1.4.5 (Images of Text). Use real text with CSS. If it is unavoidable (a logo with a tagline), the alt must contain the exact text:

Charts, diagrams, maps, infographics: they contain too much information for a short alt. The technique is twofold: a short alt that gives the headline, and an adjacent long description (or one linked with aria-describedby):

The short alt ("Student progress by module") lets Marta decide whether she wants the detail; the long description, referenced with aria-describedby, gives her the full data. That description also benefits everyone: it is real, indexable, and selectable text.

Practical rules:

• Concise. One sentence usually suffices. Readers do not let you pause partway through an endless alt.
• No "image of" / "photo of". The AT already announces that it is an image; adding "image of..." is redundant and annoying. Write the content directly.
• Contextual. The same picture takes a different alt in an article than in a button. Think about the function.
• No keyword stuffing. The alt is not for forced SEO; filling it with keywords harms Marta and gets penalized just the same.
• Punctuate. A final period makes the reader pause naturally.

When an image has a caption visible to everyone, use <figure> with <figcaption>. Careful: the figcaption does not replace the alt; they serve different purposes. The alt describes the image for those who cannot see it; the figcaption is a caption for everyone.

Sometimes the figcaption already describes everything and the alt can be short or empty to avoid duplication; but by default fill both with complementary content.

Inline SVG. An <svg> has no alt attribute. To make it accessible as an image, give it role="img" and a name with <title> or aria-label; if it is decorative, aria-hidden="true":

The focusable="false" prevents some browsers (old Edge/IE) from focusing the SVG and creating phantom tab stops.

Icons. Two techniques:

• Icon fonts (an <i> with an icon-font character): always aria-hidden="true", because the character can be read as a strange symbol. The meaning goes in separate text.
• SVG is preferable: it scales crisply and is easier to control. Same principle: if the icon accompanies text, aria-hidden; if the icon is the only information (an icon-only button), give it a name with aria-label on the control.

CSS background images (background-image). They are not accessible: they are not in the accessibility tree and do not accept alt. That is why they are fine for pure decoration, but they must never carry information. If a background-image conveys something (a status icon, a chart), it is a mistake: move it to an <img> with alt or add a visible/hidden text alternative.

Let's walk through the platform's real images with the decision tree:

The thumbnail case is the most instructive: on a catalog card, the course title is almost always already present as text, so giving it an alt with the same title makes Marta hear it twice. The thumbnail becomes decorative (alt="") precisely because its information is already covered by the text. Once again: function rules over visual content.

• Omitting the alt instead of alt="". Without an alt, many readers read out the file URL. For decorative images, use an explicit alt="".
• Writing "image of..." / "photo of...". Redundant: the AT already announces that it is an image.
• Describing the image on a functional element. On a logo-link, alt="logo" does not say where it leads. Describe the action.
• Cramming a complex chart into a 300-character alt. No one can hear that in one go. Use a short alt + a long description.
• Information in a background-image. It does not reach the AT. CSS backgrounds are for decoration only.
• Duplicating the course title on the thumbnail. Marta hears it twice. If the text is already there, alt="".
• Tip: for any image, ask yourself two questions in order: (1) does it convey information or a function, or is it decoration? and (2) is it interactive?. With those two answers, the decision tree gives you the correct alt.

Exercise 1. For each Cursalia image, indicate the type and the appropriate alt (or technique): (a) an ornamental divider line between sections; (b) the logo inside the home link; (c) the bar chart of the student's progress.

Exercise 2. This code for a catalog card has an accessibility problem. Spot it and fix it.

Exercise 3. You have a button that contains only an SVG of a trash can, used to delete an item. Write the accessible HTML.

Solution 1. (a) Decorative → <img src="line.svg" alt=""> (or a CSS background, since it is pure decoration). (b) Functional → <a href="/"><img src="logo.svg" alt="Cursalia, go to home"></a>; the alt describes the action, not "logo". (c) Complex → short alt="Progress by module" + an adjacent long description with each module's percentages, linked with aria-describedby.

Solution 2. The problem is duplication: the thumbnail's alt repeats the title that is already in the <h3>. Marta would hear "Web Accessibility" twice. Since the information is already in text, the thumbnail is decorative:

Solution 3. The icon-only button needs a name on the control and the SVG hidden from the AT:

The aria-label="Delete" provides the accessible name (it describes the action); aria-hidden="true" prevents the SVG from being announced; focusable="false" avoids phantom tab stops.

With this lesson we close Module 5. You no longer look at an image and wonder "what do I put in the alt?": you walk the decision tree —decorative, informative, functional, text, or complex— and the image's function dictates the answer. And with that we also close the build phase of the course: in modules 1 to 5 we have learned what accessibility is, why it matters, what WCAG requires, and how to implement it —semantic structure, forms, ARIA, contrast, JavaScript widgets, keyboard, multimedia, and images—. We know how to build accessibly.

Now the decisive question remains: does what we have built actually work? An aria-expanded may be out of sync, a focus trap may have a leak, an alt may sound terrible with NVDA. All of that has to be verified. In Module 6 we will learn to check accessibility systematically: manual testing (keyboard and screen reader), automated tools (axe, Lighthouse) and their limits, testing with real users and assistive technologies, and interpreting audit reports. We move from building to proving that Cursalia is truly accessible.