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

Fluent UI React Trainings: Accessibility basics

Microsoft Developer
589K subscribers
<__slot-el>
<__slot-el>
1.3K views 1 year ago
Dive into accessibility mastery with Fluent UI's training video! 📹 Explore case studies and discover invaluable resources to solidify your foundation in inclusive design. Elevate your skills and create digital experiences that resonate with every user. Watch now and transform your approach to UI! 📚 Chapters: 00:00 - Intro 00:11 - Accessibility is hard 00:45 - WAI resources 01:54 - Accessibility insights 02:27 - Colour contrast 03:01 - Colour contrast and tokens 04:17 - Accessible label 05:15 - Case study: Icon buttons 05:55 - Focus management 06:55 - Case study - Menu 07:42 - Build a foundation 09:06 - Outro and shameless video advertising 📝 Examples: #1 Contrast examples https://stackblitz.com/edit/stackblit... #2 ARIA labeling examples https://stackblitz.com/edit/stackblit... 💡 References: #1 Fluent UI React Insights: Accessible by default    • Fluent UI React Insights: Accessible ...   #2 ARIA Authoring Practices Guide (APG) https://www.w3.org/WAI/ARIA/apg/ #3 Accessibility Insights https://accessibilityinsights.io/ ...more
...more
Fluent UI React Trainings: Accessibility basics
44Likes
1,376Views
2024Mar 25
Dive into accessibility mastery with Fluent UI's training video! 📹 Explore case studies and discover invaluable resources to solidify your foundation in inclusive design. Elevate your skills and create digital experiences that resonate with every user. Watch now and transform your approach to UI! 📚 Chapters: 00:00 - Intro 00:11 - Accessibility is hard 00:45 - WAI resources 01:54 - Accessibility insights 02:27 - Colour contrast 03:01 - Colour contrast and tokens 04:17 - Accessible label 05:15 - Case study: Icon buttons 05:55 - Focus management 06:55 - Case study - Menu 07:42 - Build a foundation 09:06 - Outro and shameless video advertising 📝 Examples: #1 Contrast examples https://stackblitz.com/edit/stackblit... #2 ARIA labeling examples https://stackblitz.com/edit/stackblit... 💡 References: #1 Fluent UI React Insights: Accessible by default    • Fluent UI React Insights: Accessible ...   #2 ARIA Authoring Practices Guide (APG) https://www.w3.org/WAI/ARIA/apg/ #3 Accessibility Insights https://accessibilityinsights.io/

Follow along using the transcript.

Microsoft Developer

589K subscribers