Fluent UI React Insights: Accessible by default

From the creator

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. 🔗 Links: https://github.com/microsoft/fluentui https://react.fluentui.dev/ 📚 Chapters: 00:00 – Introduction 00:41 – Color constrast 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 💡 References: #1 https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html – Constrast requirements #2 https://accessibilityinsights.io/ – Accessibility Insights tool #3 https://developer.mozilla.org/en-US/docs/Web/CSS/system-color – System Colors in CSS #4 https://www.w3.org/TR/html-aria/ – ARIA roles in HTML #5 https://www.w3.org/WAI/ARIA/apg/patterns/ – ARIA patterns for composite widgets

Published 2023-08-15 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.