Accessibility in Design Systems (english)
â˘
0 gefällt mirâ˘163 views
This document discusses accessibility in design systems. It provides examples and guidance on making design systems accessible. Some key points include: - Accessibility should be considered from the beginning when designing systems, not as an afterthought. It benefits all users. - Color contrast, keyboard support, labels, form elements and semantic HTML are important for accessibility. - Design systems should include accessibility guidelines and principles in addition to visual style guides and components. - Auditing systems and catching accessibility issues early is important to ensure usable products. Accessibility needs to be implemented thoughtfully throughout the entire design and development process.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ăhnlich wie Accessibility in Design Systems (english)
Ăhnlich wie Accessibility in Design Systems (english) (20)
Mehr von Benno LĹwenberg
Mehr von Benno LĹwenberg (20)
KĂźrzlich hochgeladen
KĂźrzlich hochgeladen (20)
Accessibility in Design Systems (english)
- 1. â ACCESSIBILITY IN DESIGN SYSTEMSâ INTO DESIGN SYSTEMS MARCH 25. 2021 @BENNOLOEWENBERG
- 2. âWeâre all just temporarily abled.â Source: Cindy Li @BennoLoewenberg
- 3. Source: Burnsitoun Comedy Show â âElevenâ Scottish Elevator @BennoLoewenberg â No buttonsâ?â â Only voiceâ â â recognitionâ!â â That doesnât workâ â âwith scottish accentâ!â
- 4. @BennoLoewenberg âDisabilities are a mismatch between oneâs ability and oneâs environment.â Source: unknown
- 5. 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
- 6. 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
- 7. 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
- 8. 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
- 9. âApproach accessibility as a customer experience imperative, not a compliance-driven initiave.â Source: Gina Bhalwalkar @BennoLoewenberg
- 10. Source: Deque / Anna Cook @BennoLoewenberg Design system accessibility has significant impacts
- 11. inaccessible eCommerce retailers loose out on â 6.9 billion US$ annually in the US Source: Deque / Home Depot @BennoLoewenberg
- 12. â KEY DRIVER AND BENEFITâ â | A11y increases market share â | aligns digital with brand promise â | reduces complaints & support costs Source: Forrester @BennoLoewenberg
- 13. 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, Fleet, Float, Fluent, Foundation, Forma, Frontier, Fuse Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet, Group, Harmony Hedwig, 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 mbprint, Unicycle, Uniform, Unison, Unity, Ustyle, Vanilla Wonderblocks, X, Yarn, Yoga, Zui â DESIGN SYSTEMSâ @BennoLoewenberg
- 14. 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, Fleet, Float, Fluent, Foundation, Forma, Frontier, Fuse Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet, Group, Harmony Hedwig, 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 mbprint, Unicycle, Uniform, Unison, Unity, Ustyle, Vanilla Wonderblocks, X, Yarn, Yoga, Zui â DESIGN SYSTEMSâ @BennoLoewenberg Accessibility in
- 15. âLimited access = broken experience. Accessilibity is the first step to a great user experience.â Source: Beatrriz Gonzalez @BennoLoewenberg
- 16. Source: W3C WAI Web Accessibility Perspectives â Colors with Good Contrast â e. g. WHEN CONTRAST COUNTSâ @BennoLoewenberg
- 17. Source: W3C WAI Web Accessibility Perspectives â Keyboard Compatibility â e. g. WHEN A MOUSE CANâT BE USEDâ @BennoLoewenberg
- 18. âAuditing your design system for accessibility is about UX just as much as it is about UIâ Sources: Anma Cook @BennoLoewenberg
- 19. @BennoLoewenberg Building block or built-in blockerâ?
- 20. @BennoLoewenberg The users are NOT disabled, (design) systems are disabling them
- 21. @BennoLoewenberg The curb-cut effect is beneficial for all Parents with strollers, Elderly, Cyclists, Delivery workers with push carts, Tourists with heavy luggage, âŚ
- 22. âYou can have antiquated systems, but if you have an accessible interface, it can completely transform that experienceâ Source. Rachel Haot @BennoLoewenberg
- 23. @BennoLoewenberg Implementing accessibility measures with curb-cut effect
- 25. @BennoLoewenberg Ensuring navigation regardless of input method Communicating state changes Tactile AND visual
- 26. @BennoLoewenberg Useful labels and messaging Semantic markup Paint as added layer of information
- 27. â WHAT TO START WITHâ @BennoLoewenberg
- 28. @BennoLoewenberg Implementing accessible design & code Code :-)
- 29. Source: James Sullivan Are you able to read thisâ? @BennoLoewenberg
- 31. Can you stand reading thisâ? Source: James Sullivan @BennoLoewenberg
- 39. Il1 @BennoLoewenberg Yes, thatâs the glyphâ!ââ Font face: âAesteticoâ
- 40. Il1 db qp CO eo Il1 db qp CO eo Il1 db qp CO eo @BennoLoewenberg Font faces: âHelvetica / Arialâ âAesteticoâ âFranziskaâ ! ! ! + + + + + + + + + + + ! !
- 41. @BennoLoewenberg â | decypherable by dyslexic â | complies WCAG minimum settings â | scalable by user settings (dynamic type) â READABLE TYPEâ
- 44. @BennoLoewenberg Label most important, but often forgotten
- 48. Name @BennoLoewenberg label for = "name" input id = "name" Labelled form elements added value: label becomes part of touch target too
- 49. Name @BennoLoewenberg High contrast mode Semantic html automatically gets rendered accessibly
- 51. @BennoLoewenberg @BennoLoewenberg Deuteranopia (simulated) Is that an errorâ? Label
- 52. @BennoLoewenberg descriptive error message â Don't rely on colour as sole information Label
- 53. â ! i alt = "success" alt = "warning" alt = "information" alt = "error" Non-text elements
- 54. âThe first rule of ARIA is not to use it. But you should use it knowingly to support assistive technologyâ @BennoLoewenberg
- 55. @BennoLoewenberg descriptive error message â First name alt = "error" aria-describedby = "first-name-error-msg" label for = "firstname"
- 56. â BEYOND COMPONENT STYLINGâ @BennoLoewenberg
- 57. âInherently inclusive design systems that contain accessible patterns donât guarantee accessible products.â Source. Roy & Curtis @BennoLoewenberg
- 58. 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
- 59. most important HOW TO USE HOW TO USE HOW IT LOOKS & SOUNDS MADE TO USE @BennoLoewenberg
- 60. most important HOW TO USE GUIDELINES STYLE & PATTERNS DES & DEV RESOURCES @BennoLoewenberg
- 61. 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
- 62. âDefine what you mean, when you say, you are accessible.â Source: Verison Brand Guidelines @BennoLoewenberg Design Principles Implementation Guidelines Editorial Guidelines
- 63. 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 <alt> 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 <alt> 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% magniďŹcation 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% magniďŹcation
- 64. Accessible implementation & contents Design Principles Implementation Guidelines Editorial Guidelines @BennoLoewenberg
- 65. @BennoLoewenberg Informative headings and page titles Source: A11y Annotation Kit optimal for quick reading & SEO too
- 66. @BennoLoewenberg Meaningful link texts and button labels Source: unknown
- 67. Text alternatives for images @BennoLoewenberg alt = "description"
- 68. Text alternatives for media @BennoLoewenberg âŻLink to Caption & TranscriptâŻ
- 69. @BennoLoewenberg Form Design First name eMail address in large zoom levels a second column vanishes (e.â g. for last name)
- 70. @BennoLoewenberg Feedback and Notifications ⢠Last name is required ⢠Street name is required ⢠Passwords donât match â
- 72. âDisabled buttons disable disabled usersâ Source. Hampus Sethfors @BennoLoewenberg
- 74. @BennoLoewenberg Reduced motion Parallax Scroll Effect Parallax Scroll Effect Parallax Scroll Effect âŻpreferes-reduced-motionâŻ
- 75. Data Visualization Source: unknown @BennoLoewenberg Data set 1 Data set 2 important for dyslexic too
- 76. 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
- 81. â KICK STARTER TOOLBOXâ @BennoLoewenberg
- 82. Source: W3C WAI WCAG @BennoLoewenberg Web Content Accessibility Guidelinesâ
- 88. â TAKE HOME THOUGHTSâ @BennoLoewenberg
- 89. â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
- 90. @BennoLoewenberg
- 91. â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