Accessibility features in an interface

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<img src="dog.jpg" alt="Brown dog catching a ball">		AThe image has no alt text, so a screen reader cannot describe it. Add alt="Bar chart of sales".
2<button tabindex="0">Submit</button>		B<span class="error">Error: Name is required</span>
3Captions show spoken words as text so people who are deaf or hard of hearing can follow a video		C<track kind="captions" src="talk.vtt">
4Do not rely on colour alone: add a text label or icon as well, so colour-blind users get the same information		DIt 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.
5<img src="chart.png">		EAdds alt text so a screen reader can describe the picture to a user who cannot see it
6Fill in the red boxes. (no other cue)		FLets a person reach and use the button with the Tab key, without a mouse

Definitions

accessibility features

Fill in the Blanks

Complete each line of code by filling in the missing parts.

.error { color: red; text-decoration: _________; }

body { _________: 1.2rem; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <h1>Adopt a pet</h1>

B <p>Meet Rex, our new dog.</p>

C <img src="rex.jpg"

D alt="">

Question 2

A <video controls src="a.mp4">

B <track src="a.vtt"

C kind="metadata">

D </video>

Question 3

A <div class="btn">Save</div>

B <a href="home.html">Home</a>

C <input type="text">

Question 4

A <label class="red">Name</label>

B <input type="text" required>

C <button>Send</button>

Question 5

A body {

B font-size: 12px;

C }

D p { line-height: 1.5; }

Answer Key

Accessibility features in an interface

Section A: Quick Questions

B — Alt text that describes the image

A — Captions that show the spoken words as text

A — One where every button can be reached with the Tab and Enter keys

A — Colour is the only clue, so colour-blind users may miss it

B — A red border plus an error icon and a message in words

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

<img src="cat.png" alt="A sleeping cat">

<video src="clip.mp4" controls>
  <track kind="captions" src="en.vtt">
</video>

<div tabindex="0">Open menu</div>

.error {
  color: red; text-decoration: underline;
}

body {
  font-size: 1.2rem;
}

Section E: Spot the Error

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".

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".

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.

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.

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.