Der Weg zur Barrierefreien Webseite

Der Weg zur Eric Eggert 06.11.2008 BMGFJ Barrierefreien Webseite

Eric Eggert Freier Webdesigner Mitglied der Webkrauts, der HTML5-WG und der BAD-TF des W3C Organisator des WebMontags und des A-Tags ’08 Webdesign seit 2001

Eric Eggert Freier Webdesigner HyperText Markup Language Mitglied der Webkrauts, der HTML5-WG und der BAD-TF des W3C Organisator des WebMontags und des A-Tags ’08 Webdesign seit 2001

Eric Eggert Freier Webdesigner Arbeitsgruppe Mitglied der Webkrauts, der HTML5-WG und der BAD-TF des W3C Organisator des WebMontags und des A-Tags ’08 Webdesign seit 2001

Eric Eggert Freier Webdesigner Mitglied der Webkrauts, der HTML5-WG Before and After Demo Task Force und der BAD-TF des W3C Organisator des WebMontags und des A-Tags ’08 Webdesign seit 2001

Eric Eggert Freier Webdesigner Mitglied der Webkrauts, der HTML5-WG World Wide Web Consortium und der BAD-TF des W3C Organisator des WebMontags und des A-Tags ’08 Webdesign seit 2001

Eric Eggert Freier Webdesigner Mitglied der Webkrauts, der HTML5-WG und der BAD-TF des W3C Organisator des WebMontags und des A-Tags ’08 Webdesign seit 2001

Und wer sind Sie?

Die Geschichte des Barrierefreien Webdesigns ist voller Missverständnisse.

TheFriendlyFiend

Matt Seppings

Oporder

1. Was ist Barrierefreies Webdesign 2. Barrierefreie Webseiten entwickeln 3. Webseiten überprüfen

Was ist Barrierefreies Webdesign?

„Webdesign ist eine inhaltszentrierte Tätigkeit. Am Anfang des Designprozesses steht immer der Inhalt und nicht etwa das Farbschema oder die Idee ein dreispaltiges Layout zu verwenden.“ — „Modernes Webdesign“ von Manuela Hoﬀmann (Seite 18)

Onlinenutzung Quelle: ARD/ZDF-Onlinestudie 2008 1998 2008

Quelle: Umfrage der Aktion Mensch Behinderte Menschen nutzen das Web überproportional.

Quelle: Umfrage der Aktion Mensch DSL ohne DSL Behinderte Menschen nutzen das Web überproportional.

Wozu nutzen Menschen mit Behinderung das Internet? Quelle: Umfrage der Aktion Mensch

Sehbehindert Blind Schwerhörig Gehörlos Motorisch behindert Lese-/Rechtschreib-Schwäche Lernbehinderung Wozu nutzen Menschen mit Behinderung das Internet? Quelle: Umfrage der Aktion Mensch

Video

Wem helfen barrierefreie Webseiten?

Allen!

Allen! cc-by-sa Brett L., William Hook cc-by Paul Traﬀord

• Menschen • mit körperlichen und geistigen Behinderungen • mit hohem Alter • die ungünstigen Lichtverhältnissen ausgesetzt sind • mit langsamer Internetverbindung • die temporär in ihrer Bewegung eingeschränkt sind Allen! cc-by-sa Brett L., William Hook cc-by Paul Traﬀord

• Menschen • mit körperlichen und geistigen Behinderungen • mit hohem Alter • die ungünstigen Lichtverhältnissen ausgesetzt sind • mit langsamer Internetverbindung • die temporär in ihrer Bewegung eingeschränkt sind • Mobilen Endgeräten Allen! cc-by-sa Brett L., William Hook cc-by Paul Traﬀord

• Menschen • mit körperlichen und geistigen Behinderungen • mit hohem Alter • die ungünstigen Lichtverhältnissen ausgesetzt sind • mit langsamer Internetverbindung • die temporär in ihrer Bewegung eingeschränkt sind • Mobilen Endgeräten • Fernseher (Wii anyone?) Allen! cc-by-sa Brett L., William Hook cc-by Paul Traﬀord

Was ist „Barrierefreiheit“?

Gesetzliche Vorschriften

BGG (Behindertengleichstellungsgesetz)

§ 8 Abs. 3 „Die Richtlinien über die Vergabe von Förderungen des Bundes haben vorzusehen, dass bei der Vergabe von Förderungen … die Beachtung dieses Bundesgesetzes … zu berücksichtigen ist, und sichergestellt ist, dass das geförderte Vorhaben den Grundsätzen dieses Bundesgesetzes nicht widerspricht.“ BGG (Behindertengleichstellungsgesetz)

§ 8 Abs. 5 „Barrierefrei sind ... Systeme der Informationsverarbeitung …, wenn sie für Menschen mit Behinderungen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.“ BGG (Behindertengleichstellungsgesetz)

§ 6 Abs. 5 Erläuterungen „Das Vorliegen von Barrierefreiheit ist nach dem Stand der technischen Entwicklung zu beurteilen. Herangezogen werden dafür können beispielsweise ... die WAI-Leitlinien betreﬀend Angebote im Internet.“ BGG (Behindertengleichstellungsgesetz)

WAI-Richtlinien

Web Accessibility Initiative des W3C WAI-Richtlinien

WAI-Richtlinien

ATAG WCAG UAAG

Authoring Tool Accessibility Guidelines ATAG WCAG UAAG

ATAG Web Content Accessibility Guidelines WCAG UAAG

ATAG WCAG User Agent Accessibility Guidelines UAAG

ATAG WCAG UAAG

WCAG1 – 1999

Mit WCAG1 nicht möglich: JavaScript, Flash, PDF

Mit WCAG1 nicht möglich: Portable Document Format JavaScript, Flash, PDF

Mit WCAG1 nicht möglich: JavaScript, Flash, PDF

§ 6 Abs. 5 Erläuterungen „Das Vorliegen von Barrierefreiheit ist nach dem Stand der technischen Entwicklung zu beurteilen. Herangezogen werden dafür können beispielsweise ... die WAI-Leitlinien betreﬀend Angebote im Internet.“ BGG (Behindertengleichstellungsgesetz)

WCAG2 – 2008(hoﬀentlich)

AAA AA A

WCAG2 – A • Textalternativen • Linkziel erkennbar • Sinnvolle Struktur • Sprachauszeichnung • Sinnvolle Vorlese-Sequenz • Fehlererkennung bei der • Farbe nicht als einziges Eingabe Unterscheidungsmerkmal • Labels für • Möglichkeit Audioausgabe Benutzereingaben anzuhalten • Validität • Tastaturbenutzbarkeit • Untertitel für Audio • Anpassbare Zeitrahmen • Anhalten von Bewegungen • Sprungmarken • Seitentitel • Reihenfolge bei Tastaturbenutzung

WCAG2 – AA • Minimaler Kontrast (5:1/3:1) • Vorschläge bei • bis 200% Textvergrößerung Eingabefehlern ohne Verlust von Inhalten • Fehlervermeidung bei oder Funktionalität kritischen Transaktionen • Mehr als ein Weg auf eine Seite im Angebot zu stoßen • Überschriften beschreiben Inhalt oder Funktion • Fokus muss sichtbar sein • Die Sprache von Passagen oder Phrasen muss ausgezeichnet sein • Konsistente Navigation

WCAG2 – AAA • Minimaler Kontrast (7:1/5:1) • Nach Ablauf der Session • Kontext-Sensitive Hilfe ist • Audio ohne oder mit leisen kann der Benutzer dort verfügbar Hintergrundgeräuschen weitermachen, wo er • Fehlervermeidung bei allen und ausschaltbar aufgehört hat Transaktionen • Mechanismen zur • Links nur durch den Text • Untertitel bei Live-Audio Anpassung der Seite sind eindeutig vorhanden • Inhalte durch Überschriften • Text in Bildern wird nur unterteilen dekorativ benutzt • Deﬁnitionen für • Tastaturbenutzbarkeit ungewöhnliche Wörter (Ohne Ausnahme) • Text in einer einfachen • Keine zeitkritische Sprache Interaktion • Kontextänderungen nur auf Nutzerveranlassung

•Thema zu komplex um nach Schema F vorgehen zu können •Wird den Menschen mit Behinderungen nicht gerecht •Browser und Assistive Technologien müssen mit der Webseite auskommen Aber: Keine Checklisten!

Quickreferenz

Testen, testen, testen!

Barrierefreie Webseiten entwickeln

1. Konzeption 2. Redaktion

Wichtig: Barrierefreiheit von Anfang an einplanen.

Wichtig: Barrierefreiheit von 80/20-Regel Anfang an einplanen. (Pareto-Prinzip)

• Mit 20% Aufwand 80% der Fälle abgedeckt • 20% bis zur Perfektion be- deuten 80% des Aufwands Wichtig: Barrierefreiheit von 80/20-Regel Anfang an einplanen. (Pareto-Prinzip)

Wichtig: Barrierefreiheit gehört zum Handwerk (guten)

• Barrierefreiheit können mittlerweile „alle“ • Referenzen überprüfen • In Gesprächen herausﬁnden, was die Agentur überhaupt unter Barrierefreiheit versteht 1. Eine gute Agentur

• Bereits früh in die Entwicklung mit einbeziehen • Immer wieder Zwischenversionen überprüfen lassen 2. Externe Beratung einholen

• Legt fest, was Ihre Organisation unter Barrierefreiheit versteht. • Einfach „Barrierefrei“ meist nicht genug • Gibt der Agentur genaue Handlungsanweisungen • Rechtssicherheit 3. Ein Pﬂichtenheft

• Nicht der Agentur vertrauen! • Immer selbst testen und testen lassen 4. Regelmäßige Tests

• Einfache Usertests • Kaum Aufwand, viele Erkenntnisse 5. Hilfsmittelnutzer befragen

1. Konzeption 2. Redaktion

• Fundament für die barrierefreie Pﬂege der Inhalte • Achtung: Schlechte Plugins/ Erweiterungen können aus einem guten Redaktionssystem ein schlechtes machen • Muss die Ansprüche Ihrer Organisation erfüllen • OpenSource? Agentur-CMS? 1. Ein gutes Redaktionssystem

• Schulungen • Auch Redaktion in Kontakt mit Hilfsmittelnutzern bringen 2. Ein Bewusstsein für Barrierefreies Webdesign in der Organisation

• Redaktionelle Kontrolle • Redaktionshandbuch • interne Schulungen 3. Klare Anweisungen an Redakteur/innen

4. Regelmäßige Tests

5. Hilfsmittelnutzer befragen

Webseiten überprüfen (oder: Wie erkenne ich Barrierefreie Webseiten)

Maus raus!

+ Web Developer Toolbar

Struktur überprüfen

Alternativtexte für Bilder

Strukturelemente hervorheben

http://delicious.com/yatil/bfweg http://jugendwandert.org/infos.html

Der Weg zur Barrierefreien Webseite

0 comments

Notes on slide 1

Favorites, Groups & Events