Skip to content
Motif
All tracks

Track 8

Accessibility & inclusive design

Semantics, keyboard and focus, contrast, reduced motion, and designing for difference.

  1. Lesson 1:
    Intermediate18 min

    The dropdown taxonomy

    Every dropdown is really one of ten patterns — native select, listbox, combobox, multiselect, and more. Learn each ARIA contract and when to reach for it.

  2. Lesson 2:
    Intermediate16 min

    Fieldsets, legends & grouping

    Use fieldset and legend to give related controls a shared accessible name — and learn when grouping helps, when it hurts, and the ARIA fallback.

  3. Lesson 3:
    Intermediate16 min

    Keyboard navigation

    Every interaction must work from the keyboard alone. Learn tab order, the roving tabindex pattern for composite widgets, and the keys users expect.

  4. Lesson 4:
    Intermediate16 min

    Focus management

    When UI appears or moves, focus has to follow. Learn to move focus into a dialog, trap it while open, restore it on close, and always keep it visible.

  5. Lesson 5:
    Intermediate14 min

    Live regions

    When content changes without a page load, a screen reader only knows if you tell it. Learn aria-live, polite vs assertive, and the rules that make it work.

  6. Lesson 6:
    Beginner10 min

    Designing for reduced motion

    prefers-reduced-motion lets motion-sensitive users opt out of large animation. Reduce or replace the motion — keep the feedback — don't strip it all.

  7. Lesson 7:
    Intermediate13 min

    Accessible form validation

    Forgiving, accessible validation: check at the right moment, tie plain-language errors to fields with aria, summarize them — never signal by color alone.