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.

Jake Trent

May 17, 2018
Tweet

More Decks by Jake Trent

Other Decks in Technology

Transcript

  1. Purposes of the Design System • Shared language • Cohesive

    UI • Increase speed and quality of work
  2. Increase speed and quality of work • Toolkit to start

    with • Reliable • High-quality • Focus on app
  3. 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
  4. Keyboard nav • Action Menu - specialized keys; lots of

    setup • Tab - specialized keys, intentional use case; tab order
  5. Focus management • Action Menu - move focus with nested

    components • Tab - lots of special styles for custom style • Dialog - navigation • Switch - visible focus
  6. 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
  7. ARIA attributes • ARIA = “Accessible Rich Internet Applications” •

    Attributes to enable accessibility features for elements of HTML
  8. ARIA attributes • Icon - make visuals “readable” • View

    Toggle - divs/buttons as radio buttons • Tab - tablist, associate content • Switch - div as checkbox
  9. 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
  10. 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