Web Accessibility Training – Designing for Screen Reader Users

Module 2 – Blindness

Designing for Screen Reader Users (1 Hour)

Chapter : Blindness
Designing for screen readers and non-visual access

• Course: Web Accessibility in Practice
• Focus: How blind users perceive, navigate, and interact with the web

Section 1 – Why Blindness Matters on the Web (5 minutes)

Key points :

• ~40 million people worldwide are blind
• Many more have severe visual impairments
• Blind users access the web without visual information
• Exclusion leads to:
  • Loss of independence
  • Legal risk
  • Poor user experience

Core message:

Blindness is not the barrier — inaccessible websites are.

Section 2 – How Blind Users Use the Web (5 minutes)

Blind users primarily rely on:

• Screen readers
• Audio output or braille displays
• Keyboard navigation

Important insight:

• Designing for blindness today means designing for screen readers
• Screen readers are highly capable — failures are usually developer failures

Section 3 – Screen Reader Software Overview (6 minutes)

Introduce the major screen readers mentioned in the chapter:

• JAWS
• NVDA
• VoiceOver
• Narrator

Key teaching point:

• Over 90% of screen reader users are blind or visually impaired
• 85% say the biggest improvement would be more accessible websites, not better tools

Section 4 – Where Responsibility Lies (4 minutes)

Emphasise the chapter’s position:

• Screen readers already work well
• Users are largely satisfied with assistive technology
• Accessibility failures happen when:
  • Content is poorly structured
  • Semantics are missing or incorrect

Quote-worthy idea:

Accessibility is not something assistive technology should “fix”.

Section 5 – The Three Core Needs (6 minutes)

Introduce the chapter’s framework:

Blind users must be able to:

1. Perceive content
2. Navigate content
3. Interact with content

Explain:

• This is a waterfall
• Interaction is impossible without navigation
• Navigation is impossible without perception

Section 6 – Understanding the Accessibility Tree (8 minutes)

Explain conceptually (no deep code required):

• Web pages create a DOM tree
• Screen readers use a separate accessibility tree
• Decorative elements are ignored
• Meaningful elements are exposed

Teaching emphasis:

• Screen readers don’t “read the page”
• They read what the accessibility tree exposes

Section 7 – What Screen Readers Announce (7 minutes)

Each accessible element exposes four things:

1. Role – what it is (button, link, heading)
2. Name – what it’s called
3. Description – extra context (if needed)
4. State – current condition (disabled, checked, etc.)

Key insight:

If any of these are missing or wrong, the experience breaks.

Section 8 – Native HTML Is Your Best Tool (7 minutes)

From the chapter’s emphasis:

• Native elements come with built-in accessibility
  • <button>
  • <a>
  • <input>
  • <img>

Benefits:

• Automatically recognised by screen readers
• Keyboard accessible by default
• Correctly exposed in the accessibility tree

Section 9 – The Danger of Custom Components (6 minutes)

Explain the common failure:

• Visual components built with non-semantic elements
• Example:
  • A <span> styled to look like a button
• Screen readers:
  • Can’t identify role
  • Can’t focus
  • Can’t interact

Core lesson:

If it looks like a button but isn’t one, it’s broken.

Section 10 – Perception, Navigation, Interaction in Practice (5 minutes)

Bring it together:

• Perceive: Is meaningful content exposed?
• Navigate: Can users move logically through headings, links, and controls?
• Interact: Can users activate controls using keyboard and screen reader?

Tie back to:

• Lawsuits referenced in the chapter
• Real user impact

Section 11 – Key Takeaways & Close (4 minutes)

Summary of core truths:

• Blind users rely on structure, not visuals
• Screen readers depend on semantic HTML
• Native elements are accessibility by default
• Accessibility failures are usually design and development decisions

“If users can hear and understand your content, can they also see it clearly?”

Chapter – Blindness Quiz

Instructions:
Answer all questions. Choose the best answer where applicable.

1. What primary technology do blind users use to access the web?

A. Magnification tools
B. Screen readers
C. Voice assistants
D. AI chatbots

2. According to Chapter 2, who holds the main responsibility for accessibility failures?

A. Screen reader vendors
B. Browser manufacturers
C. Users with disabilities
D. Website designers and developers

3. Which structure does a screen reader primarily rely on to read a webpage?

A. Visual layout
B. CSS styles
C. Accessibility tree
D. Image layers

4. Which of the following is NOT one of the four pieces of information exposed in the accessibility tree?

A. Role
B. Name
C. Colour
D. State

5. Why are native HTML elements important for screen reader users?

A. They look better visually
B. They load faster
C. They have built-in accessibility support
D. They require less CSS

6. True or False:

A visually styled <span> can fully replace a <button> for accessibility.

Correct answer: False

7. Arrange these in the correct order according to Chapter 2:

• Interact
• Perceive
• Navigate

8. What happens when a control has no accessible name?

A. Screen readers guess the name
B. The element is ignored or confusing
C. The browser fixes it automatically
D. Nothing happens