Guided course - 5 chapters

Alt text: A Practical Course with Gabriel Torres

Gabriel Torres teaches Alt text through five practical chapters that move from a clear foundation to guided work, applied decisions, and revision. You will finish with an inclusive communication sample or accessibility audit, a tutor-ready capstone, saved notes, and a repeatable way to continue practicing.

Designers, developers, content creators, students, and product teams 2 hrs 30 min Practice and checkpoints Free curriculum

Start or resume

Your course progress

0 of 5 chapters complete

Next: chapter 1

What you will learn

Build knowledge, use it, and leave with evidence of progress.

Explain the essential Alt text vocabulary through a connected mental model.
Follow and explain a reliable inclusive communication workflow in guided practice.
Apply Alt text to a realistic scenario with visible constraints and tradeoffs.
Evaluate and revise an inclusive communication sample or accessibility audit using evidence-based success criteria.
Complete a capstone and leave with a specific next-practice plan.

Before you start

No specialist accessibility background is required
Approach culture and lived experience with respect; the course does not replace community-led instruction

Useful materials

Notebook or audit template
A sample message, page, or communication scenario
Optional accessibility settings or testing tools

Suggested rhythm

Complete one 30-minute chapter at a time: learn for 10 minutes, practice for 15, then use 5 minutes for the checkpoint and notes.

Course capstone

Alt text access improvement

Improve a focused Alt text communication task by identifying barriers, applying conventions, and documenting a small usability check.

What you will submit

A user-and-task statement
A before-and-after communication sample
An accessibility check and revision note

How it will be reviewed

The user need is specific
Conventions are applied accurately
More than one access route is considered
Language and testing are respectful

Course chapters

Learn, practice, check, and record what matters.

2 hrs 30 min total

Chapter 1

Alt text: Foundations and vocabulary

Build a dependable mental model for Alt text before trying to memorize isolated details. You will define the essential vocabulary, inspect a worked example, and turn the ideas into a reference you can actually use.

26 min Not complete

Learning objectives

Explain the purpose of Alt text in your own words.
Use the chapter vocabulary accurately in a short example.
Distinguish a strong example from a common misconception.
Create a compact reference for later practice.

Key terms

Start with the purpose

Place Alt text inside a communication or interface scenario involving different access needs. Name the result a learner is trying to produce and the constraints that make the skill useful.

How Alt text actually works

These are the load-bearing ideas. Everything later in the course is an application of one of them, so it is worth reading slowly and returning to when something stops making sense.

Accessibility has measurable thresholds. Contrast ratios, target sizes, and timing limits are published numbers that can be tested. Treating them as measurements moves decisions from opinion to evidence.
Design for the whole range of access. People use screen readers, keyboards, magnification, captions, and voice input, often in combination. A design that assumes a mouse and clear vision excludes users silently.
Alternatives must carry equivalent information. An image description or caption should convey what the original conveys, in context, rather than describe it exhaustively. Purpose determines what detail belongs in the alternative.

Misconceptions worth clearing early

Each of these is common, understandable, and expensive to leave in place. Recognising them now saves rework later.

Writing alt text that repeats the caption. Both describe the same image. Fix: Say what the image contributes that the surrounding text does not; if it adds nothing, mark it decorative.
Relying on colour alone to signal state. The distinction is obvious to the designer. Fix: Add text, shape, or position so the signal survives colour blindness and greyscale.
Testing only with a mouse. It is the fastest way to check a build. Fix: Tab through the whole flow with the keyboard; if focus disappears or order jumps, it is broken.

Build the mental model

Connect the key terms as a process rather than a word list. Use this sequence: identify the user and task, remove barriers, test with more than one mode, and revise respectfully.

Catch the common miss

Compare a surface-level attempt with one that shows user-centered choices, correct conventions, multiple access routes, and respectful language. Explain the single difference that matters most.

Contrast lab

Contrast is alt text's sibling

Both answer the same question — can everyone perceive this? Slide the tones until the sample passes the measurable bar.

Contrast is measurable, not a matter of taste: 4.5:1 is the WCAG AA line for body text and 3:1 for large text.

Find the exact point where AA flips from fail to pass.
Create a pair that passes for large text but fails for body text.
Swap to light-on-dark — does the ratio care which side is darker?

Alt text example

Pair an image with useful alternative text

<figure>
  <img src="reef-map.webp"
       alt="Map showing coral cover highest on the eastern reef">
  <figcaption>Coral survey, June sample</figcaption>
</figure>

1 / 5

Create the figure element <figure>

The markup gives this piece of content an explicit role and relationship.

Describe the information the image contributes in this context rather than listing every visible detail.

Side-by-side comparison

Two versions of the same message

Both attempts look plausible from a distance. Toggle the highlights and study where they part ways.

Aspect	Looks-fine version	Accessible version
Assumption	Assumes everyone sees, hears, and clicks like the author	Names the access needs and designs more than one route
Conventions	Custom patterns only a mouse can operate	Standard patterns assistive technology already understands
Check	Reviewed by looking at it	Tested with a keyboard, a screen reader, or a real user

Accessibility is not decoration on top of the design — it is whether the design works.

Practice round

Match the Alt text vocabulary

Tap a term, then the definition it belongs to. Wrong guesses cost nothing but honesty.

Retrieval beats rereading: pulling a definition from memory strengthens it far more than recognizing it on the page.

Clear the board once, shuffle, and beat your attempt count.
Say each definition aloud before tapping — then check yourself.

Practice activity - 12 min

Make a one-page field guide

Create a compact field guide that would help a new learner recognize and begin using Alt text.

Write a one-sentence definition and purpose.
Add the four key terms with a plain-language example.
Include one non-example and explain why it misses.
Finish with a three-step starter checklist.

Deliverable

One annotated page or slide that can be reused in later chapters.

Success looks like

The definition is specific.
Examples match the vocabulary.
The checklist is usable without extra explanation.

Knowledge check

Which response best shows a usable foundation in Alt text?

1 question

AIt defines the idea, shows it in context, and explains why the example fits. BIt copies a list of terms without connecting them. CIt starts the final project before identifying the purpose. DIt chooses an answer without checking the situation.

Chapter notes Not started

2
Chapter 2
Keyboard navigation: Guided demonstration

Follow a complete Keyboard navigation example from setup to result, pausing at the decisions that experts often make silently. Then repeat the process with support and check your work against visible criteria.

29 min Not complete
Learning objectives

Sequence the main steps in a reliable Keyboard navigation workflow.

Explain why each important decision is made.

Complete a supported example without skipping verification.

Use a checklist to identify one correction.
Key terms
1

Watch the whole process

Trace a model from the initial prompt to an inclusive communication sample or accessibility audit. Mark each point where the learner must observe, choose, or verify rather than act automatically.
2

The method, one step at a time

This is the working sequence experienced practitioners follow. Do it in order the first few times, even where a step feels unnecessary.

Identify the user and task

Remove barriers

Test with more than one mode

Revise respectfully

The order matters: each step produces the information the next one needs.
3

Where this usually goes wrong

Watch for these while you work through the demonstration rather than afterwards.

Writing alt text that repeats the caption. Both describe the same image. Fix: Say what the image contributes that the surrounding text does not; if it adds nothing, mark it decorative.

Relying on colour alone to signal state. The distinction is obvious to the designer. Fix: Add text, shape, or position so the signal survives colour blindness and greyscale.

Testing only with a mouse. It is the fastest way to check a build. Fix: Tab through the whole flow with the keyboard; if focus disappears or order jumps, it is broken.
4

Practice with scaffolding

Repeat the model with one detail changed. Keep the prompts visible and say or write the reason for each choice before continuing.

5

Check before feedback

Use user-centered choices, correct conventions, multiple access routes, and respectful language as the quality test. Make one self-correction before asking the tutor to review the result.
Guided flowchart
A complete Keyboard navigation practice run

flowchart LR N1["Read the task"] N2["Model one step"] N3["Try with support"] N4["Verify the result"] N1 --> N2 N2 --> N3 N3 --> N4

Pause at each arrow and explain the decision before moving to the next step.

Step 1 of 4: Read the task
Accessible HTML
Use a native keyboard-operable control

HTML Read-only example

1 2 3 4 5 6 7 8
<button type="button" aria-expanded="false" aria-controls="lesson-details"> Show lesson details </button> <section id="lesson-details" hidden> <h2>Lesson details</h2> </section>

1 / 7

Create the button element <button type="button" aria-expanded="false"
The markup gives this piece of content an explicit role and relationship.

A native button already supports keyboard activation; ARIA describes the controlled region and state.
Practice round
Rebuild the Keyboard navigation method

The steps of this chapter's method, shuffled. Arrange them so they would actually work.

A method is a sequence, not a bag of tips — if the order surprises you, that is exactly the gap worth closing now.

Order the steps, then explain to yourself why step 2 cannot go last.

Shuffle again and solve it in fewer moves.
Practice activity - 15 min
Complete the guided run

Use the chapter workflow to produce an inclusive communication sample or accessibility audit for a slightly changed Keyboard navigation example.
1. Restate the task and constraints.
2. Follow the model one decision at a time.
3. Record the reason for two key choices.
4. Check the result and revise one issue.
Deliverable
A completed guided example with two decision notes and one correction.
Success looks like

The workflow is complete.

Decisions have reasons.

The final check produces a visible correction.
Knowledge check
During guided Keyboard navigation practice, when is the best time to explain a choice?

1 question

During guided Keyboard navigation practice, when is the best time to explain a choice? AAt the decision point, before seeing whether the final result works. BOnly after the tutor supplies the correct answer. COnly when the result is wrong. DAfter deleting the draft and starting over.

Chapter notes Not started

Sign in to save chapter notes to your account.

Ready to complete this chapter? Submit the guided example with decision notes, one self-correction, and the checkpoint response.
3
Chapter 3
WCAG basics: Applied scenario

Transfer WCAG basics into a realistic scenario where the prompt is less tidy and more than one option may be reasonable. You will define the constraints, choose an approach, and defend the tradeoff.

32 min Not complete
Learning objectives

Extract the relevant facts and constraints from a realistic scenario.

Generate at least two plausible approaches to WCAG basics.

Choose an approach using explicit criteria.

Explain the likely consequence of the choice.
Key terms
1

Read the situation

Translate the scenario into a clear task. Separate facts, assumptions, constraints, and information that is interesting but not relevant to WCAG basics.
2

Choosing well under real constraints

Applied work is mostly judgement under limits: less time, less information, and more competing goals than a textbook example allows. These are the decision rules that hold up in practice.

An image is purely decorative: Give it an empty alt attribute so assistive technology skips it rather than announcing noise.

You have limited time to improve access: Fix keyboard operability, contrast, and labels first; they block the most users outright.

A design and an access requirement conflict: Treat the requirement as fixed and redesign around it; it usually improves the design for everyone.
3

Reading the situation before acting

Before choosing an approach, state three things explicitly: what result the situation actually requires, which constraints are fixed rather than preferences, and what evidence would tell you the approach is working. Skipping this step is the most common reason competent work solves the wrong problem.

Accessibility has measurable thresholds. Contrast ratios, target sizes, and timing limits are published numbers that can be tested. Treating them as measurements moves decisions from opinion to evidence.
4

Compare real options

Generate two workable approaches and test both against the purpose. Do not hide the tradeoff; name what each option improves and what it gives up.

5

Make the reasoning visible

Produce an inclusive communication sample or accessibility audit and attach a short decision note. The note should make the result auditable, not merely confident.
Contrast lab
Find the moment text becomes readable

Slide the text and background tones apart until the sample passes — the contrast ratio updates live.

Contrast is measurable, not a matter of taste: 4.5:1 is the WCAG AA line for body text and 3:1 for large text.

Find the exact point where AA flips from fail to pass.

Create a pair that passes for large text but fails for body text.

Swap to light-on-dark — does the ratio care which side is darker?
Accessible HTML
Connect a form field to its instructions

HTML Read-only example

<label for="email">Email address</label> <p id="email-hint">Use an address you can access.</p> <input id="email" name="email" type="email" aria-describedby="email-hint">

1 / 4

Create the label element <label for="email">Email address</label>
The markup gives this piece of content an explicit role and relationship.

The explicit label names the field, and aria-describedby associates the supporting instruction.
Practice round
Match the WCAG basics vocabulary

Tap a term, then the definition it belongs to. Wrong guesses cost nothing but honesty.

Retrieval beats rereading: pulling a definition from memory strengthens it far more than recognizing it on the page.

Clear the board once, shuffle, and beat your attempt count.

Say each definition aloud before tapping — then check yourself.
Practice activity - 18 min
Solve the scenario

Apply WCAG basics to a scenario from school, work, home, or community life that includes at least two constraints.
1. Write the task, audience, and constraints.
2. Sketch two possible approaches.
3. Choose using three criteria from the chapter.
4. Produce the result and explain one tradeoff.
Deliverable
A scenario response with an option comparison and a short decision note.
Success looks like

Constraints are visible.

Both options are plausible.

The final choice follows the stated criteria.
Knowledge check
What makes an applied WCAG basics decision defensible?

1 question

What makes an applied WCAG basics decision defensible? AThe chosen approach follows stated constraints and criteria, with the tradeoff acknowledged. BIt is the first idea that came to mind. CIt avoids mentioning uncertainty. DIt copies the guided example without adapting it.

Chapter notes Not started

Sign in to save chapter notes to your account.

Ready to complete this chapter? Finish the scenario response, compare two options, and explain the selected tradeoff.

Chapter 4

Usability testing: Review and improve

Learn to diagnose and improve Usability testing work with a focused rubric instead of vague judgment. You will separate symptoms from causes, revise the highest-value issue, and document the before-and-after difference.

29 min Not complete

Learning objectives

Evaluate a draft using explicit Usability testing criteria.
Identify the cause behind the most important weakness.
Choose a revision with high impact and reasonable effort.
Explain how the revision changes the result.

Key terms

Use the rubric, not a feeling

Review the work for user-centered choices, correct conventions, multiple access routes, and respectful language. Record evidence for each judgment so feedback points to something observable.

Diagnostic checklist

Run this before you revise anything. Diagnosing first prevents the common failure of polishing the parts that were already fine.

Check: Writing alt text that repeats the caption — is this present in your work?
Check: Relying on colour alone to signal state — is this present in your work?
Check: Testing only with a mouse — is this present in your work?

The quality bar

This is what finished work looks like in this field. Use it as the standard for your revision rather than a general sense of improvement.

Every interactive element is reachable and operable by keyboard
Contrast meets the published threshold for its text size
Alternatives convey the same information as the original, in context

Diagnose before editing

Name the symptom, then ask what decision or missing step produced it. Choose the cause you can address rather than changing everything at once.

Revise and compare

Make one purposeful revision and compare the two versions. Keep the change only if it improves the intended result without creating a larger problem.

Equation in context

Problem discovery curve

P(n) = 1 - (1 - \lambda)^n

Each added test user finds a share of the remaining problems; with λ ≈ 0.31, five users reach ~85% on average.

Testing lab

Watch five users find most of the problems

Slide the number of test users; the found-share follows the classic discovery curve.

The famous "five users" is a curve, not a commandment: each new user re-finds old problems plus a few new ones, so small rounds with fixes between them beat one big round.

Read the gain from user 5 to user 10 — worth the sessions?
Why do two rounds of five beat one round of ten?

Revision flowchart

Evidence-led improvement loop

flowchart LR
    N1["Inspect evidence"]
    N2["Find the likely cause"]
    N3["Revise one issue"]
    N4["Compare versions"]
    N1 --> N2
    N2 --> N3
    N3 --> N4

Revise the cause of the highest-value issue, then compare the new result with the original criteria.

Step 1 of 4: Inspect evidence

Alt text example

Pair an image with useful alternative text

<figure>
  <img src="reef-map.webp"
       alt="Map showing coral cover highest on the eastern reef">
  <figcaption>Coral survey, June sample</figcaption>
</figure>

1 / 5

Create the figure element <figure>

The markup gives this piece of content an explicit role and relationship.

Describe the information the image contributes in this context rather than listing every visible detail.

Side-by-side comparison

Two versions of the same message

Use this pair as your revision rubric: find which column your current draft sits in, one row at a time.

Aspect	Looks-fine version	Accessible version
Assumption	Assumes everyone sees, hears, and clicks like the author	Names the access needs and designs more than one route
Conventions	Custom patterns only a mouse can operate	Standard patterns assistive technology already understands
Check	Reviewed by looking at it	Tested with a keyboard, a screen reader, or a real user

Accessibility is not decoration on top of the design — it is whether the design works.

Practice round

Rebuild the Usability testing method

The steps of this chapter's method, shuffled. Arrange them so they would actually work.

A method is a sequence, not a bag of tips — if the order surprises you, that is exactly the gap worth closing now.

Order the steps, then explain to yourself why step 2 cannot go last.
Shuffle again and solve it in fewer moves.

Practice activity - 16 min

Run a focused revision cycle

Review a previous Usability testing artifact or the supplied flawed example, then improve the most consequential issue.

Score the draft against three criteria.
Quote or point to evidence for the weakest score.
Name the likely cause and revise it.
Write a before-and-after comparison.

Deliverable

A marked-up draft, revised version, and four-sentence change note.

Success looks like

Feedback cites evidence.
The revision addresses a cause.
The comparison explains a measurable or observable improvement.

Knowledge check

Which feedback is most useful for improving Usability testing?

1 question

AA specific observation linked to a criterion and a realistic next action. BA general statement that the work is good or bad. CA complete replacement made by someone else. DA list of unrelated preferences.

Chapter notes Not started

5
Chapter 5
Inclusive content: Capstone integration

Integrate the course methods in a compact Inclusive content capstone. You will define the brief, plan milestones, produce a complete result, gather tutor feedback, and leave with a repeatable next-practice plan.

36 min Not complete
Learning objectives

Translate the capstone brief into milestones and checks.

Combine the course methods without losing the central purpose.

Present evidence for the quality of the final result.

Choose the next skill to practice from the final review.
Key terms
1

Define a finishable brief

Choose a specific audience, result, and boundary for the Inclusive content capstone. Reduce scope until the project can be finished and reviewed in one focused cycle.
2

Bringing the parts together

A capstone is judged on coherence, not on the number of techniques it includes. Return to the core ideas and make sure the work demonstrates them rather than decorating them.

Accessibility has measurable thresholds. Contrast ratios, target sizes, and timing limits are published numbers that can be tested. Treating them as measurements moves decisions from opinion to evidence.

Design for the whole range of access. People use screen readers, keyboards, magnification, captions, and voice input, often in combination. A design that assumes a mouse and clear vision excludes users silently.

Alternatives must carry equivalent information. An image description or caption should convey what the original conveys, in context, rather than describe it exhaustively. Purpose determines what detail belongs in the alternative.
3

Standards that make the work credible

These are the marks of work that would be taken seriously by someone who does this professionally.

Every interactive element is reachable and operable by keyboard

Contrast meets the published threshold for its text size

Alternatives convey the same information as the original, in context
4

Build with checkpoints

Plan foundation, first draft, verification, and revision milestones. At each checkpoint, save evidence instead of relying on memory.

5

Present and continue

Present an inclusive communication sample or accessibility audit with a concise rationale. Use the final rubric to choose one strength to retain and one next practice target.
Contrast lab
Contrast is alt text's sibling

Both answer the same question — can everyone perceive this? Slide the tones until the sample passes the measurable bar.

Contrast is measurable, not a matter of taste: 4.5:1 is the WCAG AA line for body text and 3:1 for large text.

Find the exact point where AA flips from fail to pass.

Create a pair that passes for large text but fails for body text.

Swap to light-on-dark — does the ratio care which side is darker?
Visual model
Capstone learning loop

The capstone is a complete cycle: define a finishable brief, build, review evidence, then choose the next practice target.
Alt text example
Pair an image with useful alternative text

HTML Read-only example

<figure> <img src="reef-map.webp" alt="Map showing coral cover highest on the eastern reef"> <figcaption>Coral survey, June sample</figcaption> </figure>

1 / 5

Create the figure element <figure>
The markup gives this piece of content an explicit role and relationship.

Describe the information the image contributes in this context rather than listing every visible detail.
Practice round
Match the Inclusive content vocabulary

Tap a term, then the definition it belongs to. Wrong guesses cost nothing but honesty.

Retrieval beats rereading: pulling a definition from memory strengthens it far more than recognizing it on the page.

Clear the board once, shuffle, and beat your attempt count.

Say each definition aloud before tapping — then check yourself.
Practice activity - 22 min
Complete the capstone sprint

Create a complete Inclusive content artifact for a defined audience and purpose, using the course rubric to review it.
1. Write a brief with scope and success criteria.
2. Create the first complete version.
3. Run a self-check and request focused tutor feedback.
4. Revise, present, and set one next-practice target.
Deliverable
A finished capstone, evidence of one revision, and a next-practice note.
Success looks like

The result answers the brief.

Course methods are visible.

Revision follows feedback or evidence.

The next step is specific and achievable.
Knowledge check
When is the Inclusive content capstone ready to finish?

1 question

When is the Inclusive content capstone ready to finish? AIt meets the written brief and criteria, includes a reviewed revision, and has a clear next-practice target. BIt contains every possible feature or idea. CThe learner can no longer think of any improvement. DIt looks exactly like the tutor example.

Chapter notes Not started

Sign in to save chapter notes to your account.

Ready to complete this chapter? Submit the completed capstone, revision evidence, rubric review, and one concrete next-practice target.

Make it personal

Turn the public curriculum into your own learning path.

Ask Gabriel Torres to adapt the sequence to your level, available time, and goal. The personalized path can then be saved in your workspace.

0 of 5 chapters complete

Build knowledge, use it, and leave with evidence of progress.

Before you start

Useful materials

Suggested rhythm

Alt text access improvement

What you will submit

How it will be reviewed

Learn, practice, check, and record what matters.

Alt text: Foundations and vocabulary

Learning objectives

Key terms

Start with the purpose

How Alt text actually works

Misconceptions worth clearing early

Build the mental model

Catch the common miss

Which response best shows a usable foundation in Alt text?

Keyboard navigation: Guided demonstration

Learning objectives

Key terms

Watch the whole process

The method, one step at a time

Where this usually goes wrong

Practice with scaffolding

Check before feedback

During guided Keyboard navigation practice, when is the best time to explain a choice?

WCAG basics: Applied scenario

Learning objectives

Key terms

Read the situation

Choosing well under real constraints

Reading the situation before acting

Compare real options

Make the reasoning visible

What makes an applied WCAG basics decision defensible?

Usability testing: Review and improve

Learning objectives

Key terms

Use the rubric, not a feeling

Diagnostic checklist

The quality bar

Diagnose before editing

Revise and compare

Which feedback is most useful for improving Usability testing?

Inclusive content: Capstone integration

Learning objectives

Key terms

Define a finishable brief

Bringing the parts together

Standards that make the work credible

Build with checkpoints

Present and continue

When is the Inclusive content capstone ready to finish?

Turn the public curriculum into your own learning path.