Accessibility in the Pluralsight Design System

Slide 1

Slide 1 text

Accessibility In the Pluralsight Design System Jake Trent

Slide 2

Slide 2 text

Purposes of the Design System • Shared language • Cohesive UI • Increase speed and quality of work

Slide 3

Slide 3 text

Shared language • “design” language • “accessibility” language

Slide 4

Slide 4 text

Cohesive UI • Rely on the interface • Complete treatment

Slide 5

Slide 5 text

Increase speed and quality of work • Toolkit to start with • Reliable • High-quality • Focus on app

Slide 6

Slide 6 text

app, page, smart, glue components, dumb, widgets, leafs

Slide 7

Slide 7 text

App-level accessibility • Tab order • Focus management • Page layout • Landmarks • Navigation

Slide 8

Slide 8 text

Core • Color • Motion • Spacing • Typography

Slide 9

Slide 9 text

Color • Visible • Complimentary • Contrast

Slide 10

Slide 10 text

Color • Meaning • Scan-ability

Slide 11

Slide 11 text

Motion • No barf bags • Or seizures

Slide 12

Slide 12 text

Spacing • Locatable • Draw attention • Avoid distraction

Slide 13

Slide 13 text

Typography • Legible • Rhythm

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Semantics • Heading - bring your own • Button - adjusts to usage

Slide 16

Slide 16 text

Heading - bring your own semantics

Slide 17

Slide 17 text

Heading - bring your own semantics

Slide 18

Slide 18 text

Button - semantics change w/ usage

Slide 19

Slide 19 text

Button - looks the same

Slide 20

Slide 20 text

Keyboard nav • Action Menu - specialized keys; lots of setup • Tab - specialized keys, intentional use case; tab order

Slide 21

Slide 21 text

Action Menu - lots of setup

Slide 22

Slide 22 text

Tab - “app style” tablist

Slide 23

Slide 23 text

Tab - tab order

Slide 24

Slide 24 text

Focus management • Action Menu - move focus with nested components • Tab - lots of special styles for custom style • Dialog - navigation • Switch - visible focus

Slide 25

Slide 25 text

Action Menu - focus ﬂyout menus

Slide 26

Slide 26 text

Action Menu - focus ﬂyout menus

Slide 27

Slide 27 text

Tab - custom focus styles

Slide 28

Slide 28 text

Dialog - focus new onscreen element

Slide 29

Slide 29 text

Switch - make things focusable that weren’t

Slide 30

Slide 30 text

Switch - make things focusable that weren’t

Slide 31

Slide 31 text

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 difﬁcult to display • Custom look is more appealing and easily discerned

Slide 32

Slide 32 text

Drawer - (default) focus ring style

Slide 33

Slide 33 text

Tab - (custom) focus ring style

Slide 34

Slide 34 text

ARIA attributes • ARIA = “Accessible Rich Internet Applications” • Attributes to enable accessibility features for elements of HTML

Slide 35

Slide 35 text

ARIA attributes • Icon - make visuals “readable” • View Toggle - divs/buttons as radio buttons • Tab - tablist, associate content • Switch - div as checkbox

Slide 36

Slide 36 text

Icon - make visuals “readable”

Slide 37

Slide 37 text

View Toggle - create radio group w/ div

Slide 38

Slide 38 text

View Toggle - mark radio buttons active

Slide 39

Slide 39 text

View Toggle - hide visual-only elements

Slide 40

Slide 40 text

View Toggle - hide visual-only elements

Slide 41

Slide 41 text

Tab - create tablist w/ divs

Slide 42

Slide 42 text

Tab - add to tab order

Slide 43

Slide 43 text

Tab - divs as tabs; mark selected; no tabbing

Slide 44

Slide 44 text

Tab - associate content

Slide 45

Slide 45 text

Tab - associate content

Slide 46

Slide 46 text

Switch - divs as a checkbox

Slide 47

Slide 47 text

Flexible • Layout - reﬂow defaults • Row - fully ﬂexible

Slide 48

Slide 48 text

Layout - reﬂow defaults

Slide 49

Slide 49 text

Row - fully ﬂexible

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Thank you! design-system.pluralsight.com