$30 off During Our Annual Pro Sale. View Details »

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.

Jake Trent

May 17, 2018
Tweet

More Decks by Jake Trent

Other Decks in Technology

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