Finding accessibility problems is only half the work. This topic is about the other half: turning audit findings into concrete design corrections and then standardizing those corrections as reusable patterns. Instead of fixing one broken form or one trapped modal at a time, you build a small library of components — form fields, navigation, dialogs, tables and charts — that are accessible by default, so the same defect does not reappear on the next screen.
The subtopics move through the component types that generate the most accessibility complaints. Forms need programmatic labels, grouping, and error messaging that assistive technology can announce. Navigation needs predictable structure, skip links, and keyboard reachability. Modals and overlays need focus management, correct roles, and a reliable way to dismiss them. Data displays — tables and charts — need structure and text alternatives so information is not locked inside visual layout alone. Finally, these fixes need a home in your design workflow so accessibility is checked each iteration rather than bolted on at the end.
The three videos below are short, hands-on walkthroughs of three of these component families. While watching, pay attention to the distinction between what is visible and what is programmatically exposed: a label you can see is not the same as a label a screen reader can read. Note also which techniques rely on native HTML semantics and which require ARIA plus JavaScript, and keep track of the keyboard behavior being demonstrated so you can reuse it as a checklist when you revise your own prototypes.
A step-by-step walkthrough of making HTML form elements accessible, covering the markup and attribute choices that connect visible labels, inputs, and supporting text so assistive technology can interpret them. Based on its title and framing as part of a web accessibility series, expect coverage of labeling techniques, form structure, and common markup mistakes that break screen reader output. At roughly sixteen minutes, it is a practical code-level treatment rather than a conceptual overview.
Forms are the single most common source of accessibility defects in student prototypes, and this video maps directly to the Designing Accessible Form Components subtopic with concrete, reusable markup patterns you can carry into your own component library.
Revisit this modal walkthrough when you reach the iteration subtopic, since dialog behavior is one of the easiest things to regress as a design changes. Pay particular attention to the sequence of focus moves demonstrated, which you can convert into a repeatable manual test step.
Using the same demonstration as a test script supports the Iterating on Accessibility in Design Workflows subtopic by turning a one-time fix into a recurring check.
A short, focused look at making data tables accessible, likely covering table structure elements such as headers, captions, and the relationships that let a screen reader announce which cell belongs to which row and column. The compact runtime suggests a tight demonstration of the core markup rather than an exhaustive treatment of complex table cases.
Tabular data is the foundation of the Accessible Data Visualization subtopic — before charts can be made accessible, the underlying data structure must be readable — and this video shows the semantic pattern you can reuse wherever data is displayed.
Together these videos move the module from recognition to repair. They put WCAG-aligned techniques for labeling, focus management, and data structure into practice (MO1) and show the specific barriers — unlabeled inputs, lost keyboard focus, structurally meaningless tables — that an audit of visual, motor, and cognitive access would surface (MO2). Most directly, each is a demonstration of modifying markup and behavior so a prototype meets accessibility standards, which is the core of applying inclusive design principles to real components (MO3). Seeing how small implementation choices determine whether a user can complete a form or escape a dialog also makes the human cost of exclusion concrete, supporting your ability to articulate the ethical and legal stakes of these decisions (MO4).
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.