← Years 9–10 Creating Digital Solutions

Accessibility features in an interface

Design choices like alt text, captions, keyboard-only controls, adjustable text size and not relying on colour alone, so people with different abilities can use a system.

Part of: 9-10 Digital Technologies: Designing user interfaces and experiences — Module 8, QCE Digital Solutions Unit 2 — Prototype Data Solutions — Module 92, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 132

Understanding Accessibility features in an interface in Years 9–10 Creating Digital Solutions

What it does: The track element with kind="captions" attaches a text version of the audio to a video, so the spoken content is available without sound. The message uses the word Error as well as any red colour, so the meaning is not lost for someone who cannot tell the colours apart. Alt text is a written description of an image. A screen reader reads it aloud, so a blind user knows what the picture shows. Keyboard navigation means all controls can be used without a mouse. This helps people with motor difficulties and those who use assistive devices. Without an alt attribute, users who rely on screen readers miss the information in the image.

Common mistakes: The alt text is empty, so a screen reader skips this informative photo and a blind user misses it. It should describe the image, e.g. alt="Rex the brown dog". The metadata track kind is never shown to viewers, so Deaf or hard-of-hearing users get no captions. It should be kind="captions".

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Accessibility features in an interface to a class →

This module's key terms are also in a printable crossword (Modules 6–132) and word search (Modules 6–132).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
A student who is blind uses a screen reader on a school website. Which feature lets them know what a photo shows?
A bigger image file sizeAlt text that describes the image
Matches
<img src="chart.png">
↓
The image has no alt text, so a screen reader cannot describe it. Add alt="Bar chart of sales".
Applying
Meanings
Term
accessibility features
Meaning
Design choices like alt text, captions, keyboard-only controls, adjustable text size and not relying on colour alone, so people with different abilities can use a system.
Practice
<img src="map.png" alt="Map of the school hall">
Testing
Gaps
<img src="cat.png" ="A sleeping cat">
Check Answer
Spots
3<img src="rex.jpg"
4 alt="">

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Clownfish' badge — Reef Rookie, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. A student who is blind uses a screen reader on a school website. Which feature lets them know what a photo shows?
A. A bigger image file size
B. Alt text that describes the image ✓
Alt text is a written description of an image. A screen reader reads it aloud, so a blind user knows what the picture shows.
2. A video has no sound on a bus, and a Deaf student also wants to follow it. What accessibility feature helps both?
A. Captions that show the spoken words as text ✓
B. A louder background music track
Captions display speech as text. They help Deaf users and anyone who cannot play sound.
3. Which interface can be used by someone who cannot use a mouse because of a hand injury?
A. One where every button can be reached with the Tab and Enter keys ✓
B. One where buttons only work when clicked with a mouse
Keyboard navigation means all controls can be used without a mouse. This helps people with motor difficulties and those who use assistive devices.
4. A form says 'Fields in red are required' and has no other marker. What is the problem?
A. Colour is the only clue, so colour-blind users may miss it ✓
B. Red is too bright for the screen to show
Do not rely on colour alone. Add a star, label or the word 'required' so everyone can tell which fields matter.
5. Which is the better way to show an error in a sign-up form?
A. A red border only
B. A red border plus an error icon and a message in words ✓
Combining colour with an icon and text means users who cannot see the colour difference still get the message.

Match the Pairs

<img src="dog.jpg" alt="Brown dog catching a ball"> → Adds alt text so a screen reader can describe the picture to a user who cannot see it
<button tabindex="0">Submit</button> → Lets a person reach and use the button with the Tab key, without a mouse
Captions show spoken words as text so people who are deaf or hard of hearing can follow a video → <track kind="captions" src="talk.vtt">
Do not rely on colour alone: add a text label or icon as well, so colour-blind users get the same information → <span class="error">Error: Name is required</span>
<img src="chart.png"> → The image has no alt text, so a screen reader cannot describe it. Add alt="Bar chart of sales".
Fill in the red boxes. (no other cue) → It relies on colour alone, so colour-blind users may not see which boxes to fill in. Add a label or a star symbol as well.

Key Term

accessibility features
Design choices like alt text, captions, keyboard-only controls, adjustable text size and not relying on colour alone, so people with different abilities can use a system.

Fill in the Blanks

1. <img src="cat.png" alt="A sleeping cat">
Hint: Type the attribute that gives an image a text description for screen readers.
2. <video src="clip.mp4" controls> <track kind="captions" src="en.vtt"> </video>
Hint: Type the track kind that shows the spoken words as text on screen.
3. <div tabindex="0">Open menu</div>
Hint: Type the attribute that lets a keyboard user reach this element with the Tab key.
4. .error { color: red; text-decoration: underline; }
Hint: Type the value that adds a line under the text, so the error is not shown by colour alone.
5. body { font-size: 1.2rem; }
Hint: Type the CSS property that controls how big the text is, so it can be adjusted.

Spot the Error

Question 1
A <h1>Adopt a pet</h1>
B <p>Meet Rex, our new dog.</p>
C <img src="rex.jpg"
D alt="">
Line D — The alt text is empty, so a screen reader skips this informative photo and a blind user misses it. It should describe the image, e.g. alt="Rex the brown dog".
Question 2
A <video controls src="a.mp4">
B <track src="a.vtt"
C kind="metadata">
D </video>
Line C — The metadata track kind is never shown to viewers, so Deaf or hard-of-hearing users get no captions. It should be kind="captions".
Question 3
A <div class="btn">Save</div>
B <a href="home.html">Home</a>
C <input type="text">
Line A — A div cannot be reached with the Tab key, so keyboard-only users cannot use it. A real <button> is focusable and works with Enter and Space.
Question 4
A <label class="red">Name</label>
B <input type="text" required>
C <button>Send</button>
Line A — This shows that the field is required using red colour alone, which colour-blind users may not see. Add a text cue like (required) as well.
Question 5
A body {
B font-size: 12px;
C }
D p { line-height: 1.5; }
Line B — A fixed pixel size ignores the user's browser text-size setting, so people who need larger text can't adjust it. Relative units like 1rem or 100% scale properly.

Student with a class code? Join your class →