Learn how to test a web page for accessibility: automated tools, a five-minute keyboard and zoom check, screen reader checks, and testing with real people. Understand what automation can and cannot catch, how to report and fix problems, and how to keep them from coming back. Includes a manual test plan lab, a what-can-a-tool-catch quiz, and a live mini page auditor.
Learn how to build buttons that work for everyone: use the real button element, set the type, name icon buttons, make toggle and disclosure buttons with aria-pressed and aria-expanded, handle disabled and loading states, and avoid fake buttons made from div and span. Includes a toggle lab, a disabled-button lab, and a live button checker.
Learn how to build forms that everyone can complete: visible labels, fieldset and legend, hints and required fields with aria-describedby, the right input types and autocomplete, clear error messages, sensible validation timing, and safe, accessible sign-in. Includes a live field builder, a validation timing lab, and a form checker.
Learn how to build accessible HTML forms: visible labels, grouping with fieldset and legend, hints and instructions, marking required fields, clear error messages with aria-invalid and aria-describedby, autocomplete, keyboard and focus, touch target size, WCAG 2.2 rules for forms, redundant entry and accessible authentication, and a practical testing checklist.
Learn how to build links that everyone can understand and use: meaningful link text, links versus buttons, keyboard and focus, visual styling, links that open new tabs, file and email links, and safe external links. Includes a links-list lab, a link builder, and a live link checker.
Learn what an accessible name is, where browsers get it from (aria-labelledby, aria-label, labels, alt text, content, title), how to write good names, and why the visible label must be part of the name. Includes a live name calculator, a page name audit, and a short drill.
Learn how to build data tables that work for screen reader and keyboard users: when to use a table, captions, th and scope, complex tables, empty cells, sortable columns, buttons and checkboxes in rows, and scrollable wide tables. Includes a table reader lab, a scrolling region lab, and a live table checker.
Learn how to write good alt text: the five kinds of images (informative, decorative, functional, images of text, complex), how to decide which one you have, how to write short, useful descriptions, and how to handle links, charts, SVG, and figures. Includes a decision guide, an alt text writing practice lab, and a live alt text checker.
Learn how aria-describedby adds extra help to a control: form hints and errors, warnings on buttons, dialog text, and accessible tooltips. Understand the difference between a name and a description, why descriptions can be missed, and how to keep them accurate. Includes a description builder lab, a tooltip lab for WCAG 1.4.13, and a live aria-describedby checker.
Learn what aria-hidden really does, when it is safe, and when it quietly breaks your page. Compare hidden, display none, visibility hidden, aria-hidden, inert, and visually hidden text. Never put aria-hidden on something focusable. Includes a hiding-methods lab with real focus tests, a modal background lab, and a live aria-hidden checker.
Learn when and how to use aria-label: naming icon-only buttons, search fields, repeated landmarks, and SVG images; when not to use it (elements that cannot be named, visible text that already works); the Label in Name rule; and how to write short, unique, translatable labels. Includes a name override lab, a label writing practice, and a live aria-label audit.
Learn how aria-labelledby names an element from text that is already on the page: naming dialogs and sections from their headings, building names from several pieces, making repeated buttons unique, how hidden text and self-reference work, and why unique ids matter. Includes a name builder lab, a duplicate id lab, and a live aria-labelledby checker.
Learn how aria-live and live region roles announce changes to screen reader users without moving focus: status messages, errors, search results, chat, and timers. Understand polite versus assertive, aria-atomic, aria-relevant, and why a live region must exist before it changes. Includes a live region lab with real regions, an atomic lab, and a live aria-live checker.
Learn what ARIA roles are, how native HTML elements already have them, and which roles are worth knowing: landmark, widget, live region, and structure roles. Includes a searchable role explorer, a landmark lab that shows what a screen reader's landmark list looks like, and a live roles lab for status, alert, and log.
Learn the difference between ARIA states and properties, the kinds of values they take, and the most useful ones: aria-expanded, aria-pressed, aria-checked, aria-selected, aria-current, aria-disabled, aria-invalid, aria-busy, and aria-controls. Includes a state sync lab that shows what goes wrong when state is not updated, a value tester, and a lab for aria-current and aria-busy.
Learn how to move keyboard focus on purpose: how focus() and document.activeElement work, when to move focus (dialogs, deleted items, form errors, page changes), how to return focus, and how to avoid stealing it. Includes three live labs: a delete-and-lose-focus lab, a dialog focus lab, and a form error summary lab.
Start learning web accessibility: why it matters, who it helps, the four WCAG principles (perceivable, operable, understandable, robust), and a map of every lesson in this section. Includes a live experience simulator, a contrast checker, and a short drill that sorts real barriers into the four principles.
Learn what web accessibility (a11y) means, why it matters for people, law, business and quality, the common myths, and the one idea that explains everything: the accessibility tree. Includes a live keyboard test of fake and real buttons, a simplified accessibility tree viewer, and a ten-minute self-audit.
Learn what ARIA is and when to use it: roles, properties and states, the five rules of ARIA, why native HTML comes first, what ARIA can and cannot do, and how to check it. Includes a lab that shows ARIA changes meaning but not behaviour, a 'do I need ARIA?' guide, and a live ARIA checker.
Learn how to make every part of a web page work with a keyboard: which elements are focusable, how tabindex and focus order work, how to style focus with :focus-visible, how to avoid keyboard traps, and how arrow keys and roving tabindex work in custom widgets. Includes a live focus-order lab, a focus-style test, and a roving toolbar.
Learn what screen readers are, how they turn HTML into speech and braille, which ones people use, what they announce for headings, links, buttons, forms and images, and how to try one yourself. Includes a live reader that speaks a page using your browser's built-in speech, and a drill that matches code to what is announced.
Learn how semantic HTML makes pages accessible: heading outlines, landmarks, lists, buttons versus links, skip links, reading order, and visually hidden text. Includes a live structure navigator that shows what a screen reader user can jump between, and a real skip-link focus test.
Learn the Web Content Accessibility Guidelines (WCAG): the four principles, the three conformance levels A, AA and AAA, how success criteria work, the rules beginners meet most, and what is new in WCAG 2.2. Includes a searchable success-criteria explorer, a live text-spacing test, and a level drill.