Die 5 Ebenen Barriererfreier Web Entwicklung

50 %
50 %
Information about Die 5 Ebenen Barriererfreier Web Entwicklung
Technology

Published on November 23, 2009

Author: ginader

Source: slideshare.net

Description

Es ist ein weit verbreiteter Irrglaube, dass JavaScript und Barrierefreiheit sich ausschließen würden. Assistive Technologien können sehr wohl mit JavaScript umgehen. Richtig angewandt, kann JavaScript nicht nur zugänglich sein, sondern sogar helfen, Barrieren weiter zu reduzieren. Man muss aber einige Regeln dabei beachten. Dirk Ginader sagt uns, welche das sind und zeigt uns, wie man JavaScript dazu nutzen kann, um eine Webseite für alle interessanter und nutzbarer zu machen.
http://it-republik.de/konferenzen/webtech09/speaker/#4386

Die 5 Ebenen barrierefreier Web-Entwicklung WebTech 17.11.2009 Dirk Ginader http://ginader.de http://twitter.com/ginader

Das HTML ist die Basis und die wichtigste aller Ebenen

Reihenfolge im Code = Tab-Reihenfolge

Welches HTML Element ist am besten für die jeweilige Aufgabe geeignet?

Ist die Seite mit und ohne CSS verständlich?

Interaktionen nur mit Links und Formularen gefolgt von einem Neuladen der Seite

http://ginader.de http://twitter.com/ginader

CSS kann auch eine Barriere sein!

display:none und visibility:hidden verstecken vor jedem

Offscreen platzieren wenn es nur Screen Reader sehen sollen .offscreen{ position: absolut; left: -999em; }

:hover funktioniert nur mit einer Maus

:focus ist die Rettung!

immer nur in Kombination: a:hover, a:focus{ /*wahnsinns CSS*/ }

CSS bestimmt Design und nicht Interaktion

http://ginader.de http://twitter.com/ginader

Javascript ist das Sahnehäubchen

Klappt auch wirklich alles was erreicht werden muss ohne Javascript?

ganz Sicher?

Dann darf gezaubert werden :-)

bestehende Elemente mit JS übernehmen und die Art der Funktion ändern

Buttons die nur mit JS funktionieren werden erst mit JS erzeugt

Screenreader verstehen Javascript - sie wissen nur meist nicht was gerade passiert...

focus() ist die Rettung!

Die Tab Reihenfolge ist entscheidend

focus() ist die Rettung! (... schon wieder)

tabindex=0 macht sogar DIVs zugänglich für Nutzer ohne Maus

tabindex=-1 für Elemente die nur JS erreichen darf

genau: focus()

Ajax funktioniert aber die Verzögerungen sind schwer zu verstehen

Informieren was gerade passiert!

richtig geraten: focus()

Screenreader aktualisieren ihren Virtual Buffer “regelmäßig”

im Formular Modus aktualisieren sie in Echtzeit!

Nutze den Forms Mode um den Virtual Buffer zu aktualisieren wenn benötigt

http://ginader.de http://twitter.com/ginader

Eine weitere Ebene: extra CSS wenn Javascript verfügbar ist

Javascript kann das gesamte Layout ändern

Aber CSS ist viel viel schneller

CSS über JS informieren: document.documentElement.className += ” js”;

.modul{ /* CSS für Layout ohne JS */ } .js .module{ /* anderes CSS für das Layout mit JS */ }

Wie reagiert das CSS wenn sich die Schriftgröße ändert?

Softwarelupen zeigen nur einen kleinen Ausschnitt des Bildschirms an

Es muss sichergestellt sein dass jeder weiss was gerade passiert

yellow fade + focus() helfen allen besser zu verstehen

die oberste Ebene neu und heiss

http://ginader.de http://twitter.com/ginader

WAI-ARIA bringt bekannte Desktop- Bedienkonzepte barrierefrei in den Browser

Fügt unsematischem Markup Semantik hinzu

stellt assestiven Technologien echtzeit updates und Benachrichtigen zur Verfügung

Roles

• alert • banner • button • menuitem • slider

Document Landmark Roles

• application • banner • complementary • contentinfo • main • navigation • search

States und Properties

• aria-valuemin • aria-valuemax • aria-valuenow • aria-valuetext • aria-labelledby

Live Regions aktualisieren sich in Echtzeit

• off • polite • assertive • (rude)

heute schon Nutzbar

• validiert leider noch nicht • macht aber nix. Da die WAI ARIA Interaktionen Javascript nutzen kann man auch die Rollen damit hinzufügen

Aber nicht darauf verlassen!

• Es gibt alte Screenreader wie es alte Browser gibt. Es muss also auch weiterhin ohne WAI ARIA funktionieren. • Progressive Enhancement...

Beispiele

without Javascript http://finance.yahoo.com/currency-converter

without Javascript http://finance.yahoo.com/currency-converter

without Javascript http://finance.yahoo.com/currency-converter

with Javascript http://finance.yahoo.com/currency-converter

with Javascript http://finance.yahoo.com/currency-converter

with Javascript http://finance.yahoo.com/currency-converter

http://uk.tv.yahoo.com/

http://de.finance.yahoo.com/nachrichten/

http://de.finance.yahoo.com/nachrichten/

http://de.finance.yahoo.com/nachrichten/

http://www.yaml.de/fileadmin/examples/

http://www.yaml.de/fileadmin/examples/

http://www.yaml.de/fileadmin/examples/

http://ginader.de http://twitter.com/ginader

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Barrierefreies Internet – Wikipedia

Um das Web barrierefreier zu machen, ... Im Abs. 5 ... Für die Umsetzung auf kantonaler und kommunaler Ebene wurde innerhalb des ...
Read more

Knowhow und Wissenswertes zu barrierefreiem Webdesign ...

... 2.0 — die Webstandards für ein barrierefreies Web — wird ... um Barrierefreiheit auf minimalster Ebene ... Entwicklung barrierefreier ...
Read more

Handlungsfeld 5: Barrierefreiheit - Tourismusperspektiven ...

räumen auf übergeordneter Ebene barrierefreie ... Handlungsfeld 5: Barrierefreiheit ... Die Entscheidung zur Entwicklung barrierefreier ...
Read more

Web Accessibility : Verwaltung : Digitales Österreich

Web Accessibility Initiativen und Anforderungen an barrierefreie Web ... Sensibilisierung in Richtung barrierefreier Entwicklung ... § 6 Abs. 5 ...
Read more

Stadtentwicklung – Wikipedia

Hierunter kann zum einen die Planung und Entwicklung der gesamten Stadt ... der Verankerung der Nachhaltigkeit auf der lokalen Ebene ... WEB angegeben ...
Read more

Was bedeutet Barrierefreiheit? - Barrierefreie Gestaltung ...

In Deutschland sind beispielsweise 8,1 Prozent der Menschen schwer behindert und 16,5 ... Barrierefreie Web-Entwicklung ... optischen Ebene ...
Read more

BITV spezialisierte Agentur aus NRW: Barrierefreies ...

1.1.3: Barrierefreie PDF. 1.1.5: Schulungen & Workshops. 1.1.7: Barrierefreies Intranet. 1.1.8: Leichte Sprache. ... Barrierefreie Frontend-Entwicklung.
Read more

Rettet die Barrierefreiheit vor sich selber!

Der Kanadier Joe Clark ist einer der profiliertesten Experten zum Thema Barrierefreiheit im Web. ... Denn Web-Entwicklung ... Und das können wir eben ...
Read more

gessler online | Internetdienstleistungen für Unternehmen ...

5: 5. Menüpunkt ... Menüpunkt (Barrierefreiheit) h: Ebene 2 – 1. Unterpunkt zum 2. Menüpunkt ... Menüpunkt (Web pflege) l: Ebene 2 – 4. Unterpunkt ...
Read more