Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility in the Pluralsight Design System

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.

510e0501c737af4df361f945fc295f63?s=128

Jake Trent

May 17, 2018
Tweet

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
  51. None
  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