lesson 2.1 - accessibility needs: visual & hearing

Understand how to design interfaces for users with visual and hearing accessibility needs.

Have you ever seen a website that looks beautiful, with cool, subtle colours and sleek graphics, but it's just, well... really hard to read? Or a video where you can't tell what's going on because you're in a loud place and there are no subtitles?

Today, we're going to be an Accessibility Rescue Team. I've created a modern-looking website for "The Majestic Cinema," but it's secretly terrible—it's full of traps for users with visual and hearing impairments. Your job is to follow a rescue plan, dive into the code, and fix it!

Learning Outcomes

The Building Blocks (Factual Knowledge)

Recall the common barriers that visual impairments (low vision, blindness, colour blindness) and hearing impairments create for users.

Describe specific accessibility features, such as alt-text, high-contrast colour, and captions.

The Connections and Theories (Conceptual Knowledge)

Analyse how specific code in HTML (like a missing alt attribute) and CSS (like a poor color choice) directly causes accessibility failures.

Evaluate how a "visually appealing" design can still be a "functionally poor" design if it is not inclusive.

The Skills and Methods (Procedural Knowledge)

Apply accessibility principles by editing HTML and CSS files to fix known issues.

Create an accessible webpage by modifying code to include alt-text, high-contrast colours, and text-based alternatives for sensory content.

Digital Skill Focus: C.3.6 User-Centred Design: This lesson focuses on inclusive design. You will be evaluating a website for basic accessibility issues (poor contrast, missing alt-text) and then using your technical skills to fix them, ensuring the product is usable by people with the widest possible range of abilities.

What is Accessibility?

In simple terms, digital accessibility is the practice of designing websites, apps, and other technology so that people with disabilities can use them. When we design for everyone, we often make the experience better for all users.

Today, we're focusing on two key areas.

Visual Accessibility (C1.A2.1.1)

This covers a wide range of conditions, from total blindness to low vision or colour blindness. Different users have different needs.

Blindness: Users in this group often use software called a screen reader. This tool reads the content of the screen aloud, including text, links, and button labels.

Low Vision: Users may not be blind, but they might need to use screen magnifiers to enlarge parts of the screen. They benefit hugely from clear layouts and resizable text.

Colour Blindness: This is a common condition where users have difficulty distinguishing between certain colours, most commonly red and green.

How do we design for this?

Alt-Text (Alternative Text): This is the single most important feature for screen reader users. It's a short, invisible text description you add to an image in the code. The screen reader reads this description aloud, so the user knows what the image shows.

High Contrast Mode: The design must use colours for text and its background that are very different in brightness (e.g., black text on a white background, or yellow text on a black background). A design with light grey text on a white background is a major barrier for users with low vision.

Don't Rely on Colour Alone: Never use only colour to give information. For example, a form that shows errors by just making the box border red is inaccessible to a colour-blind user. You must also add an icon or a text label (e.g., "Error: Email is required").

Resizable Fonts: Users must be able to increase the text size in their browser without the entire website layout breaking or becoming unreadable.

Hearing Accessibility (C1.A2.1.2)

This covers a range of conditions from being hard of hearing to profound deafness. These users face barriers when information is only presented as sound.

How do we design for this?

Subtitles and Captions: All video content must have subtitles or captions.

Subtitles: A text version of the spoken dialogue.

Captions: A text version of the dialogue plus other important sounds (e.g., {phone rings}, {tense music}, {door slams}). Captions are the best choice for accessibility.

Transcripts: For any audio-only content, like a podcast, a full written transcript (a script of everything said) should be provided.

Visual Notifications: A good interface never relies only on sound to alert a user. For example, if a user makes an error and the system plays a "beep" sound, it must also show a visual notification, like a pop-up message or a red flashing icon.

In the following task, you are going to fix a website that fails on most of these points. Let's get to work...

Task Accessibility Rescue: Save the Majestic Cinema Website!

You are an Accessibility Developer. The Majestic Cinema has sent you their new webpage. It looks stylish, but it's failing all its accessibility tests! Your mission is to follow these steps to find the code that's causing the problems and fix it.

Get organised

Download this compressed folder, website.zip. It will likely save in your Downloads folder. This contains six files...

index.html: This is the webpage itself.

style.css: This is the style declaration for the website.

logo.png: The logo for the cinema.

poster.jpg: This is the poster for the film.

space-cadets-3.mp4: The trailer for the movie.

transcript.html: This is the video transcript.

Extract the zip file.

Find the folder that the extraction produced, open it and double-click

index.html

to open it in your web browser.

Open both

index.html

and

style.css

in a text editor like Notepad++

Mission 1: Fix the Missing Alt-Text (For Screen Readers)

A screen reader can't see images. We need to add

alt-text

so it can read a description aloud.

index.html

, find the logo's image tag.

Add an

alt

attribute inside the tag to describe the image

<img src="logo.png" class="logo" alt="The Majestic Cinema logo">

Now find the 'Space Cadets 3' poster image tag.

Add an

alt

attribute for this one, too:

<img src="poster.jpg" class="hero-image" alt="Film poster for Space Cadets 3">

Save

index.html

Refresh your browser to see the changes.

Mission 2: Fix the Low-Contrast Text (For Low Vision)

The stylish grey text is almost impossible for people with low vision to read. We need to increase the contrast.

style.css

, find the body style.

Change the faint grey colour from

#999999

to a dark grey colour:

#333333

;

Find the

nav a

style.

The navigation links are hard to read on the dark blue background.

Change the color from

#567a9e

to white:

#ffffff

Find the footer style. This text is also hard to read.

Change the color from

#567a9e

to a light grey colour:

#bdc3c7

Save

style.css

Go to your browser and refresh the page. See how much easier it is to read!

Mission 3: Fix the Colour-Only Indicators (For Colour Blindness)

The website uses red and green dots to show if a film is "Sold Out" or "Available." This is useless for users with red-green colour blindness. We must add text.

index.html

, find the "Also Showing" section.

Find the line for "Mystery on the Marsh".

Replace...

<p>Status: <span class="status-red"></span></p>

with this...

<p>Status: <strong class="status-text-red">(Sold Out)</strong></p>

Find the line for "Jungle Adventure".

Replace...

<p>Status: <span class="status-green"></span></p>

with this...

<p>Status: <strong class="status-text-green">(Spaces Available)</strong></p>

Now, in

style.css

, we need to style our new text. Find the now obsolete

.status-red

and

.status-green

styles and delete them.

In their place, add these new styles to make our text coloured:

.status-text-red {
  color: #e74c3c; /* Red */
}
.status-text-green {
  color: #2ecc71; /* Green */
}

Save both files and refresh your browser. Now the status is clear to all users!

Mission 4: Fix the Inaccessible Video (For Hearing Impairments)

The embedded trailer has dialogue, but no captions are turned on. This excludes users who are deaf or hard of hearing. The best we can do is add a warning and a link to a transcript.

index.html

, find the

<video>

tag for the trailer.

Directly after the closing

</video>

tag, add a new paragraph:

<p>
  (Note: This trailer may not have captions). 
  A full text transcript is available <a href="transcript.html" target="_blank">here</a>.
</p>

Save

index.html

and refresh your browser. The page now includes an accessible alternative.

Outcome: I will have edited the index.html and style.css files to fix all the major accessibility flaws. My final webpage will be high-contrast, have descriptive alt-text for images, will not rely on colour alone for information, and will provide an alternative for video content.

Today, you have learnt how to actively find and fix accessibility failures in real HTML and CSS code to make a website inclusive for users with visual and hearing impairments.

Application to the Component Sample PSA

This task was a direct, practical simulation of the skills you need for the Component 1 "Majestic Cinema" PSA.

Task 2 (Designs) & Task 3 (Prototype): The PSA brief demands that you design for 'customers with accessibility needs (e.g., ...visual or hearing impairments)'. The fixes you just applied are exactly what you'd need to do in your own prototype:

You must use high-contrast colours.

You must use alt-text for all your images (like the logo and film posters).

You must clearly label accessibility features (like subtitled screenings) with text, not just an icon.

Task 4 (Review): You will be marked on your ability to review your prototype's 'accessibility features'. By completing this task, you now know exactly what to look for. You can write in your review: "I used high-contrast text to help users with low vision" or "I added clear text labels to my navigation so a screen reader user can understand it."

Out of Lesson Learning

⭐ The Accessibility Checklist
You've just fixed the "Majestic Cinema" website. Now, you need to write a simple checklist to prevent these problems from happening again in your own PSA project. Write a simple "Accessibility Checklist" in a text document. List at least five questions you will ask yourself when you build your own prototype. (e.g., "1. Is my text colour dark enough against the background?", "2. Did I add alt-text to my logo?").

⭐⭐ Alt-Text Author
The 'Majestic Cinema' resource document lists several icons you can use, including 'Toilets', 'Wheelchair Access', and 'Popcorn'. Write the perfect alt-text for these three icons. Remember, alt-text should be descriptive and concise.

alt-text for the 'Wheelchair Access' icon:

alt-text for the 'Popcorn' icon:

alt-text for the 'Audio Description' (Speaker) icon:

⭐⭐⭐ Colour-Blind-Friendly Branding
Your style.css file from the lesson now has .status-text-red and .status-text-green to show which films are 'Sold Out' or 'Available'. This is good, but we can do even better. Relying on red/green is still a problem for some users.

In your style.css file, find your .status-text-red and .status-text-green styles.

Change the colours to be more accessible. A good combination is blue for "available" and orange or black for "sold out".

In a short paragraph, explain why using blue and orange is a better choice for accessibility than using red and green.

Last modified: November 12th, 2025