Sign in to confirm you’re not a bot
This helps protect our community. Learn more

Fluent UI React Insights: Accessible by default

Microsoft Developer
588K subscribers
<__slot-el>
<__slot-el>
2.9K views 1 year ago
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/U …...more
...more
Fluent UI React Insights: Accessible by default
52Likes
2,902Views
2023Aug 15
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/Underst... – Constrast requirements #2 https://accessibilityinsights.io/ – Accessibility Insights tool #3 https://developer.mozilla.org/en-US/d... – System Colors in CSS #4 https://www.w3.org/TR/html-aria/ – ARIA roles in HTML #5 https://www.w3.org/WAI/ARIA/apg/patte... – ARIA patterns for composite widgets

Follow along using the transcript.

Microsoft Developer

588K subscribers