Accessibility in the Pluralsight Design System

A presentation for Global Accessibility Awareness Day, where we were to demonstrate how our design system for the web builds with accessibility as a goal and can help product teams support these needs from the outset.

Transcript

1. Accessibility In the Pluralsight Design System Jake Trent
2. Purposes of the Design System • Shared language • Cohesive UI • Increase speed and quality of work
3. Shared language • “design” language • “accessibility” language
4. Cohesive UI • Rely on the interface • Complete treatment
5. Increase speed and quality of work • Toolkit to start with • Reliable • High-quality • Focus on app
6. app, page, smart, glue components, dumb, widgets, leafs
7. App-level accessibility • Tab order • Focus management • Page layout • Landmarks • Navigation
8. Core • Color • Motion • Spacing • Typography
9. Color • Visible • Complimentary • Contrast
10. Color • Meaning • Scan-ability
11. Motion • No barf bags • Or seizures
12. Spacing • Locatable • Draw attention • Avoid distraction
13. Typography • Legible • Rhythm
14. Components • Action Menu • Avatar • Badge • Banner • Breadcrumb • Button • Card • Circular Progress • Code • Dialog • Drawer • Icon • Layout • Link • Row • Switch • Tab • Table • Tag • Text • Theme • Tooltip • View Toggle
15. Semantics • Heading - bring your own • Button - adjusts to usage
16. Heading - bring your own semantics
17. Heading - bring your own semantics
18. Button - semantics change w/ usage
19. Button - looks the same
20. Keyboard nav • Action Menu - specialized keys; lots of setup • Tab - specialized keys, intentional use case; tab order
21. Action Menu - lots of setup
22. Tab - “app style” tablist
23. Tab - tab order
24. Focus management • Action Menu - move focus with nested components • Tab - lots of special styles for custom style • Dialog - navigation • Switch - visible focus
25. Action Menu - focus flyout menus
26. Action Menu - focus flyout menus
27. Tab - custom focus styles
28. Dialog - focus new onscreen element
29. Switch - make things focusable that weren’t
30. Switch - make things focusable that weren’t
31. Aside: Focus ring style • Focus ring meant to indicate area of focus for sighted keyboard navigator • Favor the browser default focus style — user familiarity • Sometimes customize — • Default is too unappealing • Default is difficult to display • Custom look is more appealing and easily discerned
32. Drawer - (default) focus ring style
33. Tab - (custom) focus ring style
34. ARIA attributes • ARIA = “Accessible Rich Internet Applications” • Attributes to enable accessibility features for elements of HTML
35. ARIA attributes • Icon - make visuals “readable” • View Toggle - divs/buttons as radio buttons • Tab - tablist, associate content • Switch - div as checkbox
36. Icon - make visuals “readable”
37. View Toggle - create radio group w/ div
38. View Toggle - mark radio buttons active
39. View Toggle - hide visual-only elements
40. View Toggle - hide visual-only elements
41. Tab - create tablist w/ divs
42. Tab - add to tab order
43. Tab - divs as tabs; mark selected; no tabbing
44. Tab - associate content
45. Tab - associate content
46. Switch - divs as a checkbox
47. Flexible • Layout - reflow defaults • Row - fully flexible
48. Layout - reflow defaults
49. Row - fully flexible
50. Opportunities to help improve • Action Menu - shouldFocusOnMount • Banner - ARIA live regions • Card - Action title attributes • Core - Color contrast guidelines • Site - code block focus capture; skip nav link • Testing - cross-browser, mobile browser, screenreader • Feedback
52. A good foundation • Design System is a starting point • You still have to care and be skilled in accessibility • It’s a place for us to meet, raise awareness, and contribute solutions
53. Thank you! design-system.pluralsight.com