Episode

Fluent UI React Insights: Accessible by default

with Oleksandr Fediashov, Yuanbo Xue, Lingfan Gao, Sarah Higley

Fluent UI React Insights and Training

Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system. In the fifth episode, members of the Fluent UI team talk about the challenges that they face implementing accessible controls, and the high level of accessibility that Microsoft demands from its applications.

Chapters

  • 00:00 - Introduction
  • 00:41 - Color contrast requirements
  • 01:28 - Design tokens in Fluent for UI states
  • 02:00 - Contrast modes in Windows & MacOS
  • 03:15 - Animations handling
  • 03:53 - Screen readers
  • 04:35 - Structuring markup with ARIA roles
  • 05:48 - Keyboard interactions
  • 06:28 - Composite widgets
  • 07:30 - Modal dialogs
  • 07:55 - Nested focusable elements
  • 08:39 - Browser focus issues
  • 09:02 - Keyboard navigation for power users
  • 09:41 - Accessibility is not modular
  • 10:46 - Our commitment
  • 13:07 - Bloopers

HTML