Target Audience:

Who should attend

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

• UI/UX designers and content designers writing microcopy

• Design-system contributors and tech leads

Learning Outcomes

• Apply WCAG 2.2 AA to everyday UI without overusing ARIA.

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

• Style focus, states, and errors; design with tokens (color/typography/spacing/motion).

• Handle responsive/mobile-web needs: touch targets, orientation/zoom, gestures, small-screen patterns.

• Respect user preferences: prefers-reduced-motion, prefers-contrast, prefers-color-scheme.

• Write inclusive content and microcopy; structure pages for semantic SEO.

• Produce lightweight documentation: 'dos & don’ts,' accessibility notes, and acceptance criteria (no CI).

Day 1 — Foundations (Semantics over ARIA)

Module 1: WCAG 2.2 AA in practice

• POUR; what’s new in 2.2 (focus appearance, target size, dragging, redundant entry).

• Keyboard access, focus order, visible focus, error prevention.

Module 2: Semantic layout

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

• Media alternatives (alt text, transcripts, captions).

Module 3: ARIA—use sparingly

• Name/role/value; when ARIA helps vs hurts; common anti-patterns to avoid.

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

Module 4: Form building blocks

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

• Authentication and verification flows compliant with WCAG 2.2.

Module 5: Inputs at scale

• Dates/number/phone, i18n/RTL, autocomplete, masking, live validation without noise.

• Error language and microcopy that reduces cognitive load.

Day 3 — Navigation & SPA Patterns

Module 6: Global & local navigation

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

Module 7: SPA/Router concerns (framework-agnostic)

• Managing focus on route change; dynamic page titles; announcements without ARIA spam.

• Deep linking; skip to main/content sections.

Module 8: Overlays done right

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

Day 4 — Data Displays, Tables & Visualizations

Module 9: Tables & data density

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

Module 10: Charts, SVG & canvas

• Text alternatives, descriptions, legends, color-independence; fallback strategies.

Module 11: Maps & complex UI hints

• Regions; announcements for updates; keyboard panning/zooming patterns.

Day 5 — Design Tokens, Theming & States

Module 12: Color & contrast tokens

• Building palettes that meet contrast; dark mode; forced colors considerations.

Module 13: Typography/spacing/focus

• Scales, line length, touch targets; custom focus indicators that are visible and elegant.

Module 14: Motion & feedback

• prefers-reduced-motion; safe animations; skeletons/shimmers; progress/alerts/toasts.

Day 6 — Mobile-Web Accessibility (Front-End)

Module 15: Small-screen patterns

• Hit targets; gesture alternatives; orientation/zoom; virtual keyboard ergonomics.

Module 16: Touch, hover, and pointer parity

• Designing components that work with mouse, touch, and keyboard equivalently.

Module 17: Performance & readability

• Perceived performance; content loading strategies that don’t break screen readers or focus.

Day 7 — Inclusive UX, SEO & Documentation

Module 18: Inclusive content & microcopy

• Plain language; error messages; forms help text; cognitive load reduction.

Module 19: Semantic SEO wins

• Headings strategy; link strategy; meaningful structure that benefits both users and search.

Module 20: Lightweight docs & handoff

• Component dos & don’ts; accessibility notes; acceptance criteria; designer–dev checklist.

• Mini-capstone: ship a small component set + one page template, verified with keyboard and a screen reader (no tooling).

or contact janice@marcnzed.com or call Janice at +6019 470 3904