Slide 1

Slide 1 text

  ACCESSIBILITY IN DESIGN SYSTEMS  WORKING PRODUCTS APRIL 24. 2024 @BENNOLOEWENBERG

Slide 2

Slide 2 text

“We’re all just temporarily abled.” Source: Cindy Li @BennoLoewenberg

Slide 3

Slide 3 text

Source: Burnsitoun Comedy Show – “Eleven” Scottish Elevator @BennoLoewenberg   No buttons ?    Only voice      recognition !    That doesn’t work     with scottish accent ! 

Slide 4

Slide 4 text

@BennoLoewenberg “Disabilities are a mismatch between one’s ability and one’s environment.” Source: unknown

Slide 5

Slide 5 text

We use a Persona Spectrum to understand related limitations across a spectrum of permanent, temporary, and situational disabilities. It’s a quick tool to help foster empathy and to show how a solution can scale to a broader audience. Support Card | The Persona Spectrum Permanent Temporary Situational Touch en temporary or situational. ck which limitations apply to e Can’t speak r Can’t touch @BennoLoewenberg Source: Microsoft Inclusive Design Toolkit Aye ! Deaf Ear infection Bartender Speak Non-verbal Laryngitis Heavy accent

Slide 6

Slide 6 text

Can’t see Can’t speak Can’t hear Can’t touch Blind Cataract Distracted driver Hear Deaf Ear infection Bartender Speak Non-verbal Laryngitis Heavy accent We use a Persona Spectrum to understand related limitations across a spectrum of permanent, temporary, and situational disabilities. It’s a quick tool to help foster empathy and to show how a solution can scale to a broader audience. Support Card | The Persona Spectrum Permanent Temporary Situational Touch @BennoLoewenberg Source: Microsoft Inclusive Design Toolkit

Slide 7

Slide 7 text

One arm Arm injury New parent See Blind Cataract Distracted driver Hear Deaf Ear infection Bartender Disabilities are often temporary or situational. Use this card to pick which limitations apply to your scenario. Can’t see Can’t speak Can’t hear Can’t touch We use a Persona Spectrum to understand related limitations across a spectrum of permanent, temporary, and situational disabilities. It’s a quick tool to help foster empathy and to show how a solution can scale to a broader audience. Support Card | The Persona Spectrum Permanent Temporary Situational Touch @BennoLoewenberg Source: Microsoft Inclusive Design Toolkit traffic observant

Slide 8

Slide 8 text

e Can’t speak r Can’t touch show how a solution can scale to a broader audience. Permanent Temporary Situational Touch One arm Arm injury New parent See Blind Cataract Distracted driver We use a Persona Spectrum to understand related limitations across a spectrum of permanent, temporary, and situational disabilities. It’s a quick tool to help foster empathy and to show how a solution can scale to a broader audience. Support Card | The Persona Spectrum Permanent Temporary Situational Touch Source: Microsoft Inclusive Design Toolkit @BennoLoewenberg

Slide 9

Slide 9 text

“Approach accessibility as a customer experience imperative, not a compliance-driven initiave.” Source: Gina Bhalwalkar @BennoLoewenberg

Slide 10

Slide 10 text

Source: Deque / Anna Cook @BennoLoewenberg Design system accessibility has significant impacts

Slide 11

Slide 11 text

inaccessible eCommerce retailers loose out on — 6.9 billion US$ annually in the US Source: Deque / Home Depot @BennoLoewenberg

Slide 12

Slide 12 text

  KEY DRIVER AND BENEFIT  — | A11y increases market share — | aligns digital with brand promise — | reduces complaints & support costs Source: Forrester @BennoLoewenberg

Slide 13

Slide 13 text

Alps, Alta, Anatomy, Anvil, Archipelago, Argon, Apex, Asphalt, Astro, Aurora, Axiom, Backpack, Barista, Base, Binary, Bits, Blocks, Bloom, Bluemix, Blueprint, Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cargo, Cedar Chameleon, Chrome, Cirrus, Clarity, Clay, Comet, Connect, Constellation Cosmos, DressCode, Duet, Edison, Eos, Epoxy, Evergreen, Fabric, Feather Feelix, Fiori, Fish Tank, Flame, Fleet, Float, Fluent, Foundation, Forma Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet Group, Harmony, Hawkins, Helix, Honeycomb, Horizon, Indigo, Janus, Keirin Klik, Kompas, Kotti, Kyper, Latitude, Leonardo, Lexicon, Lightning, Lion Liquid, Luci, Luna, Material, Mayflower, Mercury, Miui, Mind, Mineral Minutiae, Mixtape, Momentum, Mosaic, Muesli, Nachos, Neo, Nicollet Northstar, Nova, Odyssey, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide Pajamas, Paste, Patternfly, Photon, Plasma, Polaris, Polestar, Poncho Precise, Predix, Primer, Protocol, Pulse, Purple, Quantum, Quartz, Quik Radius, Ratio, Recess, Rimble, Ring, Rivet, Rizzo, Sandcastle, Saphir, Scooter Seeds, Skin, Skyline, ShowCar, Snacks, Solar, Solid, SolidWork, Spark Spectrum, Stacks, Starling, Sticky, Stitch, Swarm, SynNeo, Tack, Tape Terra, ThingWorx, Thumbprint, Unicycle, Uniform, Unison Unity, Ustyle, Vanilla, Wonderblocks, X Yarn, Yoga, Zui   DESIGN SYSTEMS  @BennoLoewenberg

Slide 14

Slide 14 text

Alps, Alta, Anatomy, Anvil, Archipelago, Argon, Apex, Asphalt, Astro, Aurora, Axiom, Backpack, Barista, Base, Binary, Bits, Blocks, Bloom, Bluemix, Blueprint, Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cargo, Cedar Chameleon, Chrome, Cirrus, Clarity, Clay, Comet, Connect, Constellation Cosmos, DressCode, Duet, Edison, Eos, Epoxy, Evergreen, Fabric, Feather Feelix, Fiori, Fish Tank, Flame, Fleet, Float, Fluent, Foundation, Forma Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet Group, Harmony, Hawkins, Helix, Honeycomb, Horizon, Indigo, Janus, Keirin Klik, Kompas, Kotti, Kyper, Latitude, Leonardo, Lexicon, Lightning, Lion Liquid, Luci, Luna, Material, Mayflower, Mercury, Miui, Mind, Mineral Minutiae, Mixtape, Momentum, Mosaic, Muesli, Nachos, Neo, Nicollet Northstar, Nova, Odyssey, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide Pajamas, Paste, Patternfly, Photon, Plasma, Polaris, Polestar, Poncho Precise, Predix, Primer, Protocol, Pulse, Purple, Quantum, Quartz, Quik Radius, Ratio, Recess, Rimble, Ring, Rivet, Rizzo, Sandcastle, Saphir, Scooter Seeds, Skin, Skyline, ShowCar, Snacks, Solar, Solid, SolidWork, Spark Spectrum, Stacks, Starling, Sticky, Stitch, Swarm, SynNeo, Tack, Tape Terra, ThingWorx, Thumbprint, Unicycle, Uniform, Unison Unity, Ustyle, Vanilla, Wonderblocks, X Yarn, Yoga, Zui   DESIGN SYSTEMS  @BennoLoewenberg Accessibility in

Slide 15

Slide 15 text

“Limited access = broken experience. Accessilibity is the first step to a great user experience.” Source: Beatrriz Gonzalez @BennoLoewenberg

Slide 16

Slide 16 text

Source: W3C WAI Web Accessibility Perspectives – Colors with Good Contrast   e. g. WHEN CONTRAST COUNTS  @BennoLoewenberg

Slide 17

Slide 17 text

Source: W3C WAI Web Accessibility Perspectives – Keyboard Compatibility   e. g. WHEN A MOUSE CAN’T BE USED  @BennoLoewenberg

Slide 18

Slide 18 text

“Auditing your design system for accessibility is about UX just as much as it is about UI” Sources: Anma Cook @BennoLoewenberg

Slide 19

Slide 19 text

@BennoLoewenberg Building block or built-in blocker ?

Slide 20

Slide 20 text

@BennoLoewenberg The users are NOT disabled, (design) systems are disabling them

Slide 21

Slide 21 text

@BennoLoewenberg The curb-cut effect is beneficial for all Parents with strollers, Elderly, Cyclists, Delivery workers with push carts, Tourists with heavy luggage, …

Slide 22

Slide 22 text

“You can have antiquated systems, but if you have an accessible interface, it can completely transform that experience” Source. Rachel Haot @BennoLoewenberg

Slide 23

Slide 23 text

@BennoLoewenberg Implementing accessibility measures with curb-cut effect

Slide 24

Slide 24 text

@BennoLoewenberg Cross-device scalability Typography BUS

Slide 25

Slide 25 text

@BennoLoewenberg Ensuring navigation regardless of input method Communicating state changes Tactile AND visual

Slide 26

Slide 26 text

@BennoLoewenberg Useful labels and messaging Semantic markup Paint as added layer of information

Slide 27

Slide 27 text

  WHAT TO START WITH  @BennoLoewenberg

Slide 28

Slide 28 text

@BennoLoewenberg Implementing accessible design & code Code :-)

Slide 29

Slide 29 text

Source: James Sullivan Are you able to read this ? @BennoLoewenberg

Slide 30

Slide 30 text

How about now ? Source: James Sullivan @BennoLoewenberg

Slide 31

Slide 31 text

Can you stand reading this ? Source: James Sullivan @BennoLoewenberg

Slide 32

Slide 32 text

@BennoLoewenberg Colour & Contrast Source: Accessible Color Matrix

Slide 33

Slide 33 text

@BennoLoewenberg Colour & Contrast Source: Koopersmith & Miner

Slide 34

Slide 34 text

@BennoLoewenberg Colour & Contrast Source: Koopersmith & Miner

Slide 35

Slide 35 text

@BennoLoewenberg Colour & Contrast

Slide 36

Slide 36 text

Label @BennoLoewenberg Contrast ?

Slide 37

Slide 37 text

Label @BennoLoewenberg ContrAAAHst !

Slide 38

Slide 38 text

Il1 @BennoLoewenberg Guess the glyph ?  Font face: “Gill Sans”

Slide 39

Slide 39 text

Il1 @BennoLoewenberg Yes, that’s the glyph !   Font face: “Aestetico”

Slide 40

Slide 40 text

Il1 db qp CO eo Il1 db qp CO eo Il1 db qp CO eo @BennoLoewenberg Font faces: “Helvetica / Arial” “Aestetico” “Franziska” ! ! ! + + + + + + + + + + + ! !

Slide 41

Slide 41 text

@BennoLoewenberg — | decypherable by dyslexic — | complies WCAG minimum settings — | scalable by user settings (dynamic type)   READABLE TYPE 

Slide 42

Slide 42 text

Label font-size: 1 rem @BennoLoewenberg

Slide 43

Slide 43 text

@BennoLoewenberg Focus Behaviour

Slide 44

Slide 44 text

@BennoLoewenberg Label most important, but often forgotten

Slide 45

Slide 45 text

Touch Target Sizes @BennoLoewenberg 0.75 cun

Slide 46

Slide 46 text

Label height: 3 rem @BennoLoewenberg

Slide 47

Slide 47 text

Semantic markup Source: HTML5 Accessibility @BennoLoewenberg

Slide 48

Slide 48 text

Name @BennoLoewenberg label for = "name" input id = "name" Labelled form elements added value: label becomes part of touch target too

Slide 49

Slide 49 text

Name @BennoLoewenberg High contrast mode Semantic html automatically gets rendered accessibly

Slide 50

Slide 50 text

Label That‘s an error ! @BennoLoewenberg @BennoLoewenberg Normal vision

Slide 51

Slide 51 text

@BennoLoewenberg @BennoLoewenberg Deuteranopia (simulated) Is that an error ? Label

Slide 52

Slide 52 text

@BennoLoewenberg descriptive error message − Don't rely on colour as sole information Label

Slide 53

Slide 53 text

alt = "success" alt = "warning" alt = "information" alt = "error" Non-text elements − ! i

Slide 54

Slide 54 text

“The first rule of ARIA is not to use it. But you should use it knowingly to support assistive technology” @BennoLoewenberg

Slide 55

Slide 55 text

@BennoLoewenberg descriptive error message − First name alt = "error" aria-describedby = "first-name-error-msg" label for = "firstname"

Slide 56

Slide 56 text

  BEYOND COMPONENT STYLING  @BennoLoewenberg

Slide 57

Slide 57 text

“Inherently inclusive design systems that contain accessible patterns don’t guarantee accessible products.” Source. Roy & Curtis @BennoLoewenberg

Slide 58

Slide 58 text

Accessibility should be backed into the design system strategy Sources: Cook & Curtis IMPLEMENTING ACCESSBILITY Embedded in System Configured by Team Work identified by Audit + + @BennoLoewenberg

Slide 59

Slide 59 text

most important HOW TO USE HOW TO USE HOW IT LOOKS & SOUNDS MADE TO USE @BennoLoewenberg

Slide 60

Slide 60 text

most important HOW TO USE GUIDELINES STYLE & PATTERNS DES & DEV RESOURCES @BennoLoewenberg

Slide 61

Slide 61 text

BUILDING BLOCKS (STYLE GUIDE) Color Pallettes Typographic Scales Grid Definitions Icons & Assets UI PATTERNS (LIBRARY) Elements Components Modules Templates RULES (GUIDELINES) Design Principles Implementation Guidelines Editorial Guidelines @BennoLoewenberg Source: UX Pin integrate accessibility here

Slide 62

Slide 62 text

“Define what you mean, when you say, you are accessible.” Source: Verison Brand Guidelines @BennoLoewenberg Design Principles Implementation Guidelines Editorial Guidelines

Slide 63

Slide 63 text

Designing for users who are deaf or hard of hearing  Do... write in plain language use subtitles or provide transcripts for videos use a linear, logical layout ! CC ! Don’t... use complicated words or figures of speech ! put content in audio or video only make complex layouts and menus ! ! Designing for users who are deaf or hard of hearing  Do... write in plain language use subtitles or provide transcripts for videos use a linear, logical layout break up content with sub-headings, ! CC ! Don’t... use complicated words or figures of speech ! put content in audio or video only make complex layouts and menus make users read long blocks ! ! Design Principles Implementation Guidelines Editorial Guidelines Source: UK Home Office – Accessibility Posters @BennoLoewenberg Designing for users … Designing for users with dyslexia XyL dAS e i XyL dAS e i XyL dAS e i Do... use images and diagrams to support text align text to the left and keep a consistent layout consider producing materials in other formats (for example audio or video) keep content short, clear and simple let users change the contrast between background and text ! ! Don’t... use large blocks of heavy text underline words, use italics or write in capitals force users to remember things from previous pages - give reminders and prompts rely on accurate spelling - use autocorrect or provide suggestions put too much information in one place !! DON’T DO THIS ! ! ! dyslexia dsyle Designing for users with dyslexia XyL dAS e i XyL dAS e i XyL dAS e i Do... use images and diagrams to support text align text to the left and keep a consistent layout consider producing materials in other formats (for example audio or video) keep content short, clear and simple let users change the contrast between background and text ! ! ! Don’t... use large blocks of heavy text underline words, use italics or write in capitals force users to remember things from previous pages - give reminders and prompts rely on accurate spelling - use autocorrect or provide suggestions put too much information in one place !! DON’T DO THIS ! ! ! dyslexia dsyle ! ukhomeoffice.github.io/accessibility-posters/ posters/accessibility-posters.pdf Designing for users with physical or motor disabilities Do... make large clickable actions Yes give clickable elements space design for keyboard or speech only use design with mobile and touchscreen in mind provide shortcuts Tab ! !" Find address Postcode Don’t... demand precision No bunch interactions together make dynamic content that requires a lot of mouse movement have short time out windows tire users with lots of typing and scrolling ! ! 1 2 3 2a 2b 2c ! Your session has timed out Address ng for users with al or motor ities Yes Tab ! !" Find address Postcode Don’t... demand precision No bunch interactions together make dynamic content that requires a lot of mouse movement have short time out windows tire users with lots of typing and scrolling ! ! 1 2 3 2a 2b 2c ! Your session has timed out Address ukhomeoffice.github.io/accessibility-posters/ posters/accessibility-posters.pdf Designing for users with anxiety Do... give users enough time to complete an action explain what will happen after completing a service make important information clear Don’t... rush users or set impractical time limits leave users confused about next steps or timeframes leave users uncertain about the consequences of their actions 1 3 2 4 We have sent you an email ng for users with ty h Don’t... rush users or set impractical time limits leave users confused about next steps or timeframes leave users uncertain about the consequences of their actions 1 3 2 4 make support or help hard to access We have sent you an email Designing for users on the autistic spectrum Do... write in plain language use simple colours use simple sentences and bullets make buttons descriptive build simple and consistent layouts ! Don’t... use bright contrasting colours use figures of speech and idioms create a wall of text make buttons vague and unpredictable build complex and cluttered layouts ! !! Designing for users on the autistic spectrum Do... write in plain language use simple colours use simple sentences and bullets make buttons descriptive build simple and consistent layouts ! ! Don’t... use bright contrasting colours use figures of speech and idioms create a wall of text make buttons vague and unpredictable build complex and cluttered layouts ! !! ! ukhomeoffice.github.io/accessibility-posters/ posters/accessibility-posters.pdf Designing for users of screen readers ! " Do... describe images and provide transcripts for video Don’t... only show information in an image or video Designing for users of screen readers ! " Do... describe images and provide transcripts for video follow a linear Don’t... only show information in an image or video spread content Designing for users with low vision   Do... use good colour contrasts and a readable font size publish all information on web pages use a combination of colour, shapes and text Aa ! HTML Start Don’t... use low colour contrasts and small font size bury information in downloads only use colour to convey meaning Aa ! Designing for users with low vision   Do... use good colour contrasts and a readable font size publish all information on web pages use a combination of colour, shapes and text follow a linear, Aa ! HTML Start 200% magnification Don’t... use low colour contrasts and small font size bury information in downloads only use colour to convey meaning spread content all Aa ! 200% magnification

Slide 64

Slide 64 text

Accessible implementation & contents Design Principles Implementation Guidelines Editorial Guidelines @BennoLoewenberg

Slide 65

Slide 65 text

@BennoLoewenberg Informative headings and page titles Source: A11y Annotation Kit optimal for quick reading & SEO too

Slide 66

Slide 66 text

@BennoLoewenberg Meaningful link texts and button labels Source: unknown

Slide 67

Slide 67 text

Text alternatives for images @BennoLoewenberg alt = "description"

Slide 68

Slide 68 text

Text alternatives for media @BennoLoewenberg  Link to Caption & Transcript 

Slide 69

Slide 69 text

@BennoLoewenberg Form Design First name eMail address in large zoom levels a second column vanishes (e.  g. for last name)

Slide 70

Slide 70 text

@BennoLoewenberg Feedback and Notifications • Last name is required • Street name is required • Passwords don’t match −

Slide 71

Slide 71 text

@BennoLoewenberg Implementing cognitive accessibility

Slide 72

Slide 72 text

“Disabled buttons disable disabled users” Source. Hampus Sethfors @BennoLoewenberg

Slide 73

Slide 73 text

@BennoLoewenberg Submit Clear form ✗

Slide 74

Slide 74 text

@BennoLoewenberg Plain Language

Slide 75

Slide 75 text

@BennoLoewenberg Reduced Motion Parallax Scroll Effect Parallax Scroll Effect Parallax Scroll Effect  preferes-reduced-motion 

Slide 76

Slide 76 text

Data Visualization Source: unknown @BennoLoewenberg Data set 1 Data set 2 important for dyslexic too

Slide 77

Slide 77 text

Souce: Accessibility statement for the GOV.UK Design System website — | change colours, contrast levels and fonts — | zoom in up to 300% without the text spilling off the screen — | navigate website using just a keyboard — | navigate using speech recognition — | listen to the website with a screen reader @BennoLoewenberg

Slide 78

Slide 78 text

@BennoLoewenberg Keyboard Navigation

Slide 79

Slide 79 text

@BennoLoewenberg Tab Order (DOM) Source: Accessibility Bluelines

Slide 80

Slide 80 text

@BennoLoewenberg Focus Order (Landmarks) Source: Accessibility Bluelines

Slide 81

Slide 81 text

@BennoLoewenberg Skip Links Sources: A11y Annotation Kit & Accessibility Bluelines

Slide 82

Slide 82 text

  KICK STARTER TOOLBOX  @BennoLoewenberg

Slide 83

Slide 83 text

Source: W3C WAI WCAG @BennoLoewenberg Web Content Accessibility Guidelines 

Slide 84

Slide 84 text

Source: Microsoft Inclusive Design @BennoLoewenberg Inclusive Design Toolkit  incl. Inclusive AI

Slide 85

Slide 85 text

Source: Microsoft Accesible Design Toolkit for Figma Accessible Design Toolkit  @BennoLoewenberg

Slide 86

Slide 86 text

@BennoLoewenberg Online Accessibility Toolkit  Source: Government of South Australia

Slide 87

Slide 87 text

@BennoLoewenberg Equal Access Toolkit  Source: IBM Accessibility

Slide 88

Slide 88 text

@BennoLoewenberg Source: A Book Apart Accessibility for Everyone 

Slide 89

Slide 89 text

@BennoLoewenberg Source: Smashing Magazine Inclusive Components

Slide 90

Slide 90 text

@BennoLoewenberg  AI 

Slide 91

Slide 91 text

GenAI can support A11y at every step (design, code, finding & fixing problems) through a growing number of tools. But it needs correctives to be useful: Intent detection, prompting expertise and guardrails for accessible outputs. @BennoLoewenberg aft. Kevin Berg

Slide 92

Slide 92 text

  TAKE HOME THOUGHTS  @BennoLoewenberg

Slide 93

Slide 93 text

“When we design for disability first, you often stumble upon solutions that are better than those when we design for the norm.” Source. Elise Roy @BennoLoewenberg

Slide 94

Slide 94 text

@BennoLoewenberg

Slide 95

Slide 95 text

“When we treat accessibility as a requirement box to check, we can miss opportunities to design better products and services, period.” Source: Mason Magyar @BennoLoewenberg

Slide 96

Slide 96 text

  @BENNOLOEWENBERG