1. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Internet für alle!
Accessibility
Barrierefreiheit
2. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Elisabeth
Hölzl
@taxifisch
• Arbeite seit etwa 5 Jahren mit
WordPress
• Theme-Anpassungen und
Custom-Themes
• Mitbegründerin des
WPMeetUp München
3. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Motivation
➡ Ich ärgere mich leidenschaftlich über schlecht
bedienbare Websites
➡ Ich bin stark kurzsichtig und stoße selbst damit öfter
mal an meine Grenzen
➡ Das Internet Senioren näher bringen
4. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Wen betrifft Barrierefreiheit?
✓ Menschen, die nicht sehen und keine Maus benutzen
können
✓ Gehörlose Menschen, deren erste Sprache
Gebärdensprache ist
✓ BesucherInnen, die eine andere Muttersprache haben
✓ Menschen, die technische Hilfsmittel benutzen (z.B.
Screenreader)
✓ Menschen, die farbenblind sind oder schwache
Kontraste nicht sehen können.
7. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Wen betrifft Barrierefreiheit?
Barrierefreie Websites funktionieren für alle Besucher gut,
unabhängig von
➡ Hardware,
➡ Software,
➡ körperlichen Einschränkungen
➡ anderen, eventuell vorübergehenden Schwierigkeiten
8. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Und wie wird meine Website
jetzt barrierefrei?
9. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Regeln, die viele kennen (1)
Überschriften
Hierarchisch angeordnete Überschriften – <h1>, <h2>, …
WordPress: z.B. Post titles, Widget titles
Wer profitiert:
Benutzer von Screenreader und
Spracherkennungssoftware,
SEO
10. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Link-Text
Links: eindeutige Bezeichnung, ohne Kontext verständlich
WordPress: „Weiterlesen…“ um einen „sprechenden“ Link für
Screenreader ergänzen:
the_content(
sprintf(
__( 'Continue reading%s', 'textdomain' ),
'<span class="screen-reader-text">
'.get_the_title().'</span>'
)
);
Regeln, die viele kennen (2)
11. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
ARIA Landmark Roles
Seiteninhalte werden in Sektionen unterteilt, denen
jeweils eine „Landmark“ zugewiesen wird.
So kann man mit dem Screenreader die verschiedenen
Landmarks „scannen“.
Beispiel:
<nav role="navigation" aria-label="<?php
_e( 'Primary Navigation','textdomain' ); ?>“>
Regeln, die viele kennen (3)
13. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Regeln, die viele kennen …
…sind zwar richtig und wichtig, alleine für sich machen
sie aber keine barrierefreie Website.
16. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Standardkonform.
➡ Semantisch korrekter Code
➡ Trennung von Design und Struktur
➡ Benutze weit verbreitete Standardanwendungen
➡ Beachte die korrekte Reihenfolge von Elementen, die
zusammen gehören
(bitte nicht unterbrechen, danke!)
17. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Standardkonform.
Denn:
➡ Screenreader lesen von OBEN nach UNTEN
➡ Wenn sich nachträglich OBEN was ändert „merkt“ der
Screenreader das nicht.
➡ Wichtiges wird grundsätzlich OBEN erwartet.
18. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Klare Ziele – klare Struktur
➡ Was ist das Ziel der Website?
➡ Wer wird sie benutzen?
➡ Welche Bedürfnisse haben diese Benutzer, warum kommen
sie?
19. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Klare Ziele – klare Struktur
Mobile first trifft Accessibility first:
Die Konzentration auf das Wesentliche.
21. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Einfach zu benutzen.
➡ Mit verschiedensten Geräten leicht zu bedienen.
➡ Buttons/Bedienelemente:
Groß genug und mit ausreichend Weißraum außenrum
➡ Links im selben Fenster öffnen
➡ Keine Elemente, die von selbst starten (Slider, Audio, Video..)
22. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Einfach zu benutzen.
Ein paar Grundsätze für Formulare:
➡ Korrekte Labels
➡ Anweisungen etc. ÜBER dem Formularfeld
➡ Prüfung der Eingabe und Rückmeldung NACH dem Feld
➡ Keine Anwendung mit Zeitlimit, wenn nötig muss man mehr
Zeit fordern können
23. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Einfach zu benutzen.
Erfolgserlebnis Respektiere
Einstellungen
der Besucher
Vorhersehbares
Verhalten Biete Orientierung
und Hilfe
Viele Wege
führen nach Rom
24. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Orientieren
und Wege
finden
25. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Orientieren und Wege finden.
Draußen wissen wir, wonach wir suchen müssen:
➡ Verkehrsschilder sind genormt und befinden sich an
vorhersehbaren Stellen
➡ Beschilderung an öffentlichen Orten z.B. mit eingeübten
Piktogrammen
26. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Orientieren und Wege finden.
Im Web gibt es keine allgemein gültigen Normen:
➡ Navigation sieht häufig sehr unterschiedlich aus
➡ Oft fehlt der Überblick, man sieht nur einen kleinen
Ausschnitt.
➡ Auf vielen Websites kann man sich regelrecht „verlaufen“
27. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Orientieren und Wege finden.
Klare und konsistente „Wegweiser“ und
Orientierungspunkte geben Sicherheit.
➡ Eindeutige Standortbestimmung (z.B. Breadcrumb)
➡ Klar zu erkennende „Wege zurück“
➡ Nicht zuletzt: Eine gut funktionierende Suchfunktion
31. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Klare Präsentation
2. Inhalte
➡ Leicht zu „scannen“
➡ Logischer Aufbau
➡ Übersichtlich organisieren:
➡ Listen
➡ Kurze Absätze, gute Überschriften
➡ Visuelle Elemente, um Informationen zu verdeutlichen
32. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Leichte Sprache
Ziel: Informationen werden möglichst einfach formuliert
Wer profitiert:
✓ Menschen mit Lernstörungen
✓ Menschen, die eine andere Muttersprache haben.
✓ Menschen, die vorübergehend eingeschränkt sind, z.B.
durch Müdigkeit, Stress, Krankheit
33. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Leichte Sprache
➡ Schreibe für Dein Publikum!
➡ Erläutere Fachbegriffe –biete z.B. ein Glossar an
➡ Benutze kurze Sätze und aktive Sprache.
➡ Logische Abläufe
➡ Bei Anwendungen: Erläutere vor jedem Schritt was zu
tun ist
➡ Visuelle Elemente zur Verdeutlichung
34. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Medien
Biete verschiedene Möglichkeiten, die Information zu
erfassen, also zum Beispiel Video oder Transcript zum
Lesen.
Lasse Anwendungen nie beim Öffnen der Seite
automatisch starten. (Gilt auch für Slider!)
36. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Medien
➡ Schreibe sinnvolle Alt-Attribute:
➡ Leer lassen, falls das Bild nur Deko ist
➡ Kurze inhaltliche Beschreibung, so dass die
Bedeutung des Bildes klar wird
➡ Stelle bei Videos Untertitel und Beschreibung zur
Verfügung, möglichst Transcript
39. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Zusammenfassung
Gut ist:
➡ Klare und übersichtliche Website
➡ Einfach zu bedienen (man nimmt die Navigation
quasi nicht wahr).
40. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Zusammenfassung
➡ Lerne die Besucherinnen und ihre Ziele genau
kennen.
➡ Biete nur die wichtigsten Punkte auf der obersten
Ebene.
➡ Biete Anleitung und Hilfe zur rechten Zeit
➡ Gib Feedback, zum Beispiel über den Fortschritt bei
einer Anwendung
41. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Zusammenfassung
Du gewinnst:
➡ Besucherinnen die sich wohl fühlen und Spaß beim
Erkunden haben
➡ Besucherinnen die sich auf ihre Aufgabe
konzentrieren und sie abschließen können
➡ Besucherinnen die gerne wieder kommen
43. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Links zum Nachlesen
✓ http://www.einfach-fuer-alle.de/umsetzen/
✓ http://www.w3.org/Style/CSS/
✓ http://www.w3.org/html/
✓ http://www.w3.org/WAI/ Web Accessibility Initiative
✓ http://www.w3.org/WAI/intro/aria Accessible Rich Internet Applications Suite
✓ https://developer.mozilla.org/de/docs/Web/Barrierefreiheit/ARIA ARIA auf deutsch
✓ (http://zomigi.com/blog/videos-of-screen-readers-using-aria-
updated/ Screenreader-videos)
✓ http://www.oaa-accessibility.org/ OpenAjax alliance
✓ http://www.bbc.co.uk/accessibility/Anleitungen für User mit verschiedensten
Einschränkungen
✓ Zum Anschauen: http://www.biene-award.de/preistraeger/
✓ Tutorial: http://code.tutsplus.com/series/accessibility--cms-799
44. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Lesetipp
„A Web For Everyone:
Designing Accessible User
Experiences“
von Sarah Horton und
Whitney Quesenbery,
Rosenfeld Media, 1. Auflage 2014
Kindle-Ausgabe
45. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
Bildnachweis
Crowded Metro by Blake Burkhardt
https://www.flickr.com/photos/bburky_/5906522047/
Keeping in Touch by Michael Coghlan
https://www.flickr.com/photos/mikecogh/11684068595
Never too old by Michelle Hofstrand
https://www.flickr.com/photos/mhofstrand/27021003
Ramp to nowhere by Richard Elzey
https://www.flickr.com/photos/elzey/12298142876/
Question mark by drachmas
https://www.flickr.com/photos/drachmann/327122302/
Hockenheimring Start Ziel by
https://www.flickr.com/photos/newchurch/3634049396/
Lonely Road by Tina
https://www.flickr.com/photos/virgin_goddess64/17165043447
Beachy Head Lighthouse by Tom Lee
https://www.flickr.com/photos/68942208@N02/16881464508/
Pinsel by See-ming Lee
https://www.flickr.com/photos/seeminglee/3967329241