Auf vielen Webseiten sieht man immer wieder “valides (X)HTML” und viele Diskussionen bringen immer wieder das Argument das valider (X)HTML-Code auch guter Code sei. Dies ist aber nicht richtig! Auf Tabellenlayouts basierende Webseiten können ebenso fehlerfrei und damit valide sein. Bei der Validierung bezieht sich die Überprüfung einzig und allein darauf ob bei der Umsetzung des Codes Fehler erzeugt wurden oder nicht. Es wird aber nicht geprüft ob beispielsweise der Content auch seiner Bedeutung entsprechend ausgezeichnet ist. Damit kann man gleich das nächste Argument aushebeln, valider Code ist nicht barrierefrei! Valider Code kann viele Barrieren für Internetnutzer besitzen. Welche Art von validem Code als der “richtige Weg” ist, möchte ich euch näher bringen.
Warum überhaupt Barrierefrei?
Habt ihr euch schon einmal Gedanken darüber gemacht wie Google Seiten in den Index aufnimmt? Oder wie Screenreader blinden Menschen die Webseite präsentieren? Beides funktioniert im Prinzip gleich. Somit könnte man auch sagen Google ist blind. Die Struktur der Webseite ist von sehr großer Bedeutung, sowohl beim Ranking in Suchmaschinen sowie für Menschen, die leider mit Behinderungen Webseiten besuchen.
Deshalb sollte eine Webseite auch strukturell einwandfrei aufgebaut sein, das heißt die Semantik muss passen. Der Inhalt sollte auch als Inhalt gekennzeichnet sein. Tabellen sind dazu da um Statistiken und Daten zu präsentieren, Überschriften zeichnen Abschnitte, wie etwa in einem Buch, aus. Fettgeschriebene Wörter sind wichtiger als normale, ungeordnete Listen stellen sozusagen das Inhaltverzeichnis, also die Navigation der Webseite dar. Bilder ohne Alternativtext und Bildunterschrift sind sozusagen nutzlos und sollten somit nur fürs Layout Verwendung finden.
Ein Aspekt der bei der Umsetzung von Webseiten immer noch häufig vernachlässigt wird und warum sich auch unter neuen Webseiten immer noch recht viele Webseiten wiederfinden, die durchaus einer sogenannten Div-Suppe zugeordnet werden können, ist sich bereits beim Anlegen der Layouts Gedanken über die Bedeutung des zu verwendeten Inhaltes zu machen, um dann auf die der Bedeutung des Contents entsprechenden (X)HTML-Tags zurückzugreifen. Dies nennt man “Semantischer Code“.
Die Umsetzung des richten Codes
Valider Code allein bedeutet nicht viel, außer dass dieser fehlerfrei ist. Anbei hab ich 3 Codebeispiele gepostet, die relativ einfach umzusetzen sind. Diese Beispiele sollen aufzeigen das es mit jeder Technik möglich ist validen Code zu erstellen, allerdings noch lange nicht empfehlenswert sind. Denn wie bereits angesprochen erkennt eine Screenreader-Anwendung beispielsweise zwar in allen 3 Varianten die Texte, allerdings nur im letzten auch die Bedeutung der Inhalte, genauso wie Google auch.
Valides Tabellenlayout
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Tabellenlayout</title> </head> <body> <table> <tr> <td>Lorem Ipsum</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> </tr> </table> </body> </html>
Valides Div-Konstrukt
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Div Konstrukt</title>
</head>
<body>
<div>
Lorem Ipsum
</div>
<div>
Lorem ipsum dolor sit amet
</div>
</body>
</html>
Valider Semantischer Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sematischer Code</title>
</head>
<body>
<h1>
Lorem Ipsum
</h1>
<p>
Lorem ipsum dolor sit amet
</p>
</body>
</html>
Ein weiterer wichtiger Aspekt des sematischen Codes, ist die bessere Übersicht und Struktur des Quellcodes. Ein Grund der beispielsweise auch dazu führt, dass der ein oder andere Webentwickler nicht auf CSS-Frameworks zurückgreift, da hier oftmals ein nicht unerheblicher Ballast an Code mitgeschleppt wird, um so viele potentielle Fehlerquellen wie möglich, beispielsweise später via CSS ausschließen zu können.
Fazit
Wer Wert auf fehlerfreien, guten Code legt der kommt nicht darum den Weg des semantischen Codes zu nehmen. Zum einen hilft man dadurch sich selbst, da Suchmaschinen den Inhalt viel besser interpretieren können und man somit auch evtl. besser platziert wird und zum anderen hilft es ungemein der Barrierefreiheit! Selbstverständlich ist es einfach nicht möglich komplett barrierefreie Webseiten zu erstellen, aber man kann vieles tun um es annähernd zu schaffen.
Webentwickler bei Team23 GmbH & Co. KG, schreibt derzeit seine Bachelorarbeit zum Thema neue Webtechnologien und interessiert sich vor allem für Linux, das Web und Internet im Allgemeinen.
Wie würde dann valider, semantischer Code mit div-Konstrukten aussehen? Von der Annahme her gesehen, dass der Ersteller die Seite grafisch ausschmücken möchte.
Im ersten Moment fällt mir jQuery ein. via “getElementBy…” und dann im jquery den style für die einzelnen Tags mitgeben. So fiele sogar eine .css-Datei weg.
Da denkst du ein wenig zu kompliziert, es ist viel einfacher. Aber wahrscheinlich geht das so nicht richtig aus meinem Eintrag hervor. Mit einem Div-Konstrukt legst du das Layout der Homepage fest. Sagen wir ungefähr so (sorry für die doofe Darstellung, aber besser gehts in den Kommentaren net):
(div id="header") ... (/div)(div id="navigation") ... (/div)
(div id="content") ... (/div)
(div id="sidebar") ... (/div)
In dieses Konstrukt muss aber die richtige Semantik, einfach ohne Semantik bloßen Text reinzustellen, wäre sozusagen “falsch”.
Das heißt, Mit Container Elementen (div) wird das Layout der Seite erstellt, in diese Container wird die Semantik angepasst. Mit JavaScript kann man dann noch tolle Sachen machen, allerdings sollte man dabei auch bedenken, dass dies aber auch einen Fallback benötigt, ansonsten leidet die Barrierefreiheit darunter.
@Marc hat recht, hinzu kommt, dass sich 2. und 3. nicht ausschießen, im Gegenteil es ist sogar die beste variante, da hierdurch a) Design via CSS ermöglicht wird und b) die Semantik dargestellt wird.