Accessibility Engineering
Accessibility as a quality dimension, not an afterthought. WCAG, the accessibility tree, semantic HTML, ARIA, keyboard navigation, focus management, and building inclusive UIs.
Why accessibility matters for everyone, the POUR principles behind WCAG, conformance levels, assistive technologies, and the curb-cut effect that makes accessible products better products.
How browsers build a parallel tree from the DOM that assistive technologies actually read. Role, name, state, value — and the CSS properties that silently remove elements from it.
The first rule of ARIA is don't use ARIA — unless you have to. Learn when native HTML handles accessibility for free, when ARIA is genuinely necessary, and how to avoid the most common mistakes that make your UI less accessible than doing nothing.
How screen readers navigate pages using landmark regions and heading levels. Master the semantic HTML structure that makes your sites usable by everyone — and scores perfectly in accessibility audits.
Build forms that every user can complete. Label association, required field patterns, error message linking with aria-describedby, validation timing, error summaries, and focus management on submission errors.
How ARIA roles map to the accessibility tree, which states and properties actually matter, and how live regions announce dynamic content to screen readers.
How keyboard navigation actually works in browsers — tab order, tabindex, focus management, roving tabindex, skip links, and keyboard patterns for composite widgets.
Why single-page apps break focus for keyboard and screen reader users, and how to fix it with route-level focus, aria-live announcements, modal trapping, and useRef in React.
How to keep keyboard focus exactly where it belongs. Focus traps keep users inside modals and dialogs, while the inert attribute nukes everything behind them from the tab order AND the accessibility tree.
How to build tabs, accordions, comboboxes, tooltips, and carousels that work for everyone — using WAI-ARIA Authoring Practices as your blueprint.
12 real-world accessibility challenges. Spot the barriers in code snippets covering labels, keyboard support, color, ARIA, focus management, and more. If you can catch all 12, you think like an accessibility engineer.