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

Benno Loewenberg

April 28, 2021
Tweet

More Decks by Benno Loewenberg

Other Decks in Business

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12.   TREIBER & VORTEIL 

    | Barrierefreiheit vergrößert Marktanteil

    | bringt Digital mit Markenversprechen
    zur Übereinstimmung

    | verringert Beschwerden und
    Support-Aufwände
    Quelle: Forrester
    @BennoLoewenberg

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. @BennoLoewenberg
    Baustein oder eingebautes
    Hindernis ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. @BennoLoewenberg
    Implementierung von Accessibility-
    Aspekten mit Rampeneffekt

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27.   WOMIT BEGINNEN 
    @BennoLoewenberg

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. @BennoLoewenberg
    Farbe &
    Kontrast

    View full-size slide

  36. Etikett
    @BennoLoewenberg
    Kontrast ?

    View full-size slide

  37. Etikett
    @BennoLoewenberg
    KontrAAAHst !

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. @BennoLoewenberg

    | dechiffrierbar von Dyslexikern

    | entspricht WCAG-Mindestvorgaben

    | skalierbar durch Nutzereinstellungen
    (dynamic type)
      LESBARE SCHRIFT 

    View full-size slide

  42. Etikett
    font-size: 1 rem
    @BennoLoewenberg

    View full-size slide

  43. @BennoLoewenberg
    Fokussierverhalten

    View full-size slide

  44. @BennoLoewenberg
    Etikett
    am Wichtigsten,
    aber meist vergessen

    View full-size slide

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

    View full-size slide

  46. Etikett
    height: 3 rem
    @BennoLoewenberg

    View full-size slide

  47. Semantisches
    HTML
    Quelle: HTML5 Accessibility
    @BennoLoewenberg

    View full-size slide

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

    View full-size slide

  49. Name
    @BennoLoewenberg
    Hochkontrastmodus
    Semantisches HTML
    wird automatisch
    barrierearm dargestellt

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. @BennoLoewenberg
    informative Fehlermeldung

    Farbe nicht als einzige Information
    Etikett

    View full-size slide

  53. Nicht-Text
    Elemente

    !
    alt = "erfolg"
    alt = "warnung"
    alt = "information"
    alt = "fehler"
    i

    View full-size slide

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

    View full-size slide

  55. @BennoLoewenberg
    informative Fehlermeldung

    Vorname
    alt = "fehler"
    aria-describedby = "first-name-error-msg"
    label for = "firstname"

    View full-size slide

  56.   MEHR ALS BLOẞ STYLING 
    @BennoLoewenberg

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    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

    View full-size slide

  64. Barrierefreie Umsetzung
    und Inhalte
    @BennoLoewenberg
    Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. @BennoLoewenberg
    Kognitive Barrierefreiheit

    View full-size slide

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

    View full-size slide

  73. @BennoLoewenberg
    Senden
    Formular löschen

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  77. @BennoLoewenberg
    Tastaturnavigation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  81.   WERKZEUGKISTE FÜR ’S LOSLEGEN 
    @BennoLoewenberg

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. @BennoLoewenberg
    Equal Access Toolkit 
    Quelle: IBM Accessibility

    View full-size slide

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

    View full-size slide

  87. @BennoLoewenberg
    Quelle: Smashing Magazine
    Inclusive
    Components

    View full-size slide

  88.  SCHLUSSGEDANKEN 
    @BennoLoewenberg

    View full-size slide

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

    View full-size slide

  90. @BennoLoewenberg

    View full-size slide

  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

    View full-size slide

  92. http://
    Vorträge & Workshops

    View full-size slide

  93.   @BENNOLOEWENBERG 
     LINKEDIN / XING / TWITTER

    View full-size slide