Front End Accessibility

Introduction

A 5-day, hands-on Front-End Accessibility program focused on building production-ready, WCAG 2.2 AA–compliant web UI. You’ll use semantic HTML with minimal ARIA, design accessible components and page structures, respect user preferences (reduced motion, contrast, color scheme), and apply inclusive content and semantic SEO.

Who should attend

• Front-end engineers (HTML/CSS/JS; React/Angular/Vue)

• UI/UX designers and content designers writing microcopy

• Design-system contributors, tech leads, and product owners for web

Learning Objectives

• Apply WCAG 2.2 AA to everyday UI (focus, target size, dragging, consistent help, redundant entry, accessible auth).

• Structure pages with landmarks, headings, lists, tables, and meaningful link text; use

semantics before ARIA.

• Build accessible navigation, dialogs, menus, tabs, accordions, tooltips, forms, tables, and

charts.

• Style focus states, errors, and status messaging; design with tokens

(color/typography/spacing/motion).

• Handle responsive/mobile-web: touch targets, gesture alternatives, zoom/orientation,

small-screen patterns.

• Write inclusive content & microcopy and understand semantic SEO implications.

• Produce lightweight handoff docs (dos & don’ts, accessibility notes, acceptance criteria)

without CI tooling.

COURSE OUTLINE

Day 1 — Foundations: WCAG 2.2, Semantics & ARIA-Lite

Module 1: WCAG 2.2 AA in practice

• POUR principles; what’s new in 2.2 (focus appearance/not-obscured, target size, dragging movements, consistent help, redundant entry, accessible authentication).

• Practical heuristics: keyboard access, focus order, visible focus, error prevention.

Module 2: Semantic layout & structure

• Landmarks, headings, lists, page outline, skip links; meaningful link text.

• Images/media: alt text, transcripts, captions; decorative vs informative assets.

Module 3: ARIA—use sparingly

• Name/role/value model; when ARIA helps vs hurts; common anti-patterns (e.g., div-

buttons).

• Native controls and progressive enhancement.

Day 2 — Forms & Validation (Real-World Flows)

Module 4: Form building blocks

• Labels, descriptions, help, grouping; required/optional; inline vs summary errors.

• Accessible authentication & verification flows (2.2-aligned).

Module 5: Inputs at scale & i18n

• Dates/numbers/phone, autocomplete, masking without screen reader noise; RTL

considerations.

• Live validation that’s perceivable, operable, and understandable.

Module 6: Error language & microcopy

• Plain language patterns; preventing cognitive overload; success, warning, and error states.

Day 3 — Navigation, Overlays & SPA Patterns

Module 7: Navigation & orientation

• Global vs local nav, breadcrumbs, tabs, accordions; button vs link rules; responsive nav.

Module 8: Overlays done right

• Modals/dialogs/popovers/tooltips; focus trap, inert backgrounds, escape routes.

Module 9: SPA concerns (framework-agnostic)

• Managing focus on route change; dynamic titles; announcing updates without ARIA spam.

• Deep linking and skip-to-content patterns; reduced-motion route transitions.

Day 4 — Data Displays, Tokens & Motion

Module 10: Tables & dense data

• Headers, scope/ids, sort/paginate; responsive strategies (stack/scroll/expand).

• Empty states, loading, and status announcements.

Module 11: Charts, SVG & canvas

• Text alternatives, descriptions, legends, color-independence; practical fallbacks.• Keyboard access patterns for interactive graphics (where applicable).

Module 12: Design tokens & theming

• Contrast-safe color palettes (including dark/forced colors), typography & spacing scales.

• Focus indicators that are visible and elegant; state styling (hover/active/disabled).

• Motion & feedback: prefers-reduced-motion, safe animations, skeletons/shimmers,

progress/toasts.

Day 5 — Mobile-Web, Performance, SEO & Mini-Capstone

Module 13: Mobile-web accessibility

• Touch targets, gesture alternatives, orientation/zoom, virtual keyboard ergonomics.

• Pointer/hover parity across mouse, touch, and keyboard.

Module 14: Performance & readability

• Perceived performance; lazy loading, content shifts, and focus management; accessible loading patterns.

• Avoiding screen reader traps during async updates.

Module 15: Inclusive content & semantic SEO

• Headings and link strategy; meaningful structure; media/text alternatives benefiting search.

• Writing for comprehension and localization readiness.

Module 16: Mini-capstone & handoff

• Build/retrofit a small component set plus one page template.

• Verify keyboard & screen reader behavior, then produce lightweight dos & don’ts,

accessibility notes, and acceptance criteria for handoff.