Accessibility features

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which is an accessibility feature that helps a student who is blind use a website?

A Alt text that describes each image

B A bigger picture with no description

2. Which choice makes a video easier to use for a student who is deaf?

A Adding captions that show the spoken words

B Turning the volume up louder

3. Which is the best alt text for a photo of a dog catching a ball in a park?

A Brown dog jumping to catch a red ball

B IMG_4032.jpg

4. A player has a broken arm and cannot use a mouse. Which design helps them most?

A Every button works only with a mouse click

B Every button can be reached using the Tab and Enter keys

5. A graph uses red and green lines. Which change makes it more colour-blind safe?

A Make the red line a slightly darker red

B Use different patterns or labels as well as colour

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.png" alt="Brown dog catching a ball">		ACaptions show the spoken words of a video as text for people who are deaf or cannot play sound
2<track kind="captions" src="talk.vtt">		BThe instructions rely on colour alone, so a colour-blind user may not tell the buttons apart
3Keyboard-only use: a person who cannot use a mouse can move to a button by pressing the Tab key and then press Enter		C<button tabindex="0">Play</button>
4Colour-blind safe colours: add a text label as well as a colour so the meaning is not shown by colour alone		DThe alt text is empty, so a screen reader user gets no description of the map image
5<img src="map.png" alt="">		E<p style="color:green">Correct: Saved</p>
6Press the red button to stop, the green button to go		FAlt text describes an image in words so a person using a screen reader can understand it

Definitions

accessibility feature

Fill in the Blanks

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

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

button:_____ { outline: 3px solid blue; }

Spot the Error

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

Question 1

A <h1>Class pets</h1>

B <img src="cat.png" alt="">

C <p>Our cat is called Milo.</p>

Question 2

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

B <track kind="metadata"

C src="a.vtt">

D </video>

Question 3

A <h1>Sign up</h1>

B <input id="name" type="text">

C <div class="btn">Send</div>

Question 4

A .good { color: green; }

B .bad { color: red; }

C .bad::before { content: "X"; }

Question 5

A <h2>Our school</h2>

B <p>Our school hall:</p>

C <img src="a.jpg" alt="a.jpg">

Answer Key

Accessibility features

Section A: Quick Questions

A — Alt text that describes each image

A — Adding captions that show the spoken words

A — Brown dog jumping to catch a red ball

B — Every button can be reached using the Tab and Enter keys

B — Use different patterns or labels as well as colour

Section B: Match the Pairs

<img src="dog.png" alt="Brown dog catching a ball"> → Alt text describes an image in words so a person using a screen reader can understand it

<track kind="captions" src="talk.vtt"> → Captions show the spoken words of a video as text for people who are deaf or cannot play sound

Keyboard-only use: a person who cannot use a mouse can move to a button by pressing the Tab key and then press Enter → <button tabindex="0">Play</button>

Colour-blind safe colours: add a text label as well as a colour so the meaning is not shown by colour alone → <p style="color:green">Correct: Saved</p>

<img src="map.png" alt=""> → The alt text is empty, so a screen reader user gets no description of the map image

Press the red button to stop, the green button to go → The instructions rely on colour alone, so a colour-blind user may not tell the buttons apart

Section C: Definitions

accessibility feature — A design choice that lets people with different abilities use a system, such as alt text for images, captions for video, keyboard-only controls or colour-blind safe colours.

Section D: Fill in the Blanks

<img src="dog.png" alt="Brown dog running">

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

<div tabindex="0">Menu</div>

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

button:focus {
  outline: 3px solid blue;
}

Section E: Spot the Error

B — The alt text is empty, so a screen reader has nothing to say about the picture. It should describe the image, for example alt="Cat".

B — kind="metadata" does not show any words on screen. For captions that help Deaf or hard-of-hearing users, it should be kind="captions".

C — A div cannot be reached with the Tab key or used with Enter or Space. A real <button> works for keyboard-only users.

A — Green next to red is hard to tell apart for people with red-green colour blindness. A colour-blind safe choice such as blue should be used, and the X symbol also helps.

C — The alt text is just the file name, which tells a screen reader user nothing. It should describe the picture, like alt="Hall".