Einstieg in Barrierefreies Webdesign

Ein Text besteht nicht nur aus ganzen Wörtern. Es ist auch üblich, lange Begriffe abzukürzen um Texte kürzer zu gestalten. Auch besteht ein Text aus einigen Wörter, die aus anderen Sprachen abstammen, vor allem in technischen Themen. Für Barrierefreiheit muss auch sichergestellt werden, dass diese Teile auch verständlich wiedergegeben werden können, gerade für Screenreader ist dies sehr wichtig.

Screenreader können nicht am Text alleine erkennen, ob ein Wort nun englisch ist oder es sich um eine Abkürzung handelt. Ohne entsprechende Elemente liest ein Screenreader englische Wörter mit starkem deutschen Akzent und Betonung vor oder gibt Abkürzungen wie "z.B." als Kauderwelsch aus. Aus diesem Grunde hat die BITV für die Verständlichkeit konkrete Anforderungen.

Allgemeine Regeln

Die BITV setzt eindeutig voraus, dass Seiten für "alle" Verständlich sein sollen.

Das allgemeine Verständnis der angebotenen Inhalte ist durch angemessene Maßnahmen zu fördern. BITV - Priorität 1, Anforderung 14

Dabei stehen folgende Ansätze zur Verfügung mit denen man das allgemeine Verständnis erhöhen kann

Keine Anglizismen

Eine große Hürde für einige Menschen stellen Anglizismen dar. Vor allem ältere Menschen sind mit der englischen Sprache nicht so sehr vertraut wie jüngere. Leider strotzen gerne die meisten Websites mit englischen Wörtern wie "Home" oder "Sitemap". Für den geübten Internetnutzer sind solche Begriffe bekannt und er weiss was sich hinter diesen Wörtern verbirgt. Ein Nutzer, der erste Erfahrungen im Internet sammelt, kann aus diesen Wörtern keinen Sinn ableiten, wenn er die engliche Sprache nicht beherrscht. Vor allem älteren Nutzer sind solche Begriffe sehr fremdartig. Daher sollte man vor allem in der Navigation auf Anglizismen verzichten, wenn das Ziel eine hohe Barrierefreiheit ist. Mögliche Alternativen für Anglizismen:

• für "Home" Startseite
• für "Sitemap" Seitenübersicht
• für "Mail" - Kontakt

Nun aber sollte man es nicht zwanghaft alles ins Deutsche übersetzen, vor allem da viele in der deutschen Sprache englische Begriffe sich gar nicht ins Deutsche übersetzen lassen, wie "Internet". Nur die, für die sich eindeutige und verständliche Übersetzungen finden lassen, sollten auch übersetzt werden. Zum Beispiel könnte das französische Wort "Portemonaine" problemlos in "Geldbörse" übersetzt werden, ohne das der Sinn abhanden kommt. Während "Internet" sich nur in "internationales Netzwerk" übersetzen ließe, was nicht eindeutig ist und auch nicht geläufig wie Internet

Einfache Sprache

Die BITV legt auch eine einfache und leicht verständliche Sprache fest.

Für jegliche Inhalte ist die klarste und einfachste Sprache zu verwenden, die angemessen ist. BITV - Priorität 1 , Bedingung 14.1

Dadurch sollen kognitv schwache Menschen, z. B. mit Lernschwierigkeiten oder Menschen, die sich nicht mit besonderen Fachbegriffen auskennen unterstützt werden. Unter einer einfachen Sprache versteht man folgende Dinge:

• klare und logische Struktur
• Keine Fußnoten und Querverweise
• Text möglichst kurz, also keine unnötigen Wörter oder Sätze
• möglichst positive Sprache, also ohne Verneinungen
• wenn möglich persönliche Ansprache mit "Du" oder "Sie"
• Zahlen nicht ausschreiben, also anstatt "drei" die Ziffer "3" schreiben.
• leicht verständliche Wörter, wie "möglich" anstatt "potentiell"

Dies sind die Vorschläge aus dem e-Goverment-Handbuch des Bundesamtes für Sicherheit in der IT. Doch sind diese in der Praxis recht schwer umzusetzen, da auch die Zielgruppe bei der Auswahl der Sprache eine wichtige Rolle spielt. Die Betonung liegt auf angemessen, dass heißt man sollte es mit der Vereinfachung der Sprache es nicht übertreiben, also nicht in Kindersprache oder Dadaismus zurückfallen.

Akronyme

Ein Akronym ist ein Kurzwort, aus den Anfangsbuchstaben von mehreren hintereinanderfolgenden Wörtern besteht, wie etwa GmbH. Um nun den Browsern das Akronym zu erklären, hat man bei HTML das acronym - Element. Das betreffende Kurzwort wird von diesem Element umschlossen und in das Attribut wird die Bedeutung des Akronyms geschrieben, wie das folgende Beispiel zeigt:

<acronym title="Gesellschaft mit beschränkter Haftung">GmbH</acronym>

Dadurch wissen die Browser, dass es sich um ein Akronym handelt und Screenreader sprechen das Wort Buchstabe für Buchstabe aus, und sie können auf Wunsch die Bedeutung wiedergeben. So ist das acronym - Element nicht nur für Screenreader interessant, da auch graphische Browser die Bedeutung des Akronyms anzeigen können, wenn der Benutzer seinen Mauszeiger über das Wort legt, wie man im folgenden Bild sehen kann.

Man kann also allen Benutzer stets die Bedeutung von Akronymen mitteilen und sie können diese leicht ausfindig machen, da sie auch durch eine gepunktete Linie hervorgehoben werden, wie bei einem Link. Dieses Feature ist bei nahezu allen modernen graphischen Browsern vertreten.

Falls sich das Akronym sich mehrmals im Quelltext wiederholt, reicht es aus die ausführliche Schreibweise beim ersten Vorkommen anzugeben. Das selbe giltet auch für Abkürzungen.

Möchte man nun aus ästhetischen Gründen auf diese gepunktete Linie verzichten, muss man mit CSS folgende Regel festlegen:

acronym.keineLinie { border:0; }

Wie man sieht, entsteht diese Linie nicht durch die Eigenschaft text-decoration, wie es bei einem Hyperlink der Fall ist, sondern es ist eine Rahmenlinie für die untere Seite. In Kauf nehmen muss man aber, dass es dann nicht mehr für den Benutzer ersichtlich ist, dass hinter dem Akronym auch eine Erklärung versteckt.

Möchte man die Hervorhebung belassen oder eine andere einfügen, so empfiehlt es sich auch einen anderen Mauscursor für Akronyme anzulegen, der erscheint wenn der Mauszeiger sich über dem Akronym befindet. Dadurch erhält der Benutzer ein Feedback, dass sich hinter dem Akronym sich die Erklärung davon befindet. Am besten eignet sich das Fragezeichen-Cursor. Dazu legt man folgende Regel fest:

acronym.mitCursor { cursor:help; }

Abkürzungen

Unter Abkürzungen versteht man, dass ein langes Wort in ein kürzeres Wort umgewandelt wird. Da diese sich von Akronymen unterscheiden, braucht man für diese das abbr - Element. Angewendet wird es wie bei acronym - Elementen, wie das folgende Beispiel zeigt und hat auch die selben Auswirkungen:

<abbr title="zum Beispiel">z. B.</abbr>

Screenreader lesen bei abbr-Elementen immer die ausgeschriebene Version. Auch werden diese Elemente in graphischen Browsern durch eine untere gepunktete Linie hervorgehoben und die Erklärung durch Mouseover angezeigt.

Man sollte immer beachten, dass man für das jeweilige Kurzwort das passende Element verwendet je nach dem ob es eine Abkürzung oder ein Akronym. Laut W3C werden in XHTML2 diese beiden Elemente zusammengelegt.

Sprachen

Was dem gewöhnlichen Nutzer offensichtlich ist, muss den Programmen und Anwendungen erst erklärt werden: Welche Sprache das Dokument spricht. Die hauptsächliche Sprache des Dokuments legt man in dem lang - Attribut des html - Tags an:

<html lang="de"> ....

Bei XHTML muss man noch zusätzlich den XML-Dialekt beachten.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> ...

Das xmlns - Attribut gibt den Namensraum an, den XHTML verwendet und ist aus Konventionsgründen notwendig.

Gerade für Suchmaschinen ist es wichtig, dass sie wissen in welcher Sprache die Seite geschrieben ist. Viele Suchmaschinen bieten ihren Benutzern spezielle Suchen an, wie "Suche nur in deutschen Seiten", die auch häufig genutzt werden. Ohne Angabe der Sprache könnte zu schlechteren Platzierungen in Suchmaschinen kommen.

Wenn nun aber in dem Dokument Wechsel von der Sprache entstehen, meistens durch Fremdwörter, so müssen aus diese markiert werden, was auch die BITV vorschreibt.

Wechsel und Änderungen der vorherrschend verwendeten natürlichen Sprache sind kenntlich zu machen. BITV - Priorität 1, Bedingung 4.1

Dafür nimmt man einfach das allgemeine Inline-Element, kurz span-Element, umschließt damit das entsprechende Fremdwort und teilt in dem lang - Attribut mit, aus welcher Sprache das Wort kommt. Dafür werden Sprachenkürzel nach der ISO 639-1 verwendet.

<span lang="en">Flyer</span>
<span lang="fr">Portemonnaie</span>

Ohne diese Angaben bekommen Anwendungen wie Scrennreader den Sprachenwechsel nicht mit und geben fremdsprachige Wörter mit deutscher Betonung aus, was sich dann sehr unverständlich anhören kann!

Das lang - Attribut ist universell, dass heißt man kann es auf allen Elementen anwenden. So kann man auch zum Beispiel abgekürzte Fremdwörter oder Zitate als Englisch kennzeichnen.

<acronym lang="en" title"Hypertext Markup Language">HTML</acronym>

<q lang="en">To be or not to be</q>