Keyboard focus as real UI state — modals, SPAs, menus, and patterns from platform a11y guidance.

intermediate

How browsers expose roles, names, and states to assistive tech — relationship to DOM/CSS, and how to debug with DevTools.

beginner

Perceivable, Operable, Understandable, Robust — the four WCAG principles with concrete frontend examples, levels, and how to use them in reviews.

beginner

Practical keyboard QA: tab order, focus visibility, Enter/Space activation, Escape, arrows for widgets, and no keyboard traps.

beginner

Replace outline:none with :focus-visible designs that meet non-text contrast and stay out of the way of mouse users.

beginner

Add skip links so keyboard users bypass repetitive nav — placement, focus styles, target main, and SPA considerations.

beginner

What ARIA roles do, first rule of ARIA, landmark/widget/document roles, and when native HTML already provides the role.

intermediate

aria-label, aria-labelledby, and aria-describedby — when to use each, how they combine, and mistakes that silence or double-announce UI.

intermediate

Announce dynamic updates with aria-live polite/assertive, role=status/alert, and patterns for toasts, validation, and async results.

intermediate

Label inputs, associate errors with fields, announce failures, and avoid placeholder-only forms that break accessibility.

beginner

Modal dialogs that work: focus trap, Escape, return focus, aria-modal, and why native dialog or APG patterns beat div soup.

intermediate

APG tabs with tablist/tab/tabpanel, arrow key navigation, aria-selected, and focus management without losing the active panel.

intermediate

APG menu and menubar keyboard model — arrow navigation, escape to close, aria-expanded, and when a disclosure is enough.

advanced

Build or evaluate comboboxes with APG keyboard behavior, aria-expanded/activedescendant, and filterable listbox pairing.

advanced

WCAG contrast ratios for text and UI components, large text thresholds, tools to measure, and design-token strategies that stay compliant.

beginner

WCAG use of color — convey status with text, icons, and patterns so color-blind and low-vision users aren’t locked out.

beginner

Honor prefers-reduced-motion for vestibular safety — CSS media queries, JS animation guards, and what to reduce vs remove.

beginner

Get started with VoiceOver, NVDA, and TalkBack — what to listen for, a smoke-test script, and how SR testing pairs with the a11y tree.

intermediate

How browsers compute accessible names from content, labels, aria-label, and labelledby — and how that powers Testing Library queries.

advanced

Use one h1 and nested h2–h6 as a document outline — skip levels carefully, don’t style divs as headings, and help SR navigation.

beginner

Data tables vs layout tables — th scope, captions, headers, responsive strategies, and when to use grids instead.

intermediate

Decorative vs informative SVG icons — aria-hidden, title/desc, role=img, and pairing icons with accessible names on controls.

intermediate

Make controls easy to tap — WCAG target size guidance, 44×44 CSS px heuristics, spacing, and icon-button layout tips.

beginner

Set html lang, mark language changes, and keep unique descriptive document titles — SPA updates included.

beginner

What axe-core catches reliably, the large WCAG surface it cannot, and how to combine automation with manual keyboard and SR testing.

intermediate

Write errors that identify the field, explain how to fix it, avoid blame, and work with screen readers and internationalization.

beginner