$30 off During Our Annual Pro Sale. View Details »

Accessibility für DeveloperInnen: Hello World!

Accessibility für DeveloperInnen: Hello World!

Vor ziemlich genau einem Jahr habe ich begonnen, mich intensiv mit Web-Accessibility zu beschäftigen. Ich habe viel gelesen, geschrieben, zugehört und gesprochen. Ich konnte mir einen Überblick über die Grundlagen machen. Ich habe herausgefunden, wo man Artikel, Videos und Tools findet und wer die wichtigsten Vertreter sind.
Dieses Wissen und die Erfahrungen, die ich gemacht habe, sind Thema dieses Vortrags und sollen als Starthilfe für Frontend DeveloperInnen dienen, die ihre Projekte inklusiver gestalten möchten und noch am Anfang stehen.

Manuel Matuzovic

October 20, 2017
Tweet

More Decks by Manuel Matuzovic

Other Decks in Technology

Transcript

  1. Accessibility für
    DeveloperInnen
    Hello World!
    Manuel Matuzović
    @mmatuzo
    A-Tag ’17 10/2017

    View Slide

  2. Kölner Dom von einer Brücke aus fotografiert

    View Slide

  3. webclerks
    Twitter
    @mmatuzo
    medium
    @matuzo
    Manuel Matuzović
    [email protected]

    View Slide

  4. Das erst Mal bewusst und intensiver hatte ich im Zuge der 10k Apart
    Competition mit Webaccessibility zu tun.

    View Slide

  5. Das Publikum beim A-Tag 2016.

    View Slide

  6. Wie beginnt man am
    besten Web Accessibility
    (a11y) zu lernen?

    View Slide

  7. Einfach
    beginnen.

    View Slide

  8. Wie habe ich begonnen?
    Welche Ressourcen
    kann ich empfehlen?

    View Slide

  9. RESSOURCEN - MEINE TIPPS
    Aufteilung
    ▸ Lernmaterial
    ▸ Blogs/Portale/Newsletter
    ▸ VertreterInnen
    ▸ Events
    ▸ Plugins/Libraries
    ▸ Listen

    View Slide

  10. RESSOURCEN - MEINE TIPPS
    Lernmaterial
    ▸ Udacity Videokurs – Web Accessibility by
    Google
    ▸ Inclusive Design Patterns (Buch) von Heydon
    Pickering
    ▸ A11ycasts (YouTube Channel) von Rob
    Dodson

    View Slide

  11. RESSOURCEN - MEINE TIPPS
    Lernmaterial
    ▸ Egghead.io Videokurs – Start Building
    Accessible Web Applications Today
    ▸ Accessibility for Everyone (Buch) von Laura
    Kalbag

    View Slide

  12. RESSOURCEN - MEINE TIPPS
    Blogs/Portale/Newsletter
    ▸ webaim.org - Artikel, Tools, Mailinglist, etc.
    ▸ webaim Newsletter
    ▸ Web Content Accessibility Guidelines
    (WCAG) (Liste)
    ▸ a11yweekly (Newsletter)

    View Slide

  13. RESSOURCEN - MEINE TIPPS
    Blogs/Portale/Newsletter
    ▸ Adrian Roselli (Blog)
    ▸ The Paciello Group (Blog)

    View Slide

  14. RESSOURCEN - MEINE TIPPS
    VertreterInnen auf Twitter
    ▸ Heydon Pickering (@heydonworks)
    ▸ Adrian Roselli (@aardrian)
    ▸ Aaron Gustafson (@AaronGustafson)
    ▸ Léonie Watson (@LeonieWatson)
    ▸ Marcy Sutton (@marcysutton)
    ▸ Hugo Giraudel (@HugoGiraudel)

    View Slide

  15. RESSOURCEN - MEINE TIPPS
    VertreterInnen auf Twitter
    ▸ Steve Faulkner (@ stevefaulkner)
    ▸ Rob Dodson (@ rob_dodson)
    ▸ Scott O’Hara (@scottohara)
    ▸ Marco Zehe (@MarcoInEnglish)
    ▸ Jo Spelbrink (@joville)
    ▸ Weitere auf Github

    View Slide

  16. RESSOURCEN - MEINE TIPPS
    Events
    ▸ A-Tag atag.accessiblemedia.at
    ▸ Meetups github.com/t12t/a11y-meetups
    ▸ role=drinks www.roledrinks.com
    ▸ Inclusive Design 24 (#ID24) - 24 Stunden
    Online Konferenz inclusivedesign24.org

    View Slide

  17. RESSOURCEN - MEINE TIPPS
    Plugins/Libraries
    ▸ a11y-dialog auf GitHub
    ▸ Frend frend.co
    ▸ Inclusive Components inclusive-
    components.design
    ▸ a11y.js allyjs.io

    View Slide

  18. http://frend.co

    View Slide

  19. https://inclusive-components.design/

    View Slide

  20. https://allyjs.io/

    View Slide

  21. RESSOURCEN - MEINE TIPPS
    Listen
    ▸ A11y style guide a11y-style-guide.com
    ▸ Deque Pattern Library pattern-library.dequelabs.com
    ▸ The A11Y Project a11yproject.com
    ▸ Inclusive Design Principles
    inclusivedesignprinciples.org
    ▸ Empathy Prompts empathyprompts.net

    View Slide

  22. RESSOURCEN - MEINE TIPPS FÜR DESIGNERINNEN
    Design
    ▸ Web Accessibility for Designers (Liste)
    ▸ Color Contrast Analyser for Sketch (Plugin)
    ▸ Farbkontrast Tools (Liste)
    ▸ 7 Things Every Designer Needs to Know
    about Accessibility (Artikel)

    View Slide

  23. Welche neuen
    Erkenntnisse habe
    ich erlangt?

    View Slide

  24. Accessibility (a11y) ist kein
    medizinischer Begriff. Es
    geht allgemein um Zugang.

    View Slide

  25. Bei a11y geht es um mehr
    als nur um blinde
    Menschen und
    Screenreader (SR) User.

    View Slide

  26. Man kann a11y schon
    deutlich verbessern, ohne
    einen SR auch nur
    anzurühren.

    View Slide

  27. Es gibt permanente,
    temporäre und
    situationsbezogene
    Beeinträchtigungen.

    View Slide

  28. Permanent Temporär Situationsbezogen

    View Slide

  29. Menschen wollen
    überzeugt werden, dass
    sich Barrierefreiheit
    auszahlt.

    View Slide

  30. MENSCHEN WOLLEN ÜBERZEUGT WERDEN
    Fragen, die ich gehört habe.
    ▸ Wie viel kostet Barrierefreiheit im Web?
    ▸ Kann man messen, wie viel Prozent der
    Besucher SR User sind?
    ▸ Wie kann ich meine/n ChefIn/KollegIn
    überzeugen?

    View Slide

  31. Ein grundlegendes
    HTML Verständnis löst
    sehr viele Probleme.

    View Slide

  32. Insgesamt ist aktuell, in
    einer Zeit von Frameworks
    und Libraries, eine gute Zeit
    HTML/CSS/JS zu können.

    View Slide

  33. JavaScript ist nicht der
    Feind.
    JS kann sogar helfen die
    Accessibility zu verbessern.

    View Slide

  34. CSS-Only Lösungen sind
    oft weniger accessible
    als JS-Lösungen.

    View Slide

  35. Kommunikation im
    Team ist sehr
    wichtig.

    View Slide

  36. Man ist nicht alleine für
    a11y zuständig:
    Konzeption, Design, Texte,
    Entwicklung.

    View Slide

  37. A11y muss von Anfang an
    Thema sein. Vor
    Projektbeginn am besten.

    View Slide

  38. Was habe ich mit den
    neuen Erkenntnissen
    angefangen?

    View Slide

  39. Artikel auf
    Anfängerniveau
    geschrieben.

    View Slide

  40. Writing CSS with Accessibility in Mind
    Writing HTML with Accessibility in Mind
    Writing JS with Accessibility in Mind

    View Slide

  41. ExpertInnen zu Meetups
    eingeladen, um über das
    Thema zu sprechen.

    View Slide

  42. Ich spreche selber
    auf Meetups und
    Konferenzen.

    View Slide

  43. Eine der Bühnen auf der SAE Alumni Convention 2017 in Köln

    View Slide

  44. Ich bin aktiver auf
    Twitter, speziell zum
    Thema.

    View Slide

  45. Was könnt ihr
    tun?

    View Slide

  46. Auf Meetups gehen und
    über a11y, Progressive
    Enhancement, etc.
    sprechen.

    View Slide

  47. A11y KollegInnen/
    ChefInnen näher bringen.
    Stichwort: Empathie.

    View Slide

  48. Einfach
    beginnen.

    View Slide

  49. Semantisches HTML,
    Focusmanagement +
    Focusstyles, inklusive
    Plugins verwenden,…

    View Slide

  50. All das kostet nicht
    (viel) mehr Zeit und
    Geld.

    View Slide

  51. Nicht nur das
    medizinische in A11y
    sehen. A11y === UX.

    View Slide

  52. Wissen aneignen und
    Online, auf Meetups
    und Konferenzen teilen.

    View Slide

  53. …und vielleicht beim
    A-Tag 2018 sprechen.

    View Slide

  54. Danke
    Manuel Matuzović
    @mmatuzo
    A-Tag ’17 10/2017

    View Slide