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öflich“
• 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
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 finden 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 Touchfläche sollte 7 bis 10mm betragen.
• Die Touchflä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
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
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, Schaltfläche
<input type="text">
<button>Suchen</button>
43. Semantik!
Das Label stellt Verbindung her
Chromevox bei Fokus auf Elementen:
„Suchbegriff eingeben“, Text bearbeiten
Suchen, Schaltflä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, Schaltflä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, Schaltfläche
<label for="search">Filmsuche</label>
<input type="text" id="search" placeholder="Suchbegriff eingeben">
<button>Suchen</button>
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
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/