All our courses are HRDC claimable!
7 DAYS | TRAINING PROGRAMME
ONLINE OR FACE-TO-FACE TRAINING
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).
DURATION : 7 DAYS
NOTE: Based on the client's request, this course can be tailor-made for the client's industry/field. Bespoke (along with general) examples will be used to ensure trainees will be able to apply their knowledge immediately for their company benefits.
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
Upon successful completion of the course, participants will be awarded a verified certificate by
Marc & Zed or/and Universiti Kuala Lumpur (UniKL)