Barrierefreiheit ist mehr als nur Anpassung an Screenreader. Die Migration ist seit vielen Jahren, auch kriegsbedingt, hoch und Integration aller Menschen wird wichtiger denn je. Das heißt, dass eine Internetseite eben nicht nur von Menschen mit und ohne Beeinträchtigungen, sondern eben auch von Nutzern mit anderen Muttersprachen genutzt wird. Vielen Hilft dabei eine Seite in Leichter oder Einfacher Sprache, oft werden Seiten aber auch in verschiedene Sprachen übersetzt. Für viele Firmen ist es darüber ein wirtschaftliches Muss, Internetseiten nicht nur auf Deutsch und Englisch, sondern in den individuellen Landessprachen ihrer Kunden anzubieten.
Was wir als Europäer dabei gern vergessen ist, dass nicht alle Sprachen in Zeilen von links nach rechts zu lesen sind. Doch welche Auswirkungen kann die Schreibrichtung auf meine Internetseite haben?
Sprachen mit anderen Leserichtungen
Alle europäischen Schriften sind sogenannte rechtsläufige Schriften. Das heißt man schreibt und liest sie von links nach rechts und von oben nach unten. Im Gegenzug dazu fallen einem vermutlich schnell linksläufige Schriften ein: beispielsweise Arabisch oder Hebräisch. Sie werden von rechts nach links geschrieben.
Im traditionellen Chinesisch, Japanisch und Koreanisch wird jedoch in Spalten von oben nach unten und rechts nach links geschrieben. Durch den westlichen Einfluss wird zwar an vielen Stellen auch die rechtsläufige Schreibweise verwendet, aber insbesondere Tageszeitungen verwenden noch das traditionelle Schriftbild. Die traditionelle Mongolische Schrift wiederum wird von oben nach unten, allerdings von links nach rechts gelesen.
Man sieht, auf der Welt werden nahezu alle Schreib- und Leserichtungen verwendet. Möchte ich, dass meine Inhalte in all diesen Schriftsystemen ansprechend und gut lesbar ausgegeben werden, dann muss ich mich an die Besonderheiten anpassen.
Warum ist die Schreibrichtung wichtig?
Damit eine Internetseite harmonisch aussieht, definieren Designer für einzelne Elemente bestimte Größen, Proportionen oder Abstände. Diese werden normalerweise in Dimensionen wie Breite und Höhe, oder Richtungen (oben, unten, rechts, links) angegeben. Dabei orientiert sich der Designer an der Schreibrichtung, in der er den Entwurf plant. Wird nun aber beispielsweise von einer horizontalen zu einer vertikalen Schreibweise gewechselt, dann sind feste Höhen von Elementen möglicherweise ein Problem. Inhalte könnten ungewollt abgeschnitten werden und so nicht mehr lesbar sein – ein Problem für die Barrierefreiheit.
Außerdem prägt die gewohnte Leserichtung auch, wo wir bestimmte Dinge erwarten. Ihnen wird selbst sicherlichen schon aufgefallen sein, dass das Firmenlogo sich meistens oben links befindet. Der Button zum Absenden eines Formulars wiederum ist unten rechts. Auch das hängt mit unserer Leserichtung zusammen, denn das Logo (oder ein anderer sehr wichtiger Inhalt) sollen dem Nutzer zuerst ins Auge fallen. Der Button zum Absenden eines Formulars wiederum ist das letzte was man tut, nachdem man dieses ausgefüllt hat und steht deshalb konsequenterweise unten rechts. Würde man an diesen Grundprinzipien etwas ändern, würde es zu vielen Fehlern und damit Frustration der Nutzer führen – eine unnötige Barriere.
Wie definiert man die Schreibrichtung?
Eine Seite nur zu übersetzen reicht nicht aus, man muss auch, semantisch verständlich, die wichtigsten Informationen auszeichnen. Bei der Internationalisierung von Internetseiten gibt es dabei zwei wichtige Aspekte: Die Sprache selbst und die Schreibrichtung. Schauen wir uns beide einzeln an.
Sprache
Die Hauptsprache einer Seite wird grundsätzlich am öffnenden <html>-Tag mithilfe des Attributs lang angegeben. Ändert sich die Sprache, beispielsweise weil ein englisches Zitat im Original eingebunden wird, so kann das auch an jedem Element innerhalb der Seite mit einem eigenen lang-Attribut deutlich gemacht werden. Die Sprache wird dabei als ISO-Code angegeben, mit dem man auch regionale Unterschiede definieren kann, also beispielsweise „de-DE“ für Deutsch in Deutschland und „de-AT“ für deutsch in Österreich.
Diese Angabe der richtigen Sprache ist für viele Aspekte wichtig: Suchmaschinenoptimierung, die korrekte Aussprache durch Screenreader, aber auch die Auswahl korrekter Anführungsstriche, Worttrennung oder Abstände durch den Browser.
Schreibrichtung
HTML bietet zur Angabe der Schreib-und Leserichtung mithilfe von HTML-Tags oder dem Attribut dir leider nur 2 Möglichkeiten an:
- ltr: left to right, also von links nach rechts
- rtl: right to left, also von rechts nach links
- auto: der Browser entscheidet zwischen beiden Varianten
Wie wir schon wissen, ist das schlicht nicht genug. Deshalb müssen wir für eine genauere Beschreibung der Schreibrichtung zusätzlich das CSS-Attribut writing-mode setzen. Es bietet folgende Möglichkeiten:
- horizontal-tb: Schreibweise in Zeilen von oben nach unten. Ob der Text vorn links nach rechts oder rechts nach links läuft, hängt vom Attribut dir ab.
- vertical-lr und vertical-rl: Der Text verläuft in Spalten, wie im traditionellen Japanisch.
- in Entwicklung: sideways-lr und sideways-rl: der Text wird um 90° nach rechts gedreht.
Und wieso brauche ich jetzt noch CSS?
Nun haben wir unsere Website korrekt übersetzt, die Sprache und Leserichtung sind richtig ausgezeichnet, aber das Design unserer schön gestalteten Seite damit leider kaputt. Der bis ins Detail durchdachte und aufs Pixel genau gestaltete Seitenkopf schneidet das vertikal geschriebene Menü ab und Nutzer können die Unterseiten garnicht erst erreichen. Was nun?
- Lassen Sie ihr CSS so flexibel wie möglich
- Verwenden Sie logische CSS-Attribute
flexibles CSS
Ihr CSS sollte generell so flexibel wie möglich und nur so fest wie nötig sein. Schließlich muss es sich auf einer barrierefreien Seite auch unterschiedlichen Schriftgrößen anpassen. Definieren Sie also so wenige feste Dimensionen wie es ihr Design zulässt und lassen Sie die Elemente mit der Menge des Textes wachsen.
logische CSS-Attribute
Bleiben wir bei unserem Beispiel des abgeschnittenen Headers. Hier haben Sie vielleicht eine CSS-Regel wie diese hier geschrieben:
header {
width: 100%;
max-height: 25rem;
}Das funktioniert für alle rechts- und linksläufigen Schriften sehr gut. Was Sie doch aber eigentlich sagen wollten ist, ganz untechnisch ausgedrückt: In Schreibrichtung soll das Element den gesamten Platz nutzen, quer dazu aber begrenzt sein. Und genau hier kommen logische CSS-Attribute ins Spiel. Sie werden nämlich exakt so definiert: In Schreibrichtung und quer zur Schreibrichtung. Dabei bedienen Sie sich einem Wortschatz, den man als Frontend-Entwickler schon lange kennt: inline und block. Ein Inline-Element reiht sich in den Textfluss ein, ein Block-Element erzeugt quer dazu einen Zeilenumbruch.
Wir können also unsere CSS-Definitionen einfach ersetzen und damit unkompliziert für eine international kompatible und damit auch in anderen Sprachen barrierefreie Seite sorgen. Hier einige Beispiele:
- inline-size statt width
- block-size statt height
- padding-inline-start statt padding-left
- margin-block-end statt margin-bottom
- inset-inline-end statt right
Wer sich für den offiziellen Standard interessiert, kann diesen gern auf der Seite des W3C zu logischen Attributen auf Englisch nachlesen.
Die Einsatzmöglichkeiten sind nahezu endlos. Das Logo, dass im Arabischen oben rechts statt links steht. Der Button, der vertikal statt horizontal dargestellt wird. Die kleine optische Rafinesse, die immer am Ende eines Absatzes eingefügt wird.
Schreibrichtung und Barrierefreiheit – Fazit
Barrierefreiheit hört nicht an den deutschen Landesgrenzen auf. Planen Sie die Internationalisierung Ihrer Website, dann arbeiten Sie am besten gleich mit logischen Attributen. Sie sind einfach umzusetzen und erleichtern auch die späteren Anpassungen. Außerdem sorgen Sie dafür, dass auch Nutzer aus anderen Teilen der Welt ihre Inhalte lesen können. Für ein weltoffenes und gemeinschaftliches Internet – ohne Barrieren und ohne rechte Hetze.