{"id":"l-a11y-2-4","courseId":"web-accessibility","lang":"en","kind":"lesson","summary":"Decide what alt text each image needs from its purpose in context, and mark up data tables so screen readers announce the right headers for every cell.","html":"

Every image on Ticketly makes a promise: “this tells you something” or “this is decoration”. Alt text is how you keep that promise for people who can’t see the image. The hard part isn’t the syntax, alt="…" is easy. It is the decision about what, if anything, to say.

\n

Alt text describes purpose, not pixels

\n

Start from one question: what would you lose if this image were removed? That is what the alt text should give back.

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Image on TicketlyPurposeAlt
Photo of the Nour Quartet on their artist cardInformativealt="Nour Quartet performing on a lit harbour stage"
Logo inside a link to the home pageFunctionalalt="Ticketly home"
Magnifying-glass icon as the only content of the search buttonFunctionalalt="Search"
Wavy line separating sectionsDecorativealt=""
Crowd photo behind a headline that already says it allDecorative in contextalt=""
“Sold out” badge drawn as an imageText in an imagealt="Sold out"
Seat mapComplexShort alt plus a full alternative nearby

Context changes the answer. The same crowd photo is decorative behind a headline, but informative on a page called “What the venue is like”, where it needs a description.

\n
ticketly/lineup.html
<article class=\"artist\">\n  <img src=\"nour-quartet.jpg\" alt=\"Nour Quartet performing on a lit harbour stage\">\n  <h3>Nour Quartet</h3>\n  <p>Jazz and Arabic maqam from Alexandria.</p>\n</article>
\n

A few habits make alt text better:

\n\n\n

Decorative images and icons

\n

For decorative images, use an empty alt: alt="", with nothing between the quotes. A missing attribute is different: many screen readers then announce the file name, such as “hero underscore final underscore v3 dot jpg”. Images added with CSS background-image are invisible to assistive technology, which is fine for decoration but wrong for anything that carries meaning.

\n

Inline SVG icons follow the same logic with different attributes. Decorative icons get aria-hidden="true", as you did in How Assistive Technology Reads Your Page. An SVG that carries meaning on its own gets role="img" and a name:

\n
HTML
<svg role=\"img\" aria-label=\"Wheelchair accessible venue\" viewBox=\"0 0 24 24\">…</svg>
\n

Complex images

\n

Charts, maps and diagrams hold more information than a sentence can carry. Give them a short alt that states the takeaway, and put the full information in the page: a data table under a chart, a list of sections and availability next to a seat map, or a <details> element holding a longer description. Ticketly’s seat map gets a list of blocks (“Block A, front left, 12 seats left”) that is useful to everyone comparing options, not only to screen reader users.

\n\n

Data tables

\n

Ticketly’s pricing grid was built from divs styled with CSS grid. Sighted users read it at a glance; a screen reader reads “Pass, Early bird, Standard, Weekend, SAR 280, SAR 320” as a flat list with no way to know which price belongs to which pass. A real table fixes it:

\n
ticketly/pricing.html
<table>\n  <caption>Harbour Lights ticket prices</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">Pass</th>\n      <th scope=\"col\">Early bird</th>\n      <th scope=\"col\">Standard</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr><th scope=\"row\">Friday</th><td>SAR 150</td><td>SAR 180</td></tr>\n    <tr><th scope=\"row\">Weekend</th><td>SAR 280</td><td>SAR 320</td></tr>\n  </tbody>\n</table>
\n
\n A three by three price table. The highlighted cell SAR 320 is linked to its row header Weekend and its column header Standard; the screen reader announces Weekend, Standard, SAR 320.\n \n Pass\n \n Early bird\n \n Standard\n \n Friday\n \n SAR 150\n \n SAR 180\n \n Weekend\n \n SAR 280\n \n SAR 320\n \n \"Weekend,\n Standard, SAR 320\"\n \n \n th scope=\"row\" and th scope=\"col\" supply the context\n
How a screen reader announces a table cell
\n

The <caption> names the table when the user enters it. scope="col" and scope="row" tell the browser which cells each header covers. Screen readers then offer table navigation (Ctrl+Alt+arrow keys in NVDA, VO+arrow keys in VoiceOver) and announce the relevant headers as the user moves. Keep tables simple: if you need merged headers several levels deep, splitting into two tables is usually clearer for everyone.

\n

Use tables for data, never for layout. And be careful with responsive tricks: setting display: block or display: grid on table elements can strip their table semantics in some browsers, so test with a screen reader if you restyle them.

\n

That completes Ticketly’s semantic foundation. Section 3 moves from what the page is to how people move through it, starting with the keyboard.

\n","toc":[{"id":"sec-1","text":"Alt text describes purpose, not pixels","level":2},{"id":"sec-2","text":"Decorative images and icons","level":2},{"id":"sec-3","text":"Complex images","level":2},{"id":"sec-4","text":"Data tables","level":2}],"takeaways":["Alt text describes an image’s purpose in its context, so the same photo can need different alt text on different pages.","Decorative images get alt=“” so screen readers skip them; a missing alt attribute often makes them read the file name.","An image that is the only content of a link or button needs alt text naming the destination or action.","Data tables need a caption and th cells with scope, so each cell is announced with its row and column headers."],"further":[{"title":"W3C WAI: An alt Decision Tree","url":"https://www.w3.org/WAI/tutorials/images/decision-tree/"},{"title":"W3C WAI: Tables Tutorial","url":"https://www.w3.org/WAI/tutorials/tables/"},{"title":"WebAIM: Alternative Text","url":"https://webaim.org/techniques/alttext/"}],"quiz":[{"q":"

Ticketly’s header logo is an image inside <a href="/">. What alt text should it have?

","options":[{"text":"alt="", because logos are decorative","why":"Inside a link the image is the link’s only content. An empty alt leaves the link with no name, so screen readers announce just “link”."},{"text":"alt="Ticketly home"","why":"Correct. A functional image describes what activating it does. “Ticketly” alone is also acceptable; adding “home” makes the destination explicit."},{"text":"alt="Ticketly logo, purple ticket icon"","why":"The visual description doesn’t help anyone choose to follow the link. Describe the function, not the artwork."}],"answer":1},{"q":"

What happens when an img has no alt attribute at all?

","options":[{"text":"Screen readers skip it, the same as alt=“”","why":"Only an explicitly empty alt marks an image as decorative. Without the attribute, screen readers try to say something about it."},{"text":"The browser generates alt text automatically from the image","why":"Some screen readers and browsers can generate AI descriptions if the user opts in, but nothing fills in alt by default, and you can’t rely on users having that feature or on it describing the purpose correctly."},{"text":"Many screen readers announce the file name or URL, such as “IMG underscore 4521 dot jpg”","why":"Correct. That is noise at best and confusing at worst, which is why missing alt is the second most common failure on the web."}],"answer":2},{"q":"

In this pricing table, what does a screen reader announce when the user moves to the “SAR 320” cell?

\n
HTML
<table>\n  <caption>Harbour Lights ticket prices</caption>\n  <tr><th scope=\"col\">Pass</th><th scope=\"col\">Early bird</th><th scope=\"col\">Standard</th></tr>\n  <tr><th scope=\"row\">Weekend</th><td>SAR 280</td><td>SAR 320</td></tr>\n</table>
\n","options":[{"text":"“Weekend, Standard, SAR 320”","why":"Correct. With th and scope, the screen reader announces the row header and column header the user hasn’t heard yet, then the value."},{"text":"“SAR 320” only","why":"That is what happens when headers are plain td cells. Here the th elements give each cell its context."},{"text":"“Harbour Lights ticket prices, SAR 320”","why":"The caption names the whole table when the user enters it; it isn’t repeated for every cell."}],"answer":0},{"q":"

A Ticketly line chart shows ticket sales per day. What is the most useful text alternative?

","options":[{"text":"alt="Chart"","why":"That says what the image is but not what it means. A screen reader user still knows nothing about sales."},{"text":"alt="", because charts are too complex to describe","why":"The chart carries information, so hiding it removes that information for screen reader users entirely."},{"text":"A short alt with the key insight, plus the full data in a table or text nearby","why":"Correct. For example “Daily ticket sales, peaking at 1,200 on launch day”, with the numbers in a table for anyone who wants detail."}],"answer":2}],"exercise":{"kind":"choice","multiple":true,"options":["logo-link","seat-map","artist-file","hero-ambient","search-empty","sold-badge"],"correct":["logo-link","hero-ambient","sold-badge"],"title":"Review Ticketly's alt text","prompt":"

A teammate added alt text to every image on Ticketly and asked you to review it. Select every decision that is correct as written. Think about each image’s purpose in its context, not just what it shows.

\n","hints":["Ask of each image: informative, functional, decorative, text, or complex?","An image that is the only content of a link or button must name the destination or action.","Three of the six decisions are correct."],"explanation":"

The logo link names its destination, the ambient crowd photo is decorative because the headline and paragraph already say everything, and the badge image of the words “Sold out” repeats those words. The other three fail: “Seat map” says what the image is but none of the availability it shows, so it needs a short summary plus a list of blocks nearby; “Image of nour_quartet_final.jpg” is a file name with a redundant prefix; and the search icon with alt=“” leaves its button with no accessible name at all.

\n","checkLabels":{},"optionText":{"logo-link":{"text":"Logo image inside <a href="/">: alt="Ticketly home"","why":"Correct. The image is the link’s only content, so its alt names where the link goes."},"seat-map":{"text":"Seat map showing which blocks still have seats: alt="Seat map"","why":"Not enough. It names the image type but none of its information. Give a short summary and a text list of blocks and availability."},"artist-file":{"text":"Artist photo on the Nour Quartet card: alt="Image of nour_quartet_final.jpg"","why":"Wrong. Screen readers already say “image”, and a file name tells users nothing. Describe what the photo shows that matters, such as the band on stage."},"hero-ambient":{"text":"Blurred crowd photo behind the headline “Harbour Lights 2026”, whose paragraph already describes the event: alt=""","why":"Correct. In this context the photo is atmosphere; the text carries the meaning, so an empty alt lets screen readers skip it."},"search-empty":{"text":"Magnifying-glass image as the only content of the search button: alt=""","why":"Wrong. The button now has no name and is announced as just “button”. Use alt=“Search”."},"sold-badge":{"text":"Image of the words “Sold out” on the Friday card: alt="Sold out"","why":"Correct. For images of text, the alt repeats the text. Even better would be real text styled with CSS."}}},"words":751,"readMinutes":4}