Barrierefreiheit

Auf dieser Seite:

Die WCAG (Web Content Accessibility Guidelines) sind Regeln zum Erstellen von Websites ohne Grenzen. Die WCAG bieten mir Erfolgskriterien und ganz konkrete Umsetzungstechniken an, damit ich alle Nutzer und Nutzerinnen erreiche. Besonders beachtet wird das Browsen von Sehbehinderten und Blinden und von Usern, die keine Maus nutzen bzw. den Cursor ausschliesslich via Tastatur oder einem mechanischen Ersatz steuern. Dadurch werden aber auch die besonders Eiligen und leicht Begriffsstutzigen bestens bedient.

Accessability & Usability

wahrnehmbar, bedienbar, verständlich, robust

Nebst dem Monitor, der für mich so wichtig ist, sollen andere Ausgabegeräte gleich gewichtet werden. Z.B. solche, die Text in Audio oder in Braille wandeln.

Begrenzter Zugang zu Inhalten wird von Webmastern gesetzt, indem sie grosse User-Gruppen gedankenlos ausschliessen. Gute HTML stellt Informationen bereits strukturiert zur Verfügung und CSS formatiert diese nicht nur optisch ansprechend zu einem sinnvollen Zusammenhang. Es wird versucht, das was für Sehende offensichtlich zusammengehört auch linear und hierarchisch richtig aufeinander folgen zu lassen, damit eine Maschinenlesbarkeit entsteht. Das Ziel wird ein Semantisches Web sein, das von assistiven Programmen verstanden wird.

WCAG Richtlinien und Techniken

Es gibt drei Konformitätsstufen mit den WCAG 2.0, A, AA und AAA, wobei A die Mindestanforderung beschreibt und AAA die höchste. Das optische Layout ist mit AAA Standard radikal in Frage gestellt. Der Informative Teil besteht aus Texten die Techniken beschreiben, die sind mit Buchstaben gekennzeichnet und nummeriert:

G: Generelle Techniken
H: HTML
C: CSS
SCR: Scripting clientseitig (wie JavaScript)
SVR: Serverseitices Scripting (wie PHP und Pearl)
A: WAI-ARIA
SM: SMIL für zeitsynchronisierte, multimediale Inhalte.
F: Typische Fehler wiederholen alles Obige nocheinmal

Die deutsche Übersetzung wird von der Aktion Mensch unter dem Titel 'Einfach für alle' betreut.
>> http://www.einfach-fuer-alle.de/wcag2.0/
>> Die 12 WCAG Richtlinien auf Deutsch
>> Die nummerierten WCAG Techniken auf English

Es folgen nun summarisch einige dieser WCAG Techniken (manchmal sind die Nummern angegeben):

Benutzerführung

Mehr Gewicht muss nun auf die Benutzerführung gelegt werden, durch mehrfache Zugangsoptionen zu Textabschnitten mittels der Navigation (G126- G128, G185), einem Brotkrümelpfad (G65), einem Inhaltsverzeichnis (G64), einer Sitemap (G63), einem Hilf-Link (G71) und Suchformular (G161), sowohl Seitenintern wie auch Seitenübergreiffend.
Rückmeldungen nach Aktionen (G199) und Gebrauchs-Anweisungen sind selbstverständlich und gekennzeichnet. Titel und Listen und Alternativtext für Grafiken sind zur Gliederung und Verständlichkeit unabdingbar.

HTML W3C-konform

Konforme HTML/XHTML bedeutet alle Tags schliessen, richtig verschachteln, well-formed und validierten (G134 G192 und H74, H75, H88) auch CSS Code (C27).
Sprache angeben durch das lang-Attribut (H57): <html lang='de'>, oder in XHTML <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
Auch bei Sprachwechsel z.B. in Zitaten die Sprache angeben (H58): <cite lang='en'>
Absätze nicht aus doppelten Zeilenumbrüchen (<br />), sondern aus Paragrafen erstellen (<p>...</p>) (G115)
Überschriften nicht mit <strong>, <b> oder CSS gross und fett machen sondern als Titel, also h-Elemente auszeichen <h1>, <h2>, oder <h3>
Zitate in blockquote-Elemente
Aufzählungen nicht mit <br /> und * oder - sondern mit Listen <ul><li>...</li></ul> (H48)
Definitions-Listen verwenden wo sie sich anbieten (H40)
Tabellen mit caption-Element für Tabellenüberschriften (H39) und mit th-Elemente und header-Attribute (H43) für Spalten- und Zeilen- Überschriften (H51).

Titel

Titel sagen wo ich bin und was jetzt kommt.
Der Dokumenttitel, also das title-Tag soll genutzt werden (G88 und H25). Das title-Tag sollte mit dem h1 Titel übereinstimmen. (dies ist auch gut für Suchmaschinen), h1 nur einmal pro Seite verwenden (h42)
h-Titel sollen zur Textgliederung genutzt werden (G141 und H42), am Anfang sollte ein Teaser oder Summary stehen (G130), auch Titel wie 'Infobox' oder 'Tipp zur Nutzung des Formulars' sind hilfreich.
Titel in hierarchisch richtiger Reihenfolge verwenden (G130). So können Screenreader aus den Titeln Inhaltsverzeichnisse erstellen und Sprungmöglichkeiten anbieten. Im Browser Opera lassen sich schon jetzt die Titel mit der Taste S anspringen, das ist eigentlich auch für 'Normale User' sinnvoller als von Link zu Link zu springen.
Wo ist der Kopfbereich, wo beginnt die Navigation, wo der Inhalt und wo ist ein Tipp-Kasten oder bloss eine Spalte mit Werbung (H69)? Solche Angaben können in HTML 5 als Elemente eingerichtet werden, oder als WAI-ARIA (siehe weiter unten), bis dahin bleiben nur h-Elemente. Da diese Titel aber nicht für Sehende bestimmt sind, können sie getrost durch CSS links aus dem Fenster verbannt werden:
.bereichstitel { position:absolute; left:-2000px; top:auto; overflow:hidden; width:1px; height:1px; } display:none und visibility:hidden hingegen werden von den Screenreadern befolgt und funktionieren also nicht als Infotitel.
Nichts oder nur wenig bringt jedoch das title-Attribut für Screenreader, es ist an die Mausaktion gebunden (H33).

Text

Liquid Layout, welches zulässt, dass Text grösser dargestellt wird, ohne dass es zerfällt oder überlappt (G146 G179 und H87).
Text links oder rechtsbündig, kein Blocksatz (G169).
Text soll sich vom Hintergrund abheben (G145).
Keine eigenen Hintergrundfarben und Textfarben bestimmen, um keine Kontrastprobleme zu erzeugen (G148).
Möglichkeit geben, die Vorder- und Hintergrundfarben vom User justieren zu lassen (G175).
Rot nicht mit Grün mischen, da bei Farbblindheit kein Unterschied feststellbar ist.
Formulierungen sollen verständlich gewählt werden, Sätze sollen kurz sein.
Fremdworte sollen erklärt werden (G62, G101), Abkürzungen sollen aufgelöst werden (G102).
Semantische Markups wie em-Tag und strong-Tag verwenden für Hervorhebungen (H49).

Bilder

Eine Nur-Text-Version anzubieten macht eine Seite nicht barrierefrei. Grafiken sollen mit einer Textalternative, einer Beschreibung versehen werden, dazu gibt es drei Möglichkeiten:

<img src='...' alt='Alternative Kurzinfo max. 80 Zeichen' /> (H37 und G94), 'Dieses Bild zeigt ...' braucht dabei nicht geschrieben zu werden, denn die Verwerter des alt-Attributs wissen, dass sie sich in einem Bild befinden.
Handelt es sich beim Bild um eine austauschbare oder dekorative Grafik, kann das alt-Attribut leer gelassen werden: alt='' (H67), das alt-Attribut darf aber nicht gänzlich fehlen, das title-Attribut soll fehlen.
Lange Beschreibung ist im umgebenden Text vorhanden (G74) und wird im alt-Attribut angekündigt (H45 und G92):
alt="Beschreibung im folgenden Abschnitt"
Lange Beschreibung mit longdesc-Attribut in verknüpfter, separater Datei anbieten (G73):
<img src="komplexegrafik.jpg" alt="Diagramm Arbeitslose" longdesc="desc-jobless.html" />
Über Hintergrundbilder, welche keine informative Relevanz haben, wie runde Ecken und Rollovers (C9).

Audio / Video

Audio sollen mit einer Textabschrift versehen werden.
Audio soll nur durch Useraktivierung abgespielt werden (G170 und G171).
Videos sollen Synchronisiert sein (G9).
Untertitelung soll als Text vorliegen (G8).

Automatische Elemente

Elemente, die von selber mit abspielen beginnen oder automatisch enden, sollen in ihrem Ablauf pausiert werden können um Stress durch Zeitdruck zu mildern (G198).
Dreimaliges Blitzen innerhalb einer Sekunde sollte ganz vermieden werden (G19), nichts sollte länger als 5 Sekunden blinken (G11), Blinken soll ausgeschaltet werden können (G187) so werden Epsilepsien weniger ausgelöst.

Formulare

Formulare sollen erklärt werden (G184)
Formularfelder sollen Labels haben und wenn ein Feld nicht leer bleiben darf, muss darin "required" (in Gänsefüsschen) stehen (G131).
Es sind die fieldset- und legend-Elemente zu benutzen um Bedienungselemente zu beschreiben (H71).
Konsistenter Gebrauch von Labels, Namen und Beschriftungen (G197, H44).
Eingabehilfe, wie solche zur Rechtschreibung werden vorgesehen (G194)
Captchas sollen durch alternative Identifizierungsmöglichkeiten ergänzt werden (G143 und G144)
Submit-Buttons zur Verfügung stellen um Etwas abzuschliessen oder eine Veränderung hervorzurufen (H32)

WAI-ARIA

WAI-ARIA role='...'

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) definieren Orientierungspunkte (landmarks) einer Website. Wichtige Seitenbereiche die in HTML Elemente wie div-Container oder Listen gesteckt werden (Inhalt oder die Navigation) können so mit roles versehen eindeutig benannt und mit Screenreadern angesteuert werden. Z.B. <div role='main'> oder <ul role='navigation'> Gängige Landmark Roles sind:

article (ein eigenständiger artikel)
banner (der Kopfbereich mit Logo und Claim)
complementary (zusätzliche Info, die aber auch unabhängig verständlich ist)
contentinfo (Metadaten zur Seite wie Footer, Copyright, AGBs, etc.)
main (Hauptinhalt, Content)
navigation (Haupt und Subnavigation)
search (Suchformular)
slider (Schieberegler)

Daneben gibt es noch die Live Regions (Angaben über automatisch/dynamisch veränderten Text)

Darüber hinaus können durch ARIA Attribute Angaben gemacht werden, ob die Eingabe in ein Formularfeld required ist:
<input aria-required='yes' ...>

Die States und Properties schliesslich werden per JavaScript dynamisch in das HTML Element hinein geschrieben,
z.B. wenn ein Passwortfeld nach 2-maligem Fehlversuch ungultig wird: aria-invalid
oder wenn auf einem Navigationselement der Focus liegt: Activedescendant

Mikrodaten

itemscope itemtype itemprop='...'

In HTML 5 kommen Mikrodaten hinzu, das sind Elemente (Items) mit Schlüssel/Wert-Paaren für semantische Angaben. Im übergeordneten Element, welche ein Item enthält, wird durch itemscope (in XHTML5 itemscope='itemscope') ein Item erstellt und darauf hingewiesen, dass hier solche Angaben abgelegt werden.
Der Typ des Items ist in einer URL beschrieben, es macht Sinn, wenn die Suchmaschinen erfahren, nach welchen Konventionen man sich richtet bzw welches vocabulary benutzt wird; in diesem Fall nach itemtype="http://schema.org/Person".
In den Unterelementen, welche bereits bestehen oder extra dazu geschaffen werden (span), folgen die Itemprop, die möglichen Properties also Eigenschaftsangaben zum Item, die sind festgelegt im Schema des Itemtype.
Dieser Text ...

Mein Name ist Marcel Biefer ich bin der Webmaster dieser Site und lebe in der Schweiz.

... sieht im Quelltext so aus:


<div itemscope itemtype="http://schema.org/Person">
  <p>Mein Name ist <span itemprop="name">Marcel</span>
  <span itemprop="familyName">Biefer</span> 
  ich bin der 
  <span itemprop="jobTitle">Webmaster</span> dieser Site 
  und lebe in der <span itemprop="nationality">Schweiz</span>.
  </p>
</div>

Prüfungen

Zur Prüfung auf Barrierefreiheit sind mehrere Schritte notwendig, es gibt zwar Websites zur automatischen Prüfung, aber der (eingeschränkte) Mensch ist das Mass aller Dinge!

Tastatur
Ich navigiere durch die Website ohne Maus, nur mittels Tastatur und sehe zu, dass alle Links und Buttons in der richtigen Reihenfolge angesprungen und keine übersprungen werden und mit einem Focus-Effekt reagieren. Ist alles richtig aufgebaut, braucht es auch keine tabindex-Attribute.
JAWS (Job Access With Speech von Freedom Scientific Inc.)
Ein Screenreader-Programm für Sehbehinderte gibt Text im InternetExplorer (und anderen MS-Programmen) in Sprachausgabe Audio und als Braillezeile aus. Wird eine Internetseite angeklickt, meldet JAWS beispielsweise: 'Seite hat 6 Überschriften und 33 Links'. JAWS benötigt einen Autorisierungsschlüssel, ohne diesen muss der Computer alle 40 Minuten neu gestartet werden.
WAVE
>> WAVE: WAVE hilft durch Icons eine angegebene Webseite zu analysieren und zeigt Fehler auf:
ATRC Web Accessibility Checker
>> ATRC: achecker checkt auch eine angegebene Webseite, hier findet er 2 Fehler, 41 Probleme und 108 mögliche Probleme:

Wenn die Maschine nichts auszusetzen hätte, dann sähe der Report so aus:

ATRC verteilt auch ein Checked-Siegel (sh. unten).
Toolbars
wie der Web Developer und Accessibility Extension in Firefox können helfen, sie zeigen Gliederung auf, alt-Attribute an und können Schriften vergrössern um Überlappungen zu vermeiden.
CSS ausschalten
Positions-Befehle können entfernt werden um den Linearen Verlauf zu testen.
WAI-ARIA
WAI-ARIA wird von W3C erst ab HTML 5 vallidiert