Screen Reader Compatibility

Introduction

Screen readers turn an interface into speech or braille, but they can only convey what the underlying code actually communicates. A heading that is merely large, bold text is just text to a screen reader; a heading marked up as a heading becomes a navigable structure a user can jump through. This topic looks at the layer beneath the visual design — semantic HTML elements, landmark roles, ARIA labels and descriptions, text alternatives for images and media, and announcements for content that changes after page load.

This matters in CEN3722 because interface design is not finished when it looks right. A prototype that passes a visual review can still be unusable for someone who is blind or has low vision if its structure is invisible to assistive technology. Learning to think in terms of roles, names, states, and reading order gives you a vocabulary for evaluating and repairing interfaces, and connects directly to WCAG success criteria you will apply later in the module.

The three videos below come from the same accessibility instructor and are best watched in order. As you watch, pay attention to one recurring theme: ARIA supplements semantic HTML, it does not replace it. Note which native HTML elements already carry accessibility information for free, when an ARIA attribute is genuinely needed, and how incorrect ARIA can make an interface worse than no ARIA at all. Keep a running list of the specific elements and attributes mentioned so you can check for them in your own prototypes.

Video 1: Semantic HTML & Accessibility (Updated)

Stefany Newman - Accessibility Instructor · 10:28 · 11,540 views · 5y ago · captions — Watch on YouTube

About this video

An updated introduction to semantic HTML, explaining how choosing elements for their meaning rather than their appearance reinforces the structure of page content. Based on its description, it covers the difference between elements that convey meaning and those that only affect presentation, and why that distinction matters for assistive technology. Expect examples of common semantic elements and headings used to build a navigable document structure.

Why this video

It directly supports the Semantic HTML subtopic and establishes the foundation the other two videos build on, from an instructor who specializes in accessibility teaching.

Video 2: What are ARIA Landmarks?

Stefany Newman - Accessibility Instructor · 11:43 · 12,010 views · 5y ago · captions — Watch on YouTube

About this video

This video focuses on ARIA landmarks — the attributes and roles that mark out regions of a page such as navigation, main content, and complementary areas. It introduces WAI-ARIA as a set of attributes added to HTML and explains the role landmarks play in letting screen reader users move quickly between major sections. Expect discussion of which landmarks exist and how they map onto page regions.

Why this video

It covers the Landmark Roles subtopic specifically, showing how structural navigation works in practice rather than treating accessibility as a checklist item.

Video 3: What is WAI-ARIA?

Stefany Newman - Accessibility Instructor · 13:18 · 7,882 views · 4y ago · captions — Watch on YouTube

About this video

A broader explanation of what WAI-ARIA is and how it relates to native HTML. The description makes clear the central point: ARIA only helps when used correctly and can never replace semantic HTML, so the video addresses why and when ARIA is appropriate. This is the natural place to encounter ARIA attributes used for naming and describing elements.

Why this video

It frames the ARIA Labels and Descriptions subtopic with the correct caution about misuse, which is essential before students start adding ARIA to their own prototypes.

How These Videos Support the Learning Outcomes

Together these videos give students the technical grounding needed to recognize WCAG-related requirements around structure, name, role, and value (MO1) and to inspect an existing interface for barriers that affect users of screen readers (MO2). The emphasis on correct semantic markup and the appropriate, limited use of ARIA gives students concrete changes they can make when revising interface prototypes for accessibility (MO3). By showing how much of a page's meaning is invisible unless it is coded deliberately, the videos also make tangible the consequences of exclusion for blind and low-vision users, supporting reflection on the ethical and legal responsibilities of designers (MO4). Note that the videos concentrate on semantics, landmarks, and ARIA; you should supplement them with course readings on image and media alternatives and on live regions for dynamic content.

About These Videos

These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.