Wenn Sie Text in Spalten oder Tabellenform anzeigen möchten, verwenden Sie dafür nicht die Leertaste oder die Tabulatortaste, da dies den Text für Besucher, die eine Assistenz-Technologie verwenden, unverständlich macht. Die auf diese Weise erstellten Spalten werden Zeile für Zeile und nicht Spalte für Spalte gelesen.

Wenn Sie zwischen jedem Buchstaben eines Wortes ein Leerzeichen machen, um es zum Beispiel hervorzuheben, wird jeder Buchstabe separat gelesen, was die Information für jemanden, der eine Software zum Vorlesen von geschriebenem Text verwendet, unverständlich macht. Es gibt andere, barrierefreiere Möglichkeiten, um diese Effekte zu erzielen.

Wie wendet man das an?

Welchen Ansatz Sie wählen, hängt davon ab, welches Ziel Sie erreichen wollen:

Unterteilung eines Textes in mehrere Spalten : Verwenden Sie CSS, um diesen Effekt zu erhalten

Dies ist ein visueller Effekt, der die Bedeutung des Textes nicht beeinflusst. Es gibt mehrere Möglichkeiten, einen Text in mehrere Spalten aufzuteilen. In HTML können Sie beispielsweise für jede Spalte ein <div>-Element verwenden. Mit CSS können Sie diese <div> Elemente als Spalten nebeneinanderstellen. Für viele moderne Browser ermöglicht CSS3 allein die automatische Aufteilung eines Textes, der sich in einem HTML-Element befindet, in mehrere Spalten. Da Sie die Spaltenformatierung mit CSS steuern, bleibt der Text selbst unberührt und damit für Besucher mit Hilfstechnologie verständlich und lesbar.

Text in tabellarischer Form anzeigen: Erstellen Sie eine HTML-Tabelle

Wenn es sich tatsächlich um tabellarische Daten handelt, dann muss die Struktur dieser Daten im HTML-Code vorliegen. . In diesem Fall ist es nicht nur das Design, das zählt, sondern auch die Bedeutung der Daten. Durch das Platzieren der Daten in einer Tabelle wird der Zusammenhang zwischen den Daten deutlich. Dies unterscheidet sich deutlich von einem Text in Spalten, der dem Inhalt des Textes keine zusätzliche Bedeutung verleiht.

Aus diesem Grund sollte die Tabellenform durch Anwendung von HTML-Code in der Struktur des Textes definiert werden.

Buchstaben weiter auseinander positionieren: Verwenden Sie CSS, um diesen Effekt zu erhalten

Buchstaben eines Wortes können mit CSS leicht weiter auseinandergesetzt werden. Dies ist ein besserer Ansatz, als die Verwendung eines Leerzeichens nach jedem Buchstaben, da Sie das Wort selbst nicht ändern. Besucher mit Hilfstechnologie können dann das Wort einfach lesen.

Der folgende HTML-Code zeigt die Überschrift „Museum“. Dem Wort wurden keine Leerzeichen hinzugefügt:

<h2>Museum</h2>

Mit dem folgenden CSS-Code werden die Buchstaben des <h2> Headers etwas auseinandergesetzt (nämlich 1 em, dies ist eine Maßeinheit in CSS). Optisch sieht es so aus, als ob zwischen jedem Buchstaben Leerzeichen eingefügt wurden.

h2 { letter-spacing: 1em; }

Für Redakteure

Der Redakteur sollte darauf achten, dass er keine Leerzeichen oder Tabs verwendet, um Spalten, Tabellen oder spezielle Texteffekte zu erstellen. Tabellen müssen mit den Tabellenfunktionen des Editors im CMS erstellt werden. Für Spalten und Wörter mit weiter auseinander liegenden Buchstaben verwenden Sie CSS.