A11y ist für alle da - auch für Dich!

1. A11y ist für alle da - auch für Dich!

2. A11y ist für alle da - auch für Dich! A11y = Accessibility 11 Buchstaben, die sich keiner merken kann … }

3. Nils Lauk @hirsebirse

4. Quelle: https://www.ﬂickr.com/photos/ﬁrelizard5/8479806007/ Eine Zielgruppe? Viele Gewinner!

5. Es geht nicht um Behinderung, sondern um Beeinträchtigung

6. Quelle: https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf Arm gebrochen: Maus oder Telefon mit der „falschen“ Hand bedienen Mobiltelefon in der Sonne, Seite mit wenig Kontrast Videonachricht auf dem Telefon, während laute Party im Gange ist „Okay, Google …“

7. Worauf kann Design achten?

8. Dünne Schrift und zu geringer Kontrast sind zu vermeiden http://webaim.org/resources/contrastchecker/

9. Eine Überschrift ist eine Überschrift Screenreader hangeln sich an Überschriften durchs Dokument JA - <h1> bis <h6> - Vorher Gedanken über Struktur machen NEIN - .h1 bis .h6 und sonst nichts - Nicht nur übers Visuelle gehen

10. Vermeide den übermäßigen Gebrauch von VERSALIEN • Versalien sind schwer zu lesen • Versalien können Screenreader verwirren • Versalien sind „unhöﬂich“ • Menschen mit Leseschwäche werden benachteiligt • Für Entwickler: Lieber mit CSS stylen!  .gross {text-transform: uppercase;} • Aber lieber einfach lassen … „Schrei doch nicht so“

11. Finde das richtige Mittelmaß bezüglich Satzlängen Zu lange Zeilen vermeiden - Man verliert die Zeile Zu kurze Zeilen vermeiden - Man muss zu viel hin und zurück

12. Finde das richtige Mittelmaß bezüglich Satzlängen

13. Finde das richtige Mittelmaß bezüglich Satzlängen

14. Kommuniziere nicht über Farbe Farbfehlsichtkeit kommt bei 8-9% der Männer und 1% der Frauen vor

18. Kommuniziere nicht über Farbe Tools zum Testen von Farbfehlsichtigkeit

20. Kommuniziere nicht über Farbe Tools zum Testen von Farbfehlsichtigkeit www.getstark.co

22. Ein Link soll als solcher zu erkennen sein Farbe, Gestaltung - Hauptsache er hebt sich vom Fließtext ab Dies ist ein einfacher Fließtext, der an irgendeiner Stelle einen Link hat - ich sage aber nicht wo genau. Viele werden es erkennen, Menschen mit Rot-Grün-Schwäche könnten ihre Probleme damit haben … Dies ist ein einfacher Fließtext, der an irgendeiner Stelle einen Link hat - ich sage aber nicht wo genau. Viele werden es erkennen, Menschen mit Rot-Grün-Schwäche könnten ihre Probleme damit haben … Dies ist ein einfacher Fließtext, der an irgendeiner Stelle einen Link hat - ich sage aber nicht wo genau. Viele werden es erkennen, Menschen mit Rot-Grün-Schwäche könnten ihre Probleme damit haben … Text: #333 Link: #006567 Text: #333 Link: #009090 … oder schön unterstreichen Ist immerhin so gelernt.

23. Ein Link soll Sinn machen Wie nenne ich meinen Link? • Hier ﬁnden Sie mehr zu unseren Produkten • Klicken Sie hier für Informationen über uns Nicht gut • Finden Sie mehr heraus über unsere Produkte • Klicken Sie hier für Informationen über uns Besser

24. Nimm dem User nicht das Outline weg a:focus { outline: none; }

25. Gib Platz zum Klicken a { padding: .4em; } „Touch targets must be large enough to touch accurately.“ — BBC Mobile Accessibility Guidelines BBC schlägt vor • Die empfohlene Touchﬂäche sollte 7 bis 10mm betragen. • Die Touchﬂäche kann z.B. durch Zugabe von padding erzeugt werden. • Buttons immer „mit Luft“ versehen.

26. Keine Info auf den Bildern Nicht in Photoshop auf dem Bild schreiben, wenn es wichtig ist

27. Animationen und Videos können Schwindel auslösen Sparsam mit Bewegtbildern umgehen, Kontrolle geben, Fokussieren

28. Schönes Video, aber … Untertitel und/oder Transkript bereitstellen

32. Worauf kann Technik achten?

33. Semantik! Ein richtiger Seitenaufbau hilft allen <header> role="banner" Landmark: Banner <main> role="main" Landmark: main <aside> role="complementary" Landmark: Seitenbereich <nav> role="navigation" Landmark: Navigation <footer> role="contentinfo" Landmark: contentinfo Benutze die richtigen HTML5-Elemente oder wenigstens das „role“-Äquivalent

34. Semantik!

35. Semantik! • Benutze Landmarks, also vernünftige Auszeichnungen im Markup (nav, main, …) • Landmarks können a.) aufgelistet und b.) direkt angesprungen werden • Kann z.B. <main> nicht benutzt werden, dann setze role="main" ein • Überschriften (h1 - h6) vernünftig einsetzen, keine <div class="wie-h1"> • Überschriften unterteilen das Dokument und können direkt angesprungen werden

36. Semantik! aria-attribute unterstützen ARIA steht für Accessible Rich Internet Applications Beispiele für aria-Attribute aria-checked aria-describedby aria-disabled aria-hidden aria-labelledby aria-required … https://www.w3.org/TR/wai-aria/states_and_properties

37. Semantik! aria-attribute unterstützen <label for="pw">Passwort</label> <input type="password" id="pw" aria-describedby="pw-hint"> <button>Abschicken</button> <dialog id="pw-hint">Passwort muss mindestens zwölf Zeichen enthalten</dialog> dialog { display: none; background-color: yellow; padding: .3em; } #pw:focus ~ dialog { display: block; }

38. Semantik! Das Label stellt Verbindung her <ul> <li> <input type="checkbox"> Salami </li> </ul> Chromevox: „Kästchen nicht aktiviert, Listenelement“ „aktiviert, Kästchen aktiviert“ VoiceOver: „deaktiviert: Markierungsfeld“ „markiert: Markierungsfeld“ Negative Nebeneffekte - Klick auf „Salami“ setzt kein Häkchen - Keine Ahnung, was ich da anhake

39. Semantik! Das Label stellt Verbindung her Chromevox: „Listenelement: Salami, Kästchen nicht aktiviert“ „aktiviert, Salami, Kästchen aktiviert“ VoiceOver: „Salami, deaktiviert: Markierungsfeld“ „markiert: Salami, Markierungsfeld“ Positive Nebeneffekte - Klick auf „Salami“ setzt Häkchen - Man weiß, was man anhakt <ul> <li> <input type="checkbox" id="item1"> <label for="item1">Salami</label> </li> </ul>

40. Semantik! Das Label stellt Verbindung her Chromevox: „Salami, Kästchen nicht aktiviert, Listenelement“ „aktiviert, Salami, Kästchen aktiviert“ VoiceOver: „Salami, deaktiviert: Markierungsfeld“ „markiert: Salami, Markierungsfeld“ <ul> <li> <label> <input type="checkbox" id="item1"> Salami </label> </li> </ul>

41. Semantik! Das Label stellt Verbindung her <label> <input type="radio" name="farbe" value="blau"> Blau </label> <label> <input type="radio" name="farbe" value="gruen"> Grün </label>

42. Semantik! Das Label stellt Verbindung her Chromevox bei Fokus auf Elementen: Text bearbeiten Suchen, Schaltﬂäche <input type="text"> <button>Suchen</button>

43. Semantik! Das Label stellt Verbindung her Chromevox bei Fokus auf Elementen: „Suchbegriff eingeben“, Text bearbeiten Suchen, Schaltﬂäche <input type="text" placeholder="Suchbegriff eingeben“> <button>Suchen</button>

44. Semantik! Das Label stellt Verbindung her Chromevox bei Fokus auf Elementen: „Suchbegriff eingeben“, Text bearbeiten Suchen, Schaltﬂäche <span>Filmsuche</span> <input type="text" placeholder="Suchbegriff eingeben"> <button>Suchen</button>

45. Semantik! Das Label stellt Verbindung her Chromevox bei Fokus auf Elementen: „Filmsuche“ with hint „Suchbegriff eingeben“, Text bearbeiten Suchen, Schaltﬂäche <label for="search">Filmsuche</label> <input type="text" id="search" placeholder="Suchbegriff eingeben"> <button>Suchen</button>

46. Vernünftige Links Unsichtbare Links, sichtbare Links, umbenannte Links <a href="#content" class="visihidden">Springe direkt zum Inhalt</a> <ul> <li> <a href="seite.html">Impressum</a> </li> <li> <a href="seite2.html" aria-hidden="true">Kontakt</a> </li> </ul> <main id="content"> <p>Viel Text und Blabla. Lesen Sie <a href="products.html" aria- label="Produkte">mehr</a>.</p> </main> .visihidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .visihidden:focus { clip: auto; height: auto; overflow: auto; position: relative; width: auto; }

47. Links mit Icons - aber richtig Nur visuell ist nicht gut <a href="#"> <i class="fi-search size-36" aria-hidden="true"> ::before </i> </a>

48. Links mit Icons - aber richtig Nur visuell ist nicht gut <a href="#"> <i class="fi-search size-36" aria-hidden="true"> ::before </i> Suche </a> Suche „Suche“

49. Links mit Icons - aber richtig Nur visuell ist nicht gut <a href="#"> <i class="fi-search size-36" aria-hidden="true"> ::before </i> <span class="visihidden">Suche</a> </a> „Suche“ <button> <i class="fi-search size-36" aria-hidden="true"> ::before </i> <span class="visihidden">Suche</a> </button>

50. Was ist auf dem Bild? Immer das alt-Attribut für Bilder setzen VoiceOver: „b s p bild 4 5 1 8 6 3 2 5 0 x 2 5 0 j p g, Bild“ <img src="pics/bsp-bild-451863-250x250.jpg" width="250" height="250"> Schlecht VoiceOver: „ “ <img src="pics/bsp-bild-451863-250x250.jpg" alt width="250" height="250"> Besser VoiceOver: „Hamburgs Michel, Bild“ <img src="pics/bsp-bild-451863-250x250.jpg" alt="Hamburgs Michel" width="250" height="250"> Richtig National Federation of the Blind gegen Target Corp. 6 Millionen Dollar Strafe wegen fehlender Alt-Attribute

51. Was ist auf dem Bild? alt-Attribut in der weiten Webwelt Schlecht Der Alt-Text soll beschreiben, was auf dem Bild zu sehen ist! Dieser Text hier ist viel zu lang. Besser wäre: „HSV-Sponsor Klaus-Michael Kühne mit gelangweiltem Gesichtsausdruck“ (o.ä.)

52. Was ist auf dem Bild? alt-Attribut in der weiten Webwelt Schlechter Dieser Text ist besagt einfach nichts. Besser wäre: „Stempel mit Aufschrift ‚Unheilbar‘ oder einfach ein leeres Alt-Attribut, das würde dann „überlesen“ werden.

53. Was ist auf dem Bild? alt-Attribut in der weiten Webwelt Gut Augen zu und vorstellen, eine Stimme liest es vor. Kann man sich bei diesem Text etwas vorstellen, was auf dem Bild zu sehen ist? Ja. Sehr gut beschrieben.

54. Was ist auf dem Bild? alt-Attribut in der weiten Webwelt Geht gar nicht Dieser Text für das Alt-Attribut geht gar nicht! Kommt wohl durch das Content Management System. Ist aber sehr peinlich …

55. Nicht den Zoom auf mobilen Geräten deaktivieren Manche Menschen sind darauf angewiesen <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1"> „user-scale=0 ist wie das Abreißen einer Rollstuhlrampe vor einer Behörde, weil die ‚nicht schön‘ ist.“ — Nils Lauk

56. A11y geht alle etwas an Jeder profitiert davon - jetzt oder später • Das Internet ist für alle da • Niemand sollte ausgesperrt werden, niemandem Informationen vorenthalten • Machen und keine Furcht davor haben • Selbst kleine Dinge sind hilfreich (noch mal: Leg los!) • Es gibt Richtlinien - aus tech. Sicht und für Umsetzung offizieller Seiten • Wer nicht A11y berücksichtigt, kann „finanziell bestraft“ werden • A11y ist nicht die Aufgabe einer Person, alle müssen daran arbeiten • Nicht nur Design und Technik, auch Contentmanager sind gefragt (einfache Sprache) • Du machst die Seite nicht für Dich, sondern für die Leute „da draußen“ • Du kannst jederzeit auch eine Beeinträchtigung erfahren, Du machst das für Dich • A11y ist einfach das Richtige zu machen • Etwas für eine Zielgruppe zu machen, bedeutet für andere Zielgruppen zu arbeiten

57. DankeNils Lauk, Mediale Hamburg, 2017

58. Weiterführende Links Es gibt eine Fülle an Informationsquellen zum Thema A11y im Internet. Hier nur eine ganz kleine Auswahl: https://www.microsoft.com/en-us/accessibility/default.aspx https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/ INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf (21MB) https://developers.google.com/web/fundamentals/accessibility/ http://www.bbc.co.uk/guidelines/futuremedia/accessibility/ https://webaim.org/ https://developer.mozilla.org/en-US/docs/Web/Accessibility https://www.webaccessibility.com/best_practices.php?technology_platform_id=5 https://www.smashingmagazine.com/2016/06/improving-color-accessibility-for-color-blind-users/ https://www.smashingmagazine.com/2012/06/links-should-never-say-click-here/ https://hodigital.blog.gov.uk/category/accessibility/ https://insidegovuk.blog.gov.uk/2014/08/04/sentence-length-why-25-words-is-our-limit/

A11y ist für alle da - auch für Dich!

A11y ist für alle da - auch für Dich!

Recommandé

Contenu connexe

Similaire à A11y ist für alle da - auch für Dich!

Similaire à A11y ist für alle da - auch für Dich!(20)

A11y ist für alle da - auch für Dich!