Barrierefreiheit – Internet fuer alle

WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch

Internet für alle!

Accessibility

Barrierefreiheit


Elisabeth Hölzl @taxifisch

• Arbeite seit etwa 5 Jahren mit WordPress

• Theme-Anpassungen und Custom-Themes

• Mitbegründerin des WPMeetUp München


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


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.



Oder?




Barrierefreie Websites funktionieren für alle Besucher gut, unabhängig von

➡ Hardware, ➡ Software, ➡ körperlichen Einschränkungen ➡ anderen, eventuell vorübergehenden Schwierigkeiten


Und wie wird meine Website jetzt barrierefrei?


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


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>' )

);



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 …

…sind zwar richtig und wichtig, alleine für sich machen sie aber keine barrierefreie Website.


Barrierefrei.

Ungehindert – Ohne Einschränkung

Accessibility = „Zugänglichkeit“


Let’s go.


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


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.


Klare Ziele – klare Struktur

➡ Was ist das Ziel der Website? ➡ Wer wird sie benutzen? ➡ Welche Bedürfnisse haben diese Benutzer, warum kommen

sie?


Klare Ziele – klare Struktur

Mobile first trifft Accessibility first: Die Konzentration auf das Wesentliche.



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



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



Erfolgserlebnis Respektiere Einstellungen der Besucher

VorhersehbaresVerhalten Biete Orientierung

und Hilfe

Viele Wege führen nach Rom


Orientieren und Wege finden


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



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“



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



Klare Präsentation


Klare Präsentation

1. Design

➡ Flexibler Grid – Responsive Design ➡ Flexibles Design ➡ Weißraum. VIEL davon. ➡ Ausreichend große Zeilenabstände ➡ Deutlicher Kontrast


Klare Präsentation

2. Inhalte

➡ Leicht zu „scannen“ ➡ Logischer Aufbau ➡ Übersichtlich organisieren:

➡ Listen ➡ Kurze Absätze, gute Überschriften

➡ Visuelle Elemente, um Informationen zu verdeutlichen


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


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


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



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


https://www.ted.com/

https://www.ted.com/


ZIEL


Zusammenfassung

Gut ist: ➡ Klare und übersichtliche Website ➡ Einfach zu bedienen (man nimmt die Navigation

quasi nicht wahr).


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


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



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

http://www.w3.org/Style/CSS/

http://www.w3.org/html/

http://www.w3.org/WAI/

http://www.w3.org/WAI/intro/aria

https://developer.mozilla.org/de/docs/Web/Barrierefreiheit/ARIA

http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/

http://www.oaa-accessibility.org/

http://www.bbc.co.uk/accessibility/

http://www.biene-award.de/preistraeger/

http://code.tutsplus.com/series/accessibility--cms-799


Lesetipp

„A Web For Everyone: Designing Accessible User Experiences“ von Sarah Horton und Whitney Quesenbery, Rosenfeld Media, 1. Auflage 2014 Kindle-Ausgabe


BildnachweisCrowded 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

https://www.flickr.com/photos/bburky_/5906522047/

https://www.flickr.com/photos/mikecogh/11684068595

https://www.flickr.com/photos/mhofstrand/27021003

https://www.flickr.com/photos/elzey/12298142876/

https://www.flickr.com/photos/drachmann/327122302/

https://www.flickr.com/photos/newchurch/3634049396/

https://www.flickr.com/photos/virgin_goddess64/17165043447

https://www.flickr.com/photos/68942208@N02/16881464508/

https://www.flickr.com/photos/seeminglee/3967329241