Accessibility für DeveloperInnen: Hello World!

A presentation at A-Tag in October 2017 in Vienna, Austria by Manuel Matuzovic

Slide 1

Slide 1

Accessibility für DeveloperInnen

<h1>Hello World! </h1> Manuel Matuzovi ć
   @mmatuzo

A-Tag ’17 10/2017

Slide 2

Slide 2

Kölner Dom von einer Brücke aus fotografiert

Slide 3

Slide 3

webclerks Twitter @mmatuzo medium @matuzo Manuel Matuzovi ć

manuel@matuzo.at

Slide 4

Slide 4

Das erst Mal bewusst und intensiver ha ! e ich im Zuge der 10k Apart Competition mit Webaccessibility zu tun.

Slide 5

Slide 5

Das Publikum beim A-Tag 2016.

Slide 6

Slide 6

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

Slide 7

Slide 7

Einfach beginnen.

Slide 8

Slide 8

Wie habe ich begonnen? Welche Ressourcen kann ich empfehlen?

Slide 9

Slide 9

RESSOURCEN

  • MEINE TIPPS Au " eilung ▸ Lernmaterial ▸ Blogs/Portale/Newsletter ▸ VertreterInnen ▸ Events ▸ Plugins/Libraries ▸ Listen

Slide 10

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

Slide 11

Slide 11

RESSOURCEN - MEINE TIPPS Lernmaterial ▸ Egghead.io Videokurs –

Start Building Accessible Web Applications Today

▸ Accessibility for Everyone ( Buch ) von Laura Kalbag

Slide 12

Slide 12

RESSOURCEN - MEINE TIPPS Blogs/Portale/Newsle ! er ▸ webaim.org

  • Artikel, Tools, Mailinglist, etc. ▸ webaim Newsletter

▸ Web Content Accessibility Guidelines (WCAG) ( Liste )

▸ a11yweekly ( Newsletter )

Slide 13

Slide 13

RESSOURCEN - MEINE TIPPS Blogs/Portale/Newsle ! er ▸ Adrian Roselli ( Blog ) ▸ The Paciello Group ( Blog )

Slide 14

Slide 14

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

Slide 15

Slide 15

RESSOURCEN - MEINE TIPPS VertreterInnen auf Twi ! er ▸ Steve Faulkner ( @ stevefaulkner )

▸ Rob Dodson ( @ rob_dodson ) ▸ Scott O’Hara ( @scottohara ) ▸ Marco Zehe ( @MarcoInEnglish ) ▸ Jo Spelbrink ( @joville ) ▸ Weitere auf Github

Slide 16

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

Slide 17

Slide 17

RESSOURCEN - MEINE TIPPS Plugins/Libraries ▸ a11y-dialog auf GitHub

▸ Frend frend.co

▸ Inclusive Components inclusive- components.design

▸ a11y.js allyjs.io

Slide 18

Slide 18

h " p://frend.co

Slide 19

Slide 19

h " ps://inclusive-components.design/

Slide 20

Slide 20

h " ps://allyjs.io/

Slide 21

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

Slide 22

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 )

Slide 23

Slide 23

Welche neuen Erkenntnisse habe ich erlangt?

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

Permanent Temporär Situationsbezogen

Slide 29

Slide 29

Menschen wollen überzeugt werden, dass sich Barrierefreiheit auszahlt.

Slide 30

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?

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

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

Slide 34

Slide 34

CSS-Only Lösungen sind o " weniger accessible als JS-Lösungen.

Slide 35

Slide 35

Kommunikation im Team ist sehr wichtig.

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

Was habe ich mit den neuen Erkenntnissen angefangen?

Slide 39

Slide 39

Artikel auf Anfängerniveau geschrieben.

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

Ich spreche selber auf Meetups und Konferenzen.

Slide 43

Slide 43

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

Slide 44

Slide 44

Ich bin aktiver auf Twi ! er, speziell zum Thema.

Slide 45

Slide 45

Was könnt ihr tun?

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

Einfach beginnen.

Slide 49

Slide 49

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

Slide 50

Slide 50

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

Slide 51

Slide 51

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

Slide 52

Slide 52

Wissen aneignen und Online, auf Meetups und Konferenzen teilen.

Slide 53

Slide 53

…und vielleicht beim A-Tag 2018 sprechen.

Slide 54

Slide 54

Danke Manuel Matuzovi ć

   @mmatuzo

A-Tag ’17 10/2017