← VCE Software Development U3O2

Accessibility features

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.

Part of: VCE Software Development - U3O2 - Analysis and Design — Module 110, 7-8 Digital Technologies: Designing user interfaces and experiences — Module 10, QCE Digital Solutions Unit 1 — Understanding Digital Problems — Module 56, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 8, QCE Digital Solutions Unit 1 — Programmed Solutions — Module 109, QCE Digital Solutions Unit 2 — Data-Driven Problems and Solution Requirements — Module 78

Understanding Accessibility features in VCE Software Development U3O2

What it does: A real button that can be reached with the Tab key lets keyboard-only users select it, so it supports keyboard control. The word 'Correct' backs up the green colour, so a colour-blind user still understands the message. Alt text is a short written description of an image. A screen reader reads it aloud so the user knows what the image shows. Captions show speech and important sounds as text. Louder sound does not help someone who cannot hear it. Keyboard-only use means all controls can be used without a mouse. This helps people who cannot use a mouse. Accessibility features often help many people. Captions help in a loud room, on a bus or when you must keep your device quiet.

Common mistakes: 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". kind="metadata" does not show any words on screen. For captions that help Deaf or hard-of-hearing users, 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 to a class →

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

Take this worksheet further — free with Cloodit

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

Learning

Duo

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

Alt text that describes each imageA bigger picture with no description

Matches

↓

The alt text is empty, so a screen reader user gets no description of the map image

Applying

Meanings

Term

accessibility feature

Meaning

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.

Practice

<h1>Sports Day</h1>

Testing

Gaps

Check Answer

Spots

1<h1>Class pets</h1>

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

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

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

Alt text is a short written description of an image. A screen reader reads it aloud so the user knows what the image shows.

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

Captions show speech and important sounds as text. Louder sound does not help someone who cannot hear it.

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

Good alt text describes what the image shows. A file name tells a screen reader user nothing useful.

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 ✓

Keyboard-only use means all controls can be used without a mouse. This helps people who cannot use a mouse.

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 ✓

Some people cannot tell red and green apart. Patterns and labels give extra clues so colour is not the only signal.

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

Key Term

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.

Fill in the Blanks

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

Hint: Type the attribute name 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 tag name that attaches a caption file to a video

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

Hint: Type the attribute that lets the Tab key move keyboard focus to this element

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

Hint: Type the value that adds a line under the text so the error does not rely on colour alone

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

Hint: Type the pseudo-class for an element that is selected using the Tab key

Spot the Error

Question 1

A <h1>Class pets</h1>

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

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

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

Question 2

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

B <track kind="metadata"

C src="a.vtt">

D </video>

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

Question 3

A <h1>Sign up</h1>

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

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

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

Question 4

A .good { color: green; }

B .bad { color: red; }

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

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

Question 5

A <h2>Our school</h2>

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

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

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

Student with a class code? Join your class →