HTML & CSS / Foundations / Lesson 3

Images, lists, and data tables

Represent alternatives, grouped information, and tabular relationships without using presentation as the only carrier of meaning.

About 4 min readContent reviewed 2026-10-25

On this page

Lesson goals

Alternatives depend on purpose
Choose list structure deliberately
Evaluate information in multiple modes

Alternatives depend on purpose

Alternative text communicates the purpose of an image in its surrounding context. A decorative image can use alt="" so it does not add redundant information to the accessibility experience. An informative photograph needs a concise equivalent relevant to the task, while a chart may need a nearby detailed explanation or data table. Do not simply describe every visible pixel or prefix every alternative with “image of.” If an image is the only content of a link, its alternative contributes the link’s name and should communicate the destination or action. CSS background images cannot supply an img element’s text alternative.

Reserve space and group captions

The width and height attributes on img describe intrinsic dimensions and let the browser reserve an aspect ratio before loading, reducing avoidable layout movement. CSS can still make the rendered image flexible. A figure can group an image with a figcaption when the content and its caption form a self-contained unit; it is not mandatory for every image. The caption can add context without duplicating the entire alternative. Distinguish a broken resource URL from missing alternative text: the first is a delivery issue, the second is an information issue. Test both loaded and unavailable-resource states deliberately.

Choose list structure deliberately

An unordered list groups peers without asserting a required sequence. An ordered list expresses a meaningful order, such as installation steps or a ranking. A description list associates terms with descriptions and is useful for compact factual summaries. These structures remain meaningful when bullet styling is removed. The first example uses an ordered sequence for a registration process, since reversing its steps changes the task. Nest a subordinate list within its parent item rather than placing it as an unrelated sibling. Avoid inserting manual bullet characters into paragraphs when the information is genuinely a list.

html Ordered process

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ordered process</title>
</head>
<body>
<main><h1>Join the workshop</h1><ol><li>Read the requirements.</li><li>Choose a session.</li><li>Review your registration.</li></ol></main>
</body>
</html>

Expected output

Three ordered registration steps.

The numbered list expresses a required sequence using native list structure. CSS can change spacing without destroying that relationship.

Make table relationships explicit

A table represents relationships across rows and columns, not a general page layout. Use caption to identify the dataset and th with scope for straightforward row or column headers. A visually bold td remains an ordinary data cell and does not supply header association. The second example has one row of column headers and a simple body, making each number understandable with its session name. Complex multi-level tables need more careful header associations and may be better simplified. Preserve the data’s relationships if a narrow viewport requires a scrolling wrapper; do not flatten cells into unrelated visual cards without equivalent meaning.

html Accessible table

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accessible table</title>
<style>
th, td { padding: .5rem; border: 1px solid #555; } table { border-collapse: collapse; }
</style>
</head>
<body>
<main><h1>Session availability</h1><table><caption>Morning workshop seats</caption><thead><tr><th scope="col">Session</th><th scope="col">Seats remaining</th></tr></thead><tbody><tr><th scope="row">HTML</th><td>8</td></tr><tr><th scope="row">CSS</th><td>5</td></tr></tbody></table></main>
</body>
</html>

Expected output

HTML has 8 seats; CSS has 5 seats.

Column and row headers associate each count with its subject. The caption names the small dataset, and borders support visual scanning.

Evaluate information in multiple modes

Inspect images with loading disabled, lists without marker styling, and tables at high zoom. Ask what information survives each mode rather than whether the result still resembles a design mockup. A table’s summary should not claim values absent from its cells, and a caption should identify the dataset without unnecessary repetition. Keep units in headers so “45” is recognizably minutes or dollars. For changing data, explain update time and meaning in ordinary content rather than relying on color or an image filename. Accessible representation requires editorial decisions as well as correct tags, so automated validation alone cannot finish this review.

Common errors and fixes

A linked image has no useful link name

Why it happens: Its alternative describes decoration instead of the destination.
How to fix it: Supply an alternative that identifies the navigation purpose.
Prevent it next time: Review alternatives in their actual link context.

A bold table cell is not announced as a header

Why it happens: Visual weight replaced header markup.
How to fix it: Use th and appropriate header associations.
Prevent it next time: Inspect relationships rather than appearance alone.

Content jumps as an image arrives

Why it happens: No useful dimensions or aspect ratio were reserved.
How to fix it: Supply correct dimensions and flexible CSS sizing.
Prevent it next time: Check slow-loading layouts early.

Check your understanding

1. An icon repeats the adjacent text “Download report”. What alternative should it usually have?

Show worked solution

If the text already names the same link and the icon adds no information, use alt="" for an img icon. The link keeps its useful visible name without duplicate announcements. Confirm the image is truly redundant; a status icon carrying additional information would need a different treatment.

2. Convert a two-column price comparison from aligned paragraphs into a simple table.