Dazu werden folgende Tags geboten: <abbr> und <acronym>

abbr

<abbr> verwendet man bei Abkürzungen, bei denen jeder Buchstabe einzeln ausgesprochen werden soll. Example: USA. <abbr>USA</abbr> wäre die korrekte Auszeichnung.

acronym

<acronym> ist dagegen für Wörter gedacht, die ganz ausgesprochen werden. Example: GUI. <acronym>GUI</acronym> wäre die korrekte Auszeichnung.

CSS

Aktuell ist in der letzten Spezifikation vom W3C <acronym> nicht mehr enthalten und wird durch <abbr> zusammengefasst. Ich verwende trotzdem noch beide Varianten, da Screenreader diese meistens richtig ausgeben. Diese beiden Tags lassen sich dementsprechend im CSS visualisieren.

In diesem Fall:

acronym, abbr { letter-spacing: .07em; border-bottom: .1em dashed #2ECCFF; cursor: help; }

http://www.abbreviations.com/

Ein neues Übersichtsportal bzw. Suchmaschine für Abkürzungen ging vor kurzem live und bietet eine Art Lexikon nach sortierten Rubriken http://www.abbreviations.com/

Farbkontraste

Farbkontraste sind besonders wichtig für alle Arten von Farbblindheit. Menschen die darunter leiden, haben wenig oder gar kein Farbempfinden. Es gibt viele Formen der Farbsehstörungen. Neben der Abneigung gegen Licht (Lichtscheuheit), verminderten Sehschärfe oder unwillkürliche Augenbewegungen gibt es Sehbehinderung die bestimmte Farben ausnehmen, das so genannte Zweifarbensehen. Am häufigsten gibt es eine gestörte Wahrnehmung von Grün. Unter Verwendung des Tools Colorblind Web Page Filter ist es möglich das Zweifarbensehen auf der Webseite zu testen:

Deuteranobie – Grünblindheit

Protanobie – Rotblindheit

Tritanobie – Blaublindheit

Helligkeitskontraste

Helligkeitskontraste dienen Marketingtechnisch meistens der Betonung von Texten oder Elementen. Der absolute Klassiker ist die Kombination von Schwarz und Weiß. Vorsicht vor starken Kontrasten, denn Menschen mit Lichtempfindlichkeit können Probleme mit hohen Kontrasten haben. Starke Kontraste können als zu grell empfunden werden. Deswegen ist es wichtig weniger starke Kontraste gut auszubalancieren. Schwache Kontraste können zum Beispiel zweckmäßig weniger relevanten Inhalt auszeichnen. Das ist für barrierefreie Webauftritte ebenso sinnvoll wenn eine gewisse Differenz eingehalten wird. Am einfachsten lässt sich der Helligkeitsunterschied testen, indem man die Webseite komplett in Grautöne umwandelt. Ich mache dies einfach in Photoshop, es gibt auch ein passendes Webservice mit dem Namen Greybit. Sind die Texte und Grafiken noch gut erkennbar?

Als weiteren Helligkeitstest würde ich den Screenshot der Webseite invertieren, die hellen Farben in dunkle umwandeln und umgekehrt. Es gibt Sehbehinderte die mit einer invertierten Webseite leichter zu Recht kommen.

Zusammenfassend ist dies eines von vielen Kriterien einer barrierefreien Webseite. Ich veranstalte bei jedem meiner Webdesigns einen kleinen Kontrasttest, es sind 30 Minuten zusätzliche Zeitinvestition, die zu einem guten Webdesign dazugehören sollten.

Aus aktuellem Anlass (für eine Modellrechnungsapplikation), hab ich mich entschlossen meinen Bloglesern die wichtigsten Eckdaten für eine zugängliche und strukturierte Tabelle nicht vorzuenthalten.

Tabellenzusammenfassung

<summary>Das ist die Zusammenfassung des Inhaltes der Datentabelle </summary>

Dieses Attribut wird direkt innerhalb des <table> Tags angewendet und soll als Inhaltsbeschreibung dienen. Das Summary ist besonders wichtig für die Barrierefreiheit, da es Screenreadern exklusiv zur Verfügung steht. Vergleichen kann man das Attribut mit dem ebenso sehr unerlässlichem “Alt-Text” von Bilddateien in Webseiten.

Tabellenbezeichnung und Zusammenfassung

<caption>Das ist die Tabellenüberschrift</caption>

Dieser Tag fungiert als Tabellenbezeichnung oder Überschrift, in diesem Fall würde ich aber empfehlen lieber über die Tabellen (zusätzlich oder stattdessen) ein klassisches Überschriften-Element zu setzen. (h1, h2..), da Screenreader-Benutzer besser zu solchen Überschriften springen können.

Struktur der Tabelle

Die 3 logischen Bereiche

• <thead> Tableheader
• <tbody> Tablebody
• <tfoot> Tablefooter

bieten die Möglichkeit einer passenden Aufteilung in die Bereiche: Kopf, Inhalt und Footer. Wichtig: Wenn Tableheader oder -footer verwendet werden muß unbedingt ein Tablebody-Element festgelegt werden, die 3 funktionieren nur zusammen. Eine Tabelle darf nur einen <thead> oder <tfoot>, aber mehrere <tbody>, um mehr Überschaubarkeit festzulegen.

Zeilen- oder Spaltenformatierung

Die Elemente <colgroup> und <col> ermöglichen eine spezifische Darstellung der Spalten. Für eine Formatierung einer ganzen Zeile kann das <tr> Element zum Ansteuern verwendet werden. Das Element <colgroup> ermöglicht eine oder mehrere mit dem <col> Element ausgezeichneten Spalten. Hier gibts ein paar Einbußen bei älteren Browsern.

Praxisbeispiel


<h2>Tabelle Performance</h2>
<table summary="Wie entwickelt sich mein Sparvertrag bei verschiedener Aktienperformance">
<caption>Performance</caption>
<colgroup>
<col id="Jahre" />
<col id="Performance_3" />
<col id="Performance_4" />
</colgroup>
<thead>
<tr>
<th scope="col">1</th>
<th scope="col">3%</th>
<th scope="col">4%</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">2</th>
<th scope="col">3%</th>
<th scope="col">4%</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>10000</td>
<td>20000</td>
</tr>
<tr>
<td>2</td>
<td>20000</td>
<td>30000</td>
</tr>
<tr>
<td>3</td>
<td>30000</td>
<td>40000</td>
</tr>
</tbody>
</table>


Formatierung

In der CSS-Spezifikation gibt es 2 Varianten von Tabellenrahmen:

• seperate
• collapse

Bei seperate erhält jede Zelle einen eigenen Rahmen, während bei collapse die Zellen sich Ränder teilen, welches ich nützlicher finde. Damit die Tabelle ein Rasterlayout behält, sollte auch eine feste Breite festgelegt werden, der Rahmen hilft sicher optisch besser abzugrenzen und ein Padding verbessert das Lesen der Zellendaten. Alle anderen oben genannten Elemente können wie üblich mit CSS gestylt werden. Empfehlen kann ich die CSS Table Galler, ausprobieren lohnt sich.

Referenzen

• W3C-Empfehlung für Tabellen
• Web Standards Solutions
• Building Accessible Websites
• CSS Table Gallery
• Für Faule: Tabellencreator

Unter dem Titel “Steiermark für Alle” sollen Gäste mit besonderen Bedürfnissen einen schönen Urlaub geniessen können. Das finde ich grundsätzlich wunderbar, dennoch hat das Vorhaben noch einen Haken: die dazugehörige Webseite.

Steiermark barrierefrei hat für die Ortssuche Flash eingebettet. Das ist über einen Screenreader absolut nicht bedienbar. Die Schriftgrößenänderung ist in einem Bild festgehalten, ebenso die ganze Navigation. Statt Accesskeys wurde ein spezielles Navigationsmenü mit Ankerpunkten gebastelt. Leider gibt es auch nicht für alle Bilder Alternativtexte. Schlimm sind auch die Kontraste der Grünfarben. Der Textbrowser zeigt sehr unschöne Ergebnisse. Bei der Unterkunftsanfrage listet er alle verfügbaren Daten auf.

Schade, denn die Ziele sind sehr ambitioniert und die notwendigen Adaptierungen sind nachhaltig kosteneffizienter. Wenn das Thema so rausposaunt wird, sollte auch eine passende Webseite bereitstehen.

Weitere Informationen und wer noch mitmacht

Accesskeys sind Tastenkombinationen oder Tastenkürzel, deren Benutzung je nach Browser und Betriebssystem leicht abweicht. Der Webdesigner kann mit folgendem Zusatz festlegen mit welchem Buchstaben ein Link angesprochen wird:

<a accesskey="1" href="http://www.liechtenecker.at" title="Startseite">Startseite</a>

Es reicht lediglich der Zusatz “Accesskey” und das ausgewählte Zeichen. Vorsicht: Es können keine Zahlen des Nummernblocks verwendet werden.

Über die Jahre haben sich folgende Standards für Webseitenelemente herauskristallisiert:

• S – zum Inhalt
• 1 – Startseite
• 2 – Neuigkeiten, News
• 3 – Sitemap
• 4 – Suchfunktion
• 5 – FAQs
• 6 – Hilfe zur Seite
• 7 – Formular für Beschwerden
• 8 – Bestimmungen und Bedingungen
• 9 – Formular für Feedback
• 0 – Accesskey-Übersicht

In wie weit sich diese Standards durchgesetzt haben ist nicht feststellbar, dennoch ist es als Grundlage sehr sinnvoll. Aufpassen sollte man bei Tastenkombinationen aufjedenfall, dass diese nicht in Betriebssystemen schon manifestiert sind, deswegen ist es besser Nummern dafür zu verwenden.

Der Acid Test wird vom Webstandards Projekt veröffentlicht um Browser und HTML Editoren auf Webstandard Tauglichkeit zu prüfen. Aufgabe dieses Tests ist Fehler in der Interpretation von HTML und CSS aufzuzeigen, bekanntlich gibt es große Unterschiede in der Darstellung. Sollte ein Browser nahe den W3C Spezifikationen liegen, könnte er auch eher den Test bestehen. So sollte ein erfolgreicher Test aussehen:

Welcher Browser wird den Acid3 Test bestehen? Der Firefox 2.5 und der IE7 flogen auf einen schnellen Blick gleich mal durch…Ätzend ist das ;)

Im Rahmen der Studie wurden 50 Internetangebote von Bund, Kantonen und Gemeinden auf ihre Zugänglichkeit für Menschen mit Behinderungen getestet. Verglichen mit der vorherigen Studie von 2004 fällt vor allem eine starke Verbesserung der Barrierefreiheit bei Webauftritten auf. Die Internetangebote von Kantonen und Gemeinden sowie bundesnaher Betriebe sind hingegen vielfach nicht geeignet für Menschen mit Behinderungen. Keine der 50 getesteten Seiten war wirklich barrierefrei.

Ich finde den Bericht sehr lesenswert, da auch Fachartikel zum Thema Barrierefreheit enthalten sind. Es wird auch sehr praxisnah beschrieben, wie Menschen mit Behinderung das Internet nutzen oder nicht verwenden können, weil sie an technische Grenzen stoßen.

Was ist eine barrierefreie Webseite?

Eine barrierefreie Webseite sollte so gestaltet sein, dass der Inhalt gut strukturiert aufgebaut ist, so dass für jeden und alle Zugänglichkeit besteht. Ist das nicht der Fall, kann man sogar soweit gehen, dass solche Barrieren im Web eine Diskriminierung bedeuten.

Wer ist Jeder?

Alle Menschen, du und ich und natürlich auch besonders jene mit unterschiedlichsten Beeinträchtigungen. Die meisten von uns haben das Internet mittlerweile sehr in das tägliche Leben integriert: Einkaufen, Neuigkeiten, Unterhaltung, Informationsbeschaffung sind ein Teil der Möglichkeiten zur Nutzung des World Wide Web. Menschen mit Behinderung nutzen diese Services ebenso, in vielen Bereichen sogar besonders stark. Gerade eben für diese Usergruppe ist das Internet mit all seinen Möglichkeiten besonders attraktiv, da es nicht zuletzt zu Unabhängigkeit und Empowerment von Menschen mit Behinderung in gewissen Bereichen führt.. Dennoch haben Menschen mit verschiedensten Behinderungen spezielle Bedürfnisse, auch an das Internet.

Welche Beeinträchtigungen gibt’s im Internet und wieviele sind betroffen?

• Sehbehinderte und blinde Menschen
• Hörbehinderte und gehörlose Menschen
• Lernbehinderte Menschen
• Menschen mit Epilepsie
• Manuell-motorisch eingeschränkte Menschen

Die meisten Schätzungen und Untersuchungen gehen von etwa einem Fünftel der Bevölkerung aus. Also 20% der Surfer benötigen dahingehend optimierte Webseiten. Nicht zu vergessen wären da noch die technischen Beeinträchtigungen wie ältere Computer, Browser oder mobiles Surfen. Die wachsende Zielgruppe im Internet 50+ sollte ein guter Webdesigner auch nicht außer Acht lassen.

Welche Optimierungen muss man vornehmen um seine Webseite weitgehend barrieerfrei zu gestalten?

• Keine Layoutbestandteile im bzw. hinter dem Inhalt (Quellcode) – Verwendung von externen Stylesheets sollte mittlerweile Standard sein
• Tabellen nur für tabellarische Daten. Das hat den Zweck, dass der hinter der Seite steckende Source Code schlank gehalten ist, denn dieser wird z.Bsp.: von Screenreadern oder Brailletastaturen vorgelesen. Vorteile dadurch ist natürlich auch eine bessere Performance, also Ladezeit der Webseite uvm.
• Semantischer Aufbau – Gut strukturierter Inhalt, Überschriften richtig ausgezeichnet, Absätze, Zitate
• Kontraste und Farben sollten für Sehbehinderte gestaltet sein
• Barrierefreies Texten – einfache verständliche Texte
• Links nicht mit “weiter hier” oder “mehr” benennen, sondern mit der dahinterliegenden Erwartung (Bsp.: “Download des Produktfolders”)
• Keine Texte innerhalb von Bildern – Diese können von Screenreadern nicht gelesen werden
• Alternativ-Beschreibungen für Bilder – Bilder brauchen dahinter (im Source Code) eine passende Beschreibung (Bsp: Mädchen mit Blume), damit sich ein blinder Surfer das Bild auch vorstellen kann
• Navigation auch ohne Maus ermöglichen – Accesskeys sind eine gute Variante um gewissen Inhalt gezielt ansteuern zu können
• Valider Source Code – Richtig aufgebauter Source Code bietet den meisten technischen Darstellungen auch richtigen und gewollten Output

Das wären meiner Meinung nach die Hauptfaktoren für einen zugänglichen Internetauftritt. Eine zusätzliche Skalierbarkeit der Textgrößen würde ich heute nicht mehr extra anbieten, da Browser diese Funktion anbieten und in Zukunft am Beispiel des letzten Internet Explorer 7, die Browser mittlerweile qualitativ rendern, vergrößern.

Ist Barrierefreheit im Web nur für beeinträchtigte User?

Nein, es gibt jede Menge weiterer Vorteile:

• Suchmaschinen indizieren die Seiten besser und können den Inhalt vorteilhafter scannen
• Weniger Quellcode bietet bessere Ladezeiten
• Browser- und Plattformunabhängigkeit – die meisten Systeme, ältere Browser oder Smartphones stellen die Seiten optimiert dar
• Nachhaltige Kosten- oder Zeiteinsparung bei Layoutänderungen
• Erhöhung der Nutzer auf der Webseite

Ich hoffe ich konnte einen schnellen Überblick oder aufgeräumten Überblick über Barrierefreiheit im Web geben.

Weitere Links:

WAI-Österreich

Web-Accessibility – Internet Zugang für alle

Web Content Accessibility Guidelines 2.0

An mich sind sie herangetreten, da die Skandia einer der 1. waren die in auf dem Finanzdienstleistungssektor weitgehende Barrierefreiheit anbieten konnten. Somit werde ich über folgende Themen referieren:

• E-Marketing Aktivitäten, finanzspezifisch
• CRM Kundenbindungsmaßnahmen-Online
• Segmentierung und Suchmaschinenmarketing
• Weitere Zielgruppen, z.Bsp.50+ online erreichen mit barrierefreiem Webauftritt
• Warum Versicherungen barrierefrei sein sollten
• Trendanalysen, Kunden-Segemtierung