Wer schon mal ein Ausklapp-Menü barrierefrei gestalten wollte, ist sicherlich ganz schön ins Schwitzen gekommen.

Wies geht, zeigt hier ein Artikel des “Barrierefrei informieren und kommunizieren”-Portals.

Und noch ein anderes, ähnlich schwieriges Thema.

Wie kann man Tabs auf einer Seite barrierefrei umsetzen?

Dirk Ginader beschreibt es in diesem Artikel:  “jQuery Accessible Tabs – Wie man Tabs WIRKLICH zugänglich macht”.

1) Zuerst einmal lädt man das Video auf seinen Webspace.

2) Dann geht man auf subtitle-horse.org

3) gibt dort die URL des Videos an und klickt auf “submit”.

Jetzt kommt folgender Bildschirm:

4) Nun gibt man alle Untertitel an.

Dabei gibt es ein kleines Problem. Man kann das Video in subitle-horse.org nicht zwei oder mehrmals abspielen. Ich habe es mit allen Browsern versucht, aber es ist mir mit keinem gelungen.

UPDATE: Man muss ein richtig konfiguriertes .flv nehmen.

Nun ja, ich habe erst mal allen Text reingeschrieben und die Feinabstimmung später gemacht.

5) Alles exportieren.

Es wird in zahlreiche Formate konvertiert, darunter auch XML-Dateien im Timed Text Format. Dieses wird auch von der FLV Playback Komponente in Flash CS3 verwendet. Also genau das, was wir brauchen.

Man wählt also Titles -> Export -> TimedText jw MEDIA PLAYER 3.x, kopiert den XML-Quelltext aus dem Formular und speichert ihn als XML-Datei im Texteditor ab.

Also beispielsweise als orangen.xml.

Damit ist die Arbeit auf subtitle-horse.org beendet. In der Dokumentation findet man noch mehr Informationen.

Kennt jemand noch ein anderes Tool zum Erstellen der Untertitelanzeigen?

6) Doch zurück zum JW-Player. Dort muss der Text noch eingebunden werden.

Das geht im Setup Wizard. Dort gibt man im “Playback behavior” unter “captions” die XML-Datei an:

Am Ende steht die Variable captions mit der jeweiligen XML-Datei im Code.

etweder so:

so.addVariable('captions','orangen.xml');

oder so:

flashvars="height=250&width=400&file=/upload/player.flv&captions=orangen.xml

7) Nach dem Einbinden des Videos in die Seite zeigt ein Textsymbol dass es Untertitel gibt. Diese kann man aus- und einschalten.

Weiß jemand, ob es die Möglichkeit gibt, die Anzeige der Untertitel im Voraus auszuschalten? So, dass sie jemand der sie braucht, nur einschalten kann?

UPDATE: Um die Untertitel ausgeschaltet zu haben, aber noch die Möglichkeit, sie einzuschalten, benutzt man

usecaptions=false

und für die Audiodescription

useaudio=false

Danke an Sylvia Egger für den Tip!

8) Nun kann man, wenn man will, noch die Zeitabläufe korrigieren, indem man in der XML-Datei an der Stelle, wo die Anfangs- und Endzeit stehen, noch einbisschen vor- oder zurück formatiert.

9) Hier gibts von Jeroen Wijring noch einige Informationen zu barrierefreien Videos und wie man sie umsetzt.

Alle Blog-Beiträge sind zusammengefasst in einem lesenswerten barrierearmen (e)Buch.
Dieses kann sowohl online (kostenlos) bezogen als auch als PDF downgeloaded werden.

“Thematisch spannt das logbuch accessibility einen weiten Bogen, ausgehend von grundsätzlichen und durchaus kontroversiellen Annäherungen an die Frage „Was bedeutet Barrierefreiheit?“ bis hin zu praktischen Anleitungen, wie Webauftritte zugänglicher gestaltet werden können. Zusätzliche Navigationshilfe bieten außerdem Checklisten, Linktipps und ein Glossar im Anhang.” Zitat Access4All Weblog

via Access4All Weblog

Dabei werden anhand der im HTML-Code verwendeten strukturierenden Tags für Überschriften, Listen oder Tabellen die entsprechenden PDF-Tags erzeugt. Die Funktion wurde in PHP auf Basis von PDFlib programmiert – das ist ein Entwicklungswerkzeug, mit dem (auch getaggte) PDFs dynamisch auf dem Webserver generiert werden können. (feld.wald.wiese)

Ausprobiert werden kann der HTML-to-PDF-Converter auf einer beliebigen Seite von bik-online.info. Bei Klick auf den Link “diese Seite als PDF” wird sie automatisch umgewandelt.

Prima!

Und sie erklären, wie barrierefrei nutzbare Internetangebote aufgebaut sein sollten.

via efa

Sehr anschauliche Präsentation, die gut zusammenfasst, worum es beim barrierefreien Webdesign geht und wie Nutzer und Anbieter von Internetseiten davon profitieren können.

Absolut sehenswert!

Gefunden bei webstandard

Die Testbox entstand als Demonstrationsseite für ein Seminar zum Thema “Barrierefreies Webdesign”.
Sie enthält Positiv- und Negativ-Beispiele, welche sich so mit Hilfe von Screenreadern und Textbrowsern einfach demonstrieren und vergleichen lassen.

Weitere Informationen »

“Tipps und Tools zum Testen von Webseiten” besuchen »

Als Ergänzung zum Blog-Artikel Barrierefreiheit von Webseiten testen hier auf der Netzspielwiese.

Foto: lily – Photocase.de

Schönes Tool!

Infos unter Telefon: 07141 – 29 99 2 88.

Dabei weist man dem <label>-Element mit dem Attribut for="id" die ID des zugehörigen Formularelementes zu, also zum Beispiel:

<label for="nachname">Name:</label>
<input type="text" name="nachname" id="nachname" />

Das funktioniert prima bei Textfeldern, Textareas und Submit-Buttons.

Doch wie verhält sich das mit Radio- und Checkboxen?
Hier ist die Lösung etwas verzwickter.

Im ersten Moment möchte man einer Gruppe von Checkboxen nur ein Label verpassen.
Beispiel: Es soll aus drei Vorgaben ausgewählt werden, welches Haustier der Anwender besitzt.

Mit

<label for="haustier">haustier</label>
  <input name="haustier" type="checkbox" id="hund"
  value="hund" />
  <input name="haustier" type="checkbox" id="katze"
  value="katze" />
  <input name="haustier" type="checkbox" id="maus"
  value="maus" />

kommt man aber nicht ans Ziel, da das <label>-Element hier ja für alle drei Checkboxen gelten würde.

Besser und auch semantisch korrekt ist die folgende Lösung:

<fieldset>
  <legend>Ihre Haustiere</legend>
  <input name="haustier" type="checkbox" id="hund"
  value="hund" />
  <label for="hund">Hund</label>
  <input name="haustier" type="checkbox" id="katze"
  value="katze" />
  <label for="katze">Katze</label>
  <input name="haustier" type="checkbox" id="maus"
  value="maus" />
  <label for="maus">Maus</label>
</fieldset>

Das <fieldset>-Element gruppiert die Checkboxen optisch und semantisch, das <legend>-Element vergibt eine Art Überschrift über die Gruppe der Checkboxen.
Und jede Checkbox für sich bekommt dann ein eigenes <label>-Element.

Was dabei noch zu beachten ist:

Um die Checkboxen als zueinandergehörig zu kennzeichnen, brauchen sie dasselbe name-Attribut!
Um jedoch dem <label>-Element eine eindeutige Checkbox zuordnen zu können, braucht jede Checkbox für sich eine eindeutige id.
Das führt dazu, dass sich die name- und id- Elemente der Checkbox unterscheiden (müssen)!

Dieselbe Vorgehensweise empfiehlt sich natürlich auch für Radiobuttons.

Die knuffige Bildergalerie kann für den nicht-kommerziellen Einsatz frei herutergeladen werden. Sie wird auf dem eigenen Server installiert. Im Administrationssystem können die Einstellungen zusammengeklickt werden – und fertig ist die Slideshow.
Angeblich ist das ganze dann auch noch standardkonform, barrierefrei und optimal für Suchmaschinen präpariert! (hab´s noch nicht ausprobiert – wird aber schnellstens nachgeholt)

Scooch macht auf den ersten Blick einen sehr guten Eindruck!

Und die Website der dahinterstehenden Agentur Grow Collective ist bei “Webstandard” gerade Site der Woche!

Im richtigen Moment fehlten mir dann die passenden Worte, um mit schlagkräftigen Argumenten vom Nutzen der standardkonformen Webprogrammierung, CSS-Layouts und Barrierefreiheit zu überzeugen.

Auf der Suche Argumentationsstoff bin ich auf den Grundlagenartikel “Usability, Webstandards und barrierefreies Internet” von Heike Edinger & Timo Wirth gestoßen. Der ist zwar schon mehr als drei Jahre alt, aber immer noch hoch aktuell!
Die beiden beschreiben in diesem Artikel, warum und für wen barrierefreie und standardkonforme Webseiten nützlich sind (nämlich für alle), worauf man bei deren Erstellung achten muss und vor allem, welche Vorteile sie für Unternehmen bringen, nämlich:

• Kostenreduktion durch weniger Serverlast
• Geringen Editieraufwand
• Plattformunabhängigkeit
• Suchmaschinenoptimierung (SEO)
• Ausbau der Reichweite
• User- und Kundenzufriedenheit
• Zuverlässigkeit und Vertrauen
• Zukunftsfähigkeit und
• Imagegewinn

Es lohnt sich wirklich, diesen Artikel gründlich zu lesen und sich die Argumente zu verinnerlichen!

Wer das Thema dann noch vertiefen möchte, findet auf der gleichnamigen Website “Vorsprung durch Webstandards” jede Menge Stoff zu den Themen Usability, Webstandards, CSS, Barrierefreiheit und allem, was dazu gehört.

Foto: schnee von gestern – Photocase.de

Alternativtexte, Tabellen-Header-Tags, Tabellen-Zusammenfassungen, label-Elemente für Formulare und Skip-Links erleichtern Nutzern von Screenreadern die Informationsaufnahme. Für sehende Nutzer sollen diese zusätzlichen Informationen und Beschreibungen in der Regel aber nicht sichtbar sein. Sie können den Aufbau von Formularen oder Tabellen visuell intuitiv erfassen und benötigen dafür keine weiteren Beschreibungen.

WebAIM (Web Accessibility in Mind) beschreibt in dem Artikel “CSS in Action: Invisible Content Just for Screen Reader Users” (englisch) anhand von Beispielen, was bei der Einbindung von Textüberschriften, unsichtbaren “Navigation-überspringen” – Links, Formularen in Tabellen und mehreren Formularelementen, denen eigentlich nur ein Label-Element zugeordnet werden kann, beachtet werden sollte.

Website besuchen »

Foto: ??? – Photocase.de

Hier habe ich eine kleine Sammlung von Werkzeugen zusammengestellt, die zum Testen der Barrierefreiheit einer Seite genutzt werden können:

Textbrowser, Screenreader und entsprechende Simulationen

• LYNX ist ein textbasierter Webbrowser, der inzwischen für fast alle Betriebssysteme verfügbar ist.
• Mit dem LXNX Viewer kann man seine Seiten auch online überprüfen lassen, ohne LYNX auf dem eigenen Rechner zu installieren.
  Achtung! Um den Lynx-Viewer benutzen zu können, muss ein HTML-Dokument names delorie.htm im Root-Verzeichnis der Webseite liegen, es sei denn man nutzt diesen Viewer auf einem anderen Server.
• Seit Anfang des Jahres gibt es auch eine entsprechende Erweiterung für Firefox
• Der Webformator ist ein kostenloses Plugin für den Internet Explorer, das die Inhalte einer Website in Textform umwandelt und in einem extra Fenster ausgibt.
• JAWS ist ebenfalls ein häufig verwendeter Screenreader, welcher Textinhalte aus Webseiten extrahiert und bei Bedarf auch vorliest. Das Programm kann ohne Lizensierung zu Testzwecken jeweils 40 Minuten als Demo-Version verwendet werden.
• Für den Firefox gibt es eine JAWS-Simulation als Plugin mit dem Namen Fangs. Hier kann das Plugin direkt herunterladen werden.

Sprachausgaben für Webseiten

• Mit dem Plugin WebSpeech kann man sich im Internet Explorer Webseiten vorlesen lassen und so einen Eindruck von synthetischen Sprachausgaben, wie sie häufig von Blinden genutzt werden, gewinnen.
• Der IBM Home Page Reader ist ein “sprechender Browser”, der auch auf den Internet Explorer aufsetzt und Webseiten in Sprachform ausgibt. Eine kostenlose 4wöchige Testversion kann hier heruntergeladen werden.

Werkzeuge zur Überprüfung von Farbkombinationen und Kontrasten

• Der Colorblind Webpage Filter ist ein Online-Tool, das Webseiten so anzeigt, wie sie Farbenblinde mit verschiedenen Farbfehlsichtigkeiten sehen. Außerdem kann die Website in Graustufen dargestellt werden. So kann überprüft werden, ob Farben und Kontraste der Webseite vorteilhaft gewählt wurden.
• Mit dem Colour Contrast Analyser von Juicy Studio können zwei Farben auf ausreichenden Kontrast hin überprüft werden.
• Noch besser: das Accessibility Color Wheel, mit dem Farben auf ihre Tauglichkeit für Farbenblinde getestet werden können, wie hier beschrieben.

Online-Tools zum Überprüfen von Webseiten auf Barrierefreiheit entsprechend den Web Content Accessibility Guidelines des W3C

Die Barrierefreiheit einer Webseite kann nie allein anhand automatischer Überprüfung des Quellcodes festgestellt werden. Dazu sind die möglichen Hürden für Nutzer mit Behinderungen zu verschieden.
Trotzdem gibt es eine Reihe an Tools, die helfen können, einige formale Bedingungen der Barrierefreiheit zu testen:

• Watchfire WebXACT – früher Bobby
• Functional Accessibility Evaluator
• Cynthia Says
• Online Content Accessibility and Quality Tester von HiSoftware
• WTAC Web Accessibility Checker – überprüft auf WCAG 2.0 – Konformität
• HERA Web Accessibility Checker
• WAVE 3.0
• TAW (Tip von Heiko)

Browser-Plugins zum testen von Webseiten

• Die Web Developer Toolbar für den Firefox ist natürlich ein absolutes “muss” für Webentwickler und erlaub vielfältige Testmöglichkeiten.
• Für den Internet Explorer erfüllt diesen Zweck die Web Accessibility Toolbar
• Äußerst hilfreich ist auch die Checky-Extension, ursprünglich entwickelt für Firefox, Mozilla und Netscape. Leider funktioniert sie bei mir momentan nur noch im Mozilla.
• Auch für Opera gibt es neuerdings eine WebDeveloperToolbar, wie hier ausführlich beschrieben.

Validatoren

Natürlich sollten Internetseiten auch den Standards des W3C entsprechen:

• W3C (X)HTML-Validator
• W3C-CSS-Validator