Beitrag zu den Codetalks 2018. Beispiele aus der Praxis zeigen, wie kaputt das Internet ist - und damit unzugänglich. Im Talk waren noch viele Videos enthalten, die Screenreader-Beispiele zeigten.

1. Nils Lauk
Das Internet ist für alle da … sagen sie
Frontend

2. Nils Lauk
Teamleiter Entwicklung S-KON AG
@hirsebirse
a11y-101.com

3. Das Internet
ist kaputt!

4. Accessibility ist nicht für den
„Extremfall“, sondern für alle.

5. Quelle: https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf
• Eine Beeinträchtigung haben viele von uns
• Beeinträchtigungen können situativ, temporär oder
permanent sein
• Im Laufe unseres Lebens werden Beeinträchtigungen
immer mehr
• Ja, Ihr werdet älter - Gewöhnt Euch an den
Gedanken

6. Vorurteile
bzgl. A11YSCHWARZ
WEISS

7. • Accessibility ist teuer
• Accessibility ist hässlich
• Accessibility ist schwer
Vorurteile

8. Worauf kann
Technik achten?

9. Semantik!

10. Der richtige Seitenaufbau
Sauberes Markup hilft, „role“ kann nachhelfen
<header>
role="banner"
Landmark: Banner
<main>
role="main"
Landmark: main
<aside>
role="complementary"
Landmark: Seitenbereich
<footer>
role="contentinfo"
Landmark: contentinfo
<nav>
role="navigation"
Landmark: Navigation

11. Der richtige Seitenaufbau

12. Der richtige Seitenaufbau

13. Der richtige Seitenaufbau

14. Der richtige Seitenaufbau
<nav class="navi" aria-label="Hauptnavigation">
(…)
</nav>
<main>
(…)
</main>
<div class="seite">
(…)
</div>
<footer class="footer" role="contentinfo">
<nav aria-label="Seitennavigation im Footer">
(…)
</nav>
</footer>

15. Der richtige Seitenaufbau
<div class="seite">
<aside aria-labelledby="aside-one">
<h3 id="aside-one">Randnotiz</h3>
<p>...</p>
</aside>
<aside aria-labelledby="aside-two">
<h3 id="aside-two">Kleiner Hinweis</h3>
<p>...</p>
</aside>
</div>

16. Beziehungen erstellen mit <label>

17. Beziehungen erstellen mit <label>

18. Beziehungen erstellen mit <label>
<form action="/suche">
<input placeholder="Suchbegriff / Artikelnr. eingeben" type="text">
<button class="js_submitButton sanSearchButton" type="submit" title="Suche">
<span>»</span>
</button>
</form>
Original
Danach
<form action="/suche">
<label for="thesearch" class="sr-only">Artikelsuche auf otto.de</label>
<input placeholder="Suchbegriff / Artikelnr. eingeben"
class="searchslot" type=„text" id="thesearch">
<button class="suche" type="submit">
<i aria-hidden="true" class="magnify"></i>
<span class="sr-only">Suche starten</span>
</button>
</form>
.sr-only {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

19. Beziehungen erstellen mit <label>

20. Erklär’ mal mit <aria-describedby>

21. Erklär’ mal mit <aria-describedby>

22. Erklär’ mal mit <aria-describedby>
Original
<label class="a" for="upassword">Passwort</label>
<div class="b" id="passwordInput">
<input id="upassword" name="123" class="c" data-info="Das von Ihnen gewählte
Passwort sollte zwischen 6 und 15 Buchstaben, Zahlen oder Sonderzeichen enthalten."
aria-describedby="upassword-error" placeholder="Passwort" type="password">
</div>
<label class="z" for="password">Passwort</label>
<div class="y">
<input id="password" name="upassword" type="password" aria-describedby="pw-info"
placeholder="Passwort">
<p class="x" id="pw-info">
Das von Ihnen gewählte Passwort sollte zwischen 6 und 15 Buchstaben, Zahlen oder
Sonderzeichen enthalten.
</p>
</div>
Danach

23. Erklär’ mal mit <aria-describedby>
optisch
wird vorgelesen onFocus

24. Design darf nicht Semantik schlagen

25. Design darf nicht Semantik schlagen

26. Design darf nicht Semantik schlagen

27. Die Sache mit dem alt-Attribute
Totaler Fail
ist kein alt-Attribute da, wird
der Dateiname vorgelesen

28. Die Sache mit dem alt-Attribute
Totaler Fail
ist kein alt-Attribute da, wird
der Dateiname vorgelesen

29. Die Sache mit dem alt-Attribute
Auch ein Fail
Dateiname automatisch als
alt-Attribute eingesetzt

30. Die Sache mit dem alt-Attribute
Ganz schön schlecht
vermutlich automatisch
eingesetztes alt-Attribute

31. Die Sache mit dem alt-Attribute
Ganz schön faul
alt-Attribut aus Headline
zusammengeschustert

32. Die Sache mit dem alt-Attribute
In Ordnung
Ist das Bild nur dekorativ,
wird das alt-Attribut leer
gelassen

33. Die Sache mit dem alt-Attribute
Endlich richtig
Das alt-Attribute soll be-
schreiben was auf dem Bild
zu sehen ist

34. Zusammengefasst
• Wir können jederzeit selber zugängliche Seiten gebrauchen
• Denkt an die Menschen, nicht an Euch (wobei ja eigentlich schon …)
• Semantik, Landmarks, alt, label, aria-attribute (weniger ist mehr)
• Accessibility ist nicht hässlich, nicht teuer, nicht schwer
• Eine Aufgabe für: Designer, Entwickler, Produktmenschen, Marketing

35. Das Internet muss nicht kaputt
sein. Es kann ein „Internet für
alle“ sein!

36. Danke
Nils Lauk, @hirsebirse, a11y-101.com

37. Fotoquellen
Kaputte Hütte:
Photo by Stephanie Watters Flores on Unsplash https://unsplash.com/photos/FF5HjN9mT4E
Fabrik:
Photo by Ant Rozetsky on Unsplash https://unsplash.com/photos/io7dX_1EFCg