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 make HTML lists accessible to everyone. Understand how screen readers announce lists, why real list markup matters, how to label lists, keep list semantics when removing bullets, build accessible navigation, breadcrumbs, and checklists, and test your lists on CodeHarborHub.
Learn how to build accessible HTML tables. Understand how screen readers navigate tables, use captions, th and scope, the headers and id attributes for complex tables, sortable headers with aria-sort, scrollable regions, layout table pitfalls, and how to test tables on CodeHarborHub.
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 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.
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 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.