Slide 1

Slide 1 text

  ACCESSIBILITY IN DESIGNSYSTEMEN  DESIGN SYSTEMS EXCHANGE 28. APRIL 2021 @BENNOLOEWENBERG

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Quelle: Burnsitoun Comedy Show – „Eleven“ Scottish Elevator @BennoLoewenberg   Keine Knöpfe ?    Nur Sprach-      steuerung !    Das funktioniert nicht     mit schottischem Akzent ! 

Slide 4

Slide 4 text

@BennoLoewenberg „Behinderungen sind die Diskrepanz zwischen jemandes Fähigkeiten und dessen Umgebung.“ Quelle: unbekannt

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 Quelle: 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 Quelle: 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 Quelle: 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 Quelle: Microsoft Inclusive Design Toolkit @BennoLoewenberg

Slide 9

Slide 9 text

„Betrachte Barrierefreiheit als eine Notwendigkeit für ’s Kundenerlebnis. Nicht als eine von Vorschriften getriebene Pflichtübung.“ Quelle: Gina Bhalwalkar @BennoLoewenberg

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

eCommerce-Händler verlieren durch nicht barrierefreie Websites — 6.9 Milliarden US$ jährlich in den USA Quelle: Deque / Home Depot @BennoLoewenberg

Slide 12

Slide 12 text

  TREIBER & VORTEIL  — | Barrierefreiheit vergrößert Marktanteil — | bringt Digital mit Markenversprechen zur Übereinstimmung — | verringert Beschwerden und Support-Aufwände Quelle: 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  DESIGNSYSTEME  @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  DESIGNSYSTEME  @BennoLoewenberg Barrierefreiheit

Slide 15

Slide 15 text

„Limitierter Zugang = schlechtes Erlebnis. Barrierefreiheit ist der erste Schritt hin zu richtig guter User Experience.“ Quelle: Beatrriz Gonzalez @BennoLoewenberg

Slide 16

Slide 16 text

Quelle: W3C WAI Web Accessibility Perspectives – Colors with Good Contrast   z. B. WENN KONTRAST WICHTIG IST  @BennoLoewenberg

Slide 17

Slide 17 text

Quelle: W3C WAI Web Accessibility Perspectives – Keyboard Compatibility   z. B. WENN DIE MAUS KEINE OPTION IST  @BennoLoewenberg

Slide 18

Slide 18 text

„Ein Designsystem auf Barrierefreiheit zu überprüfen, ist UX genauso wie UI“ Quelles: Anma Cook @BennoLoewenberg

Slide 19

Slide 19 text

@BennoLoewenberg Baustein oder eingebautes Hindernis ?

Slide 20

Slide 20 text

@BennoLoewenberg Nicht die Nutzer sind behindert, sondern die (Design)Systeme sind es, die behindern

Slide 21

Slide 21 text

@BennoLoewenberg Vom Rampeneffekt profiteren alle Eltern mit Kinderwagen, Ältere, Radfahrer, Touristen mit schwerem Gepäck, Lieferanten mit Sackkarren, …

Slide 22

Slide 22 text

„Man kann veraltete Systeme haben, aber deren Nutzererlebnis durch zugängliche Benutzeroberflächen komplett [positiv] verändern“ Quelle. Rachel Haot @BennoLoewenberg

Slide 23

Slide 23 text

@BennoLoewenberg Implementierung von Accessibility- Aspekten mit Rampeneffekt

Slide 24

Slide 24 text

@BennoLoewenberg Geräteübergreifende Skalierbarkeit Typografie BUS

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@BennoLoewenberg Nützliche Etiketten und Rückmeldungen Semantische Auszeichnung Farbe als zusätzliche Informationsebene

Slide 27

Slide 27 text

  WOMIT BEGINNEN  @BennoLoewenberg

Slide 28

Slide 28 text

@BennoLoewenberg Barrierefreies Design & Code Code :-)

Slide 29

Slide 29 text

Quelle: James Sullivan Kannst Du das lesen ? @BennoLoewenberg

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

@BennoLoewenberg Farbe & Kontrast Quelle: Accessible Color Matrix

Slide 33

Slide 33 text

@BennoLoewenberg Farbe & Kontrast Quelle: Koopersmith & Miner

Slide 34

Slide 34 text

@BennoLoewenberg Farbe & Kontrast Quelle: Koopersmith & Miner

Slide 35

Slide 35 text

@BennoLoewenberg Farbe & Kontrast

Slide 36

Slide 36 text

Etikett @BennoLoewenberg Kontrast ?

Slide 37

Slide 37 text

Etikett @BennoLoewenberg KontrAAAHst !

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Il1 db qp CO eo Il1 db qp CO eo Il1 db qp CO eo @BennoLoewenberg Schriftarten: „Helvetica / Arial“ „Aestetico“ „Franziska“ ! ! ! + + + + + + + + + + + ! !

Slide 41

Slide 41 text

@BennoLoewenberg — | dechiffrierbar von Dyslexikern — | entspricht WCAG-Mindestvorgaben — | skalierbar durch Nutzereinstellungen (dynamic type)   LESBARE SCHRIFT 

Slide 42

Slide 42 text

Etikett font-size: 1 rem @BennoLoewenberg

Slide 43

Slide 43 text

@BennoLoewenberg Fokussierverhalten

Slide 44

Slide 44 text

@BennoLoewenberg Etikett am Wichtigsten, aber meist vergessen

Slide 45

Slide 45 text

Touch-Zielgrößen @BennoLoewenberg 0.75 cun

Slide 46

Slide 46 text

Etikett height: 3 rem @BennoLoewenberg

Slide 47

Slide 47 text

Semantisches HTML Quelle: HTML5 Accessibility @BennoLoewenberg

Slide 48

Slide 48 text

Name @BennoLoewenberg label for = "name" input id = "name" Benannte Formularelemente Mehrwert: Etikett wird auch Teil des Touch-Target

Slide 49

Slide 49 text

Name @BennoLoewenberg Hochkontrastmodus Semantisches HTML wird automatisch barrierearm dargestellt

Slide 50

Slide 50 text

Etikett Das ist ein Fehler ! @BennoLoewenberg @BennoLoewenberg Normalsichtig

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

@BennoLoewenberg informative Fehlermeldung − Farbe nicht als einzige Information Etikett

Slide 53

Slide 53 text

Nicht-Text Elemente − ! alt = "erfolg" alt = "warnung" alt = "information" alt = "fehler" i

Slide 54

Slide 54 text

„Die erste ARIA-Regel ist, es nicht zu verwenden. Setz es aber gekonnt ein, um Assitenztechnologien zu unterstützen“ @BennoLoewenberg

Slide 55

Slide 55 text

@BennoLoewenberg informative Fehlermeldung − Vorname alt = "fehler" aria-describedby = "first-name-error-msg" label for = "firstname"

Slide 56

Slide 56 text

  MEHR ALS BLOẞ STYLING  @BennoLoewenberg

Slide 57

Slide 57 text

„Inhärent inklusive Designsysteme mit barrierefreien Komponenten garantieren nicht automatisch auch barrierefreie Produkte.“ Quelle. Roy & Curtis @BennoLoewenberg

Slide 58

Slide 58 text

Accessibility muss Teil der Designsystemstrategie sein Quelles: Cook & Curtis UMSETZUNG VON BARRIEREFREIHEIT im System enthalten vom Team angepasst Arbeiten durch Audit + + @BennoLoewenberg

Slide 59

Slide 59 text

am Wichtigsten HOW TO USE WIE ANWENDEN WIE ES AUSSIEHT & KLINGT DIREKT VERWENDBARES @BennoLoewenberg

Slide 60

Slide 60 text

HOW TO USE GUIDELINES STYLE & PATTERNS DES & DEV RESSOURCEN @BennoLoewenberg am Wichtigsten

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

„Definiere was genau Du meinst, wenn Du sagst Du wärst barrierefrei.“ Quelle: Verison Brand Guidelines @BennoLoewenberg Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien

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 ! ! 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 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 Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien

Slide 64

Slide 64 text

Barrierefreie Umsetzung und Inhalte @BennoLoewenberg Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien

Slide 65

Slide 65 text

@BennoLoewenberg Informative Überschriften und Seitentitel Quelle: A11y Annotation Kit optimal auch für Querlesen und für SEO

Slide 66

Slide 66 text

@BennoLoewenberg Informative Link-Texte und Button- Beschriftungen Quelle: unbekannt

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

@BennoLoewenberg Formular- gestaltung Vorname E-Mail-Addresse in hohen Vergrößerungsstufen verschwindet eine zweite Spalte (z.  B. für Nachname)

Slide 70

Slide 70 text

@BennoLoewenberg Rückmeldungen & Benachrichtigungen • Nachnahme fehlt • Straßenname fehlt • Passwörter unterschiedlich −

Slide 71

Slide 71 text

@BennoLoewenberg Kognitive Barrierefreiheit

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

@BennoLoewenberg Senden Formular löschen ✗

Slide 74

Slide 74 text

@BennoLoewenberg Verringerte Animation Parallax Scroll Effect Parallax Scroll Effect Parallax Scroll Effect  preferes-reduced-motion 

Slide 75

Slide 75 text

Datenvisualisierung Quelle: unbekannt @BennoLoewenberg Datensatz 1 Datensatz 2 auch für Dyslexiker wichtig

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

@BennoLoewenberg Tastaturnavigation

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

  WERKZEUGKISTE FÜR ’S LOSLEGEN  @BennoLoewenberg

Slide 82

Slide 82 text

Quelle: W3C WAI WCAG @BennoLoewenberg Web Content Accessibility Guidelines 

Slide 83

Slide 83 text

Quelle: Microsoft Inclusive Design @BennoLoewenberg Inclusive Design Toolkit 

Slide 84

Slide 84 text

@BennoLoewenberg Online Accessibility Toolkit  Quelle: Government of South Australia

Slide 85

Slide 85 text

@BennoLoewenberg Equal Access Toolkit  Quelle: IBM Accessibility

Slide 86

Slide 86 text

@BennoLoewenberg Quelle: A Book Apart Accessibility for Everyone 

Slide 87

Slide 87 text

@BennoLoewenberg Quelle: Smashing Magazine Inclusive Components

Slide 88

Slide 88 text

 SCHLUSSGEDANKEN  @BennoLoewenberg

Slide 89

Slide 89 text

„Beim Gestalten für Barrierefreiheit stößt man oft auf Lösungen, welche besser sind als beim ‚normalen‘ Gestalten.“ Quelle. Elise Roy @BennoLoewenberg

Slide 90

Slide 90 text

@BennoLoewenberg

Slide 91

Slide 91 text

„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

Slide 92

Slide 92 text

http:// Vorträge & Workshops

Slide 93

Slide 93 text

  @BENNOLOEWENBERG   LINKEDIN / XING / TWITTER