Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility in Designsystemen (deutsch) #DSXFRA

Accessibility in Designsystemen (deutsch) #DSXFRA

Wir sind alle nur zeitweilig ohne Einschränkungen. Deswegen sind barrierefreie Lösungen für jeden nützlich. Barrierefreiheit nicht bloß als eine nachrangige, von Vorschriften getriebene Pflichtübung zu verstehen, sondern von Anfang an als wesentlichen Faktor für gute Nutzererlebnisse zu begreifen, führt zu besseren Produkten und Dienstleistungen.

Dieser Vortrag beleuchtet, wie man die Grundlagen für Accessibility in einem Designsystem legt: womit man beginnt, welche Aspekte beachtet werden müssen und welche Werkzeuge einem dabei helfen. Mittels greifbarer Beispiele (und cooler Grafiken) wird das Thema einfach und direkt verständlich dargestellt.

#Accessibility #A11y #Barrierefreiheit #Designsystem #Designsysteme #UX #User Experience #UI #User Interface Design #SituationalDisabilities #CurbCut-Effect #Rollstuhlrampeneffekt

Ce545904f81ef4a81dead98c38b4b240?s=128

Benno Loewenberg

April 28, 2021
Tweet

Transcript

  1.   ACCESSIBILITY IN DESIGNSYSTEMEN  DESIGN SYSTEMS EXCHANGE 28. APRIL 2021

    @BENNOLOEWENBERG
  2. „Wir sind alle nur zeitweilig ohne Einschränkungen.“ Quelle: Cindy Li

    @BennoLoewenberg
  3. Quelle: Burnsitoun Comedy Show – „Eleven“ Scottish Elevator @BennoLoewenberg  

    Keine Knöpfe ?    Nur Sprach-      steuerung !    Das funktioniert nicht     mit schottischem Akzent ! 
  4. @BennoLoewenberg „Behinderungen sind die Diskrepanz zwischen jemandes Fähigkeiten und dessen

    Umgebung.“ Quelle: unbekannt
  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 Quelle: 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 Quelle: 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 Quelle: 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 Quelle: Microsoft Inclusive Design Toolkit @BennoLoewenberg
  9. „Betrachte Barrierefreiheit als eine Notwendigkeit für ’s Kundenerlebnis. Nicht als eine

    von Vorschriften getriebene Pflichtübung.“ Quelle: Gina Bhalwalkar @BennoLoewenberg
  10. Quelle: Deque / Anna Cook @BennoLoewenberg Design system accessibility has

    significant impacts
  11. eCommerce-Händler verlieren durch nicht barrierefreie Websites — 6.9 Milliarden US$

    jährlich in den USA Quelle: Deque / Home Depot @BennoLoewenberg
  12.   TREIBER & VORTEIL  — | Barrierefreiheit vergrößert Marktanteil —

    | bringt Digital mit Markenversprechen zur Übereinstimmung — | verringert Beschwerden und Support-Aufwände Quelle: 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, 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  DESIGNSYSTEME  @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, 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  DESIGNSYSTEME  @BennoLoewenberg Barrierefreiheit
  15. „Limitierter Zugang = schlechtes Erlebnis. Barrierefreiheit ist der erste Schritt

    hin zu richtig guter User Experience.“ Quelle: Beatrriz Gonzalez @BennoLoewenberg
  16. Quelle: W3C WAI Web Accessibility Perspectives – Colors with Good

    Contrast   z. B. WENN KONTRAST WICHTIG IST  @BennoLoewenberg
  17. Quelle: W3C WAI Web Accessibility Perspectives – Keyboard Compatibility  

    z. B. WENN DIE MAUS KEINE OPTION IST  @BennoLoewenberg
  18. „Ein Designsystem auf Barrierefreiheit zu überprüfen, ist UX genauso wie

    UI“ Quelles: Anma Cook @BennoLoewenberg
  19. @BennoLoewenberg Baustein oder eingebautes Hindernis ?

  20. @BennoLoewenberg Nicht die Nutzer sind behindert, sondern die (Design)Systeme sind

    es, die behindern
  21. @BennoLoewenberg Vom Rampeneffekt profiteren alle Eltern mit Kinderwagen, Ältere, Radfahrer,

    Touristen mit schwerem Gepäck, Lieferanten mit Sackkarren, …
  22. „Man kann veraltete Systeme haben, aber deren Nutzererlebnis durch zugängliche

    Benutzeroberflächen komplett [positiv] verändern“ Quelle. Rachel Haot @BennoLoewenberg
  23. @BennoLoewenberg Implementierung von Accessibility- Aspekten mit Rampeneffekt

  24. @BennoLoewenberg Geräteübergreifende Skalierbarkeit Typografie BUS

  25. @BennoLoewenberg Navigierbarkeit unabhängig von der Eingabemethode Statuswechsel kommunizieren Taktil UND

    optisch
  26. @BennoLoewenberg Nützliche Etiketten und Rückmeldungen Semantische Auszeichnung Farbe als zusätzliche

    Informationsebene
  27.   WOMIT BEGINNEN  @BennoLoewenberg

  28. @BennoLoewenberg Barrierefreies Design & Code Code :-)

  29. Quelle: James Sullivan Kannst Du das lesen ? @BennoLoewenberg

  30. Und wie ist es damit ? Quelle: James Sullivan @BennoLoewenberg

  31. Kannst Du das länger ertragen ? Quelle: James Sullivan @BennoLoewenberg

  32. @BennoLoewenberg Farbe & Kontrast Quelle: Accessible Color Matrix

  33. @BennoLoewenberg Farbe & Kontrast Quelle: Koopersmith & Miner

  34. @BennoLoewenberg Farbe & Kontrast Quelle: Koopersmith & Miner

  35. @BennoLoewenberg Farbe & Kontrast

  36. Etikett @BennoLoewenberg Kontrast ?

  37. Etikett @BennoLoewenberg KontrAAAHst !

  38. Il1 @BennoLoewenberg Erkenn’ ich die Zeichen ?  Schriftart: „Gill Sans“

  39. Il1 @BennoLoewenberg Ja, ich kenn’ die Zeichen !   Schriftart: „Aestetico“

  40. Il1 db qp CO eo Il1 db qp CO eo

    Il1 db qp CO eo @BennoLoewenberg Schriftarten: „Helvetica / Arial“ „Aestetico“ „Franziska“ ! ! ! + + + + + + + + + + + ! !
  41. @BennoLoewenberg — | dechiffrierbar von Dyslexikern — | entspricht WCAG-Mindestvorgaben

    — | skalierbar durch Nutzereinstellungen (dynamic type)   LESBARE SCHRIFT 
  42. Etikett font-size: 1 rem @BennoLoewenberg

  43. @BennoLoewenberg Fokussierverhalten

  44. @BennoLoewenberg Etikett am Wichtigsten, aber meist vergessen

  45. Touch-Zielgrößen @BennoLoewenberg 0.75 cun

  46. Etikett height: 3 rem @BennoLoewenberg

  47. Semantisches HTML Quelle: HTML5 Accessibility @BennoLoewenberg

  48. Name @BennoLoewenberg label for = "name" input id = "name"

    Benannte Formularelemente Mehrwert: Etikett wird auch Teil des Touch-Target
  49. Name @BennoLoewenberg Hochkontrastmodus Semantisches HTML wird automatisch barrierearm dargestellt

  50. Etikett Das ist ein Fehler ! @BennoLoewenberg @BennoLoewenberg Normalsichtig

  51. @BennoLoewenberg @BennoLoewenberg Deuteranopie (simuliert) Ist das ein Fehler ? Etikett

  52. @BennoLoewenberg informative Fehlermeldung − Farbe nicht als einzige Information Etikett

  53. Nicht-Text Elemente − ! alt = "erfolg" alt = "warnung"

    alt = "information" alt = "fehler" i
  54. „Die erste ARIA-Regel ist, es nicht zu verwenden. Setz es

    aber gekonnt ein, um Assitenztechnologien zu unterstützen“ @BennoLoewenberg
  55. @BennoLoewenberg informative Fehlermeldung − Vorname alt = "fehler" aria-describedby =

    "first-name-error-msg" label for = "firstname"
  56.   MEHR ALS BLOẞ STYLING  @BennoLoewenberg

  57. „Inhärent inklusive Designsysteme mit barrierefreien Komponenten garantieren nicht automatisch auch

    barrierefreie Produkte.“ Quelle. Roy & Curtis @BennoLoewenberg
  58. Accessibility muss Teil der Designsystemstrategie sein Quelles: Cook & Curtis

    UMSETZUNG VON BARRIEREFREIHEIT im System enthalten vom Team angepasst Arbeiten durch Audit + + @BennoLoewenberg
  59. am Wichtigsten HOW TO USE WIE ANWENDEN WIE ES AUSSIEHT

    & KLINGT DIREKT VERWENDBARES @BennoLoewenberg
  60. HOW TO USE GUIDELINES STYLE & PATTERNS DES & DEV

    RESSOURCEN @BennoLoewenberg am Wichtigsten
  61. BAUSTEINE (STYLEGUIDE) Farbpaletten Typografie Rasterdefinitionen Icons & Assets UI-MUSTER (BIBLIOTHEK)

    Elemente Komponenten Module Vorlagen REGELN (RICHTLINIEN) Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien @BennoLoewenberg Quelle: UX Pin Accessibility hier implementieren
  62. „Definiere was genau Du meinst, wenn Du sagst Du wärst

    barrierefrei.“ Quelle: Verison Brand Guidelines @BennoLoewenberg Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien
  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 ! ! Quelle: UK Home Office – Accessibility Posters @BennoLoewenberg Gestalten für Nutzer … 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% 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 Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien
  64. Barrierefreie Umsetzung und Inhalte @BennoLoewenberg Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien

  65. @BennoLoewenberg Informative Überschriften und Seitentitel Quelle: A11y Annotation Kit optimal

    auch für Querlesen und für SEO
  66. @BennoLoewenberg Informative Link-Texte und Button- Beschriftungen Quelle: unbekannt

  67. Textalternativen für Bilder @BennoLoewenberg alt = "beschreibung"

  68. Textalternativen für AV-Medien @BennoLoewenberg  Link zu Untertiteln & Transkript 

  69. @BennoLoewenberg Formular- gestaltung Vorname E-Mail-Addresse in hohen Vergrößerungsstufen verschwindet eine

    zweite Spalte (z.  B. für Nachname)
  70. @BennoLoewenberg Rückmeldungen & Benachrichtigungen • Nachnahme fehlt • Straßenname fehlt

    • Passwörter unterschiedlich −
  71. @BennoLoewenberg Kognitive Barrierefreiheit

  72. „Disabled buttons disable disabled users“ Quelle. Hampus Sethfors @BennoLoewenberg

  73. @BennoLoewenberg Senden Formular löschen ✗

  74. @BennoLoewenberg Verringerte Animation Parallax Scroll Effect Parallax Scroll Effect Parallax

    Scroll Effect  preferes-reduced-motion 
  75. Datenvisualisierung Quelle: unbekannt @BennoLoewenberg Datensatz 1 Datensatz 2 auch für

    Dyslexiker wichtig
  76. Quelle: Accessibility statement for the GOV.UK Design System website —

    | Farben, Kontrast und Schriftarten ändern — | bis zu 300% vergrößern, ohne den Text aus dem Blickfeld zu schieben — | Website nur mit der Tastatur bedienen — | nur mit Spracherkennung navigieren — | mit Screen-Reader alle Inhalte hören @BennoLoewenberg
  77. @BennoLoewenberg Tastaturnavigation

  78. @BennoLoewenberg Tab-Reihenfolge (DOM) Quelle: Accessibility Bluelines

  79. @BennoLoewenberg Fokus-Reihenfolge (Landmarks) Quelle: Accessibility Bluelines

  80. @BennoLoewenberg Überspringen-Verknüpfungen Quelles: A11y Annotation Kit & Accessibility Bluelines

  81.   WERKZEUGKISTE FÜR ’S LOSLEGEN  @BennoLoewenberg

  82. Quelle: W3C WAI WCAG @BennoLoewenberg Web Content Accessibility Guidelines 

  83. Quelle: Microsoft Inclusive Design @BennoLoewenberg Inclusive Design Toolkit 

  84. @BennoLoewenberg Online Accessibility Toolkit  Quelle: Government of South Australia

  85. @BennoLoewenberg Equal Access Toolkit  Quelle: IBM Accessibility

  86. @BennoLoewenberg Quelle: A Book Apart Accessibility for Everyone 

  87. @BennoLoewenberg Quelle: Smashing Magazine Inclusive Components

  88.  SCHLUSSGEDANKEN  @BennoLoewenberg

  89. „Beim Gestalten für Barrierefreiheit stößt man oft auf Lösungen, welche

    besser sind als beim ‚normalen‘ Gestalten.“ Quelle. Elise Roy @BennoLoewenberg
  90. @BennoLoewenberg

  91. „Wird Accessilibility nur als abzuarbeitender Punkt auf der Checkliste angesehen,

    können uns Möglichkeiten entgehen bessere Produkte und Dienstleistungen zu gestalten, Punkt.“ Quelle: Mason Magyar @BennoLoewenberg
  92. http:// Vorträge & Workshops

  93.   @BENNOLOEWENBERG   LINKEDIN / XING / TWITTER