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

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

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

Es geht nicht um Behinderung, sondern um Beeinträchtigung

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 …“

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

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

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“

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

Finde das richtige Mittelmaß bezüglich Satzlängen

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

Tools zum Testen von Farbfehlsichtigkeit

Tools zum Testen von Farbfehlsichtigkeit
www.getstark.co

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 …
Text: #333
Link: #006567
Text: #333
Link: #009090
… oder schön unterstreichen
Ist immerhin so gelernt.

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

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

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.

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

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

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

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

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

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

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;
}

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

Semantik!
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>

Semantik!
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>

Semantik!
<label>
<input type="radio" name="farbe" value="blau"> Blau
</label>
<label>
<input type="radio" name="farbe" value="gruen"> Grün
</label>

Semantik!
Chromevox bei Fokus auf Elementen:
Text bearbeiten
Suchen, Schaltﬂäche
<input type="text">
<button>Suchen</button>

Semantik!
„Suchbegriff eingeben“, Text bearbeiten
<input type="text" placeholder="Suchbegriff eingeben“>

Semantik!
„Suchbegriff eingeben“, Text bearbeiten
<span>Filmsuche</span>
<input type="text" placeholder="Suchbegriff eingeben">

Semantik!
„Filmsuche“ with hint „Suchbegriff eingeben“, Text bearbeiten
<label for="search">Filmsuche</label>
<input type="text" id="search" placeholder="Suchbegriff eingeben">

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;
}

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

<a href="#">
::before
</i>
Suche
</a>
Suche
„Suche“

<a href="#">
::before
</i>
<span class="visihidden">Suche</a>
</a>
„Suche“
<button>
::before
</i>
<span class="visihidden">Suche</a>
</button>

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

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.ä.)

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.

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.

Geht gar nicht
Dieser Text für das Alt-Attribut geht gar nicht! Kommt wohl durch das Content
Management System. Ist aber sehr peinlich …

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

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

DankeNils Lauk, Mediale Hamburg, 2017

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!

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie A11y ist für alle da - auch für Dich!

Ähnlich wie A11y ist für alle da - auch für Dich! (20)

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