Inhalte
Die Entwicklung von HTML
Die Entwickler der Websprache HTML waren Wissenschaftler, die einen Standard schaffen wollten, um physikalische Dokumente untereinander auszutauschen. Das Erscheinungsbild der Dokumente auf dem Bildschirm war dabei eher zweitrangig. HTML wurde ursprünglich entwickelt, um eine saubere Trennung von Struktur und Grafikdesign zu erreichen. Die Idee war ein weltweites Web von Seiten, darstellbar in unterschiedlichen Betriebssystemen und Browsern mit Lesbarkeit für alle Nutzer einschließlich Behinderter. Die Webseiten sollten von Such- und Analyserobotern gut les- und auswertbar sein.
Die Erfinder des WWW, waren sich dem Potential des Webs im Bereich Display und Grafik nicht bewusst. HTML war eigentlich auch nicht dafür entwickelt worden. Vorrangig ging es um den technischen Aufbau und maschinellen Austausch der Dokumente, die entweder nur Wissenschaftler oder Maschinen lesen sollten. Die strukturelle Logik der HTML-Dokumente vernachlässigte daher die visuelle Logik für Grafiken und Typografie.
Da heute auch der optische Akzent im Web eine Rolle spielt, passen Webdesigner das Aussehen von Websites oft derart an, dass dabei die Vorgaben für korrektes und strukturiertes HTML ignoriert werden, um z.B. bessere visuelle Eindrücke beim Besucher zu hinterlassen. Vereinzelte Browser-Hersteller lassen unterschiedliche HTML Versionen zu, die aber nicht cross-browsertauglich sind.
Zum Beispiel vermeiden viele Webdesigner die Standard Überschriften in HTML (<h1>, <h2>, usw.), weil sie irrtümlicherweise der Meinung sind, dass diese in einigen Browsern zu groß oder zu klein, z.B. bei <h4>, <h5>, <h6> Überschriften, dargestellt werden. Ursprünglich waren die Header-Tags auch gar nicht für ein Design gedacht, sondern nur für eine Hierarchie der Informationen innerhalb der Dokumente. Menschen und Maschinen konnten so die dargestellten Informationen besser "betrachten".
Einige Webdesigner erstellen für Überschriften individuelle Größen und Formate ohne dabei die HTML Limitierungen für Überschriften-Formate, wie z.B. die Hierarchie von Schriftgrößen, zu beachten.
Strukturierte Inhalte durch Überschriften
Trotz den Anfängen des Web und seiner großen Veränderung zum visuellen Massen-Medium, ist es weiterhin wichtig, dass integrierte Dokumente einer richtigen Struktur unterworfen werden. Je mehr Unterstützung die Browser für Cascading Style Sheets (CSS) liefern, desto mehr können Entwickler Einfluss auf das Design inkl. Struktur Ihrer Projekte nehmen.
Beispiel
Um einen Einblick in die Struktur Ihrer Website zu bekommen, können Sie http://validator.w3.org/detailed.html nutzen. Geben Sie die Website URL in das Eingabefeld ein und erweitern Sie das Menu "More Options". Aktivieren Sie die Checkbox "Show Outline" und klicken den Button "Check" an. Im folgenden Report sehen Sie unten auf der Seite die inhaltliche Struktur wie z.B. Header-Tags (<h1>- <h6>) . Finden Sie keine derartige Ausgabe, wurden entweder die Überschriften-Tags nicht ordnungsgemäß verwendet oder sind nicht vorhanden.
Mit Screenreadern und anderen Hilfsmitteln, haben eingeschränkte Benutzer die Möglichkeit, per Seiten-Struktur zu navigieren. Der Nutzer kann dabei unterschiedliche Strukturelemente wie Top-Level-Elemente (<h1>), next level Elemente (<h2>), dritte Ebene Elemente (<h3>), usw. direkt anwählen. Das Anzeigen oder Hören hinterlegter Texte dieser Elemente, gibt dem Nutzer eine Menge Informationen über die Struktur und den Inhalt der Seite.
Die Seiten sollten generell hierarchisch strukturiert werden, man unterscheidet dabei in Graden: 1. Grades Überschrift (<h1>) die wichtigste (in der Regel Seitentitel oder Überschrift), dann 2. Grades Überschrift (<h2> - in der Regel große Überschriften), bis 3. Grades Überschrift (sub-Sektionen der <h2>) usw. Technisch gesehen sollten die einzelnen Grade einander nach Reihenfolge untergeordnet sein, wie Sie im nachfolgenden Beispiel sehen können, einzelne Überschriftselemente können auch zur Navigation direkt angeklickt werden:
Verwenden Sie keine reinen Textformatierungen, wie Schriftgröße oder Fettdruck, um das Erscheinungsbild einer Überschrift zu formatieren, nutzen Sie stattdessen Formatvorlagen bzw. <h1> - <h6> Tags.
Assistive Technologien und andere Browser verlassen sich auf ein korrektes Markup der Seite, um eine Struktur bestimmen zu können. Bei reinen Textformatierungen ohne Tags wie <h1> - <h6> können Überschriften nicht als Strukturelement interpretiert werden.
Anders gesehen sollten Sie beim Design natürlich keine Header Tags verwenden, um Inhalte auf Ihrer Seite wie z.B. einzelne Sätze oder Wörter zu visualisieren. Diese können Sie wie gewohnt per Schriftgröße, fett, kursiv usw. als Textformatierung vornehmen. Für eine optische Betonung können Sie auch nachfolgende Tags verwenden: Technisch sollten Sie auf jeden Fall das <strong> Tag anstelle von <bold> und <em> statt <i> verwenden. Fett und kursiv (<i>) sind rein optische Akzente, <em> schlägt dagegen einen semantischen Wert vor. Es ist wichtig, dass die Entwickler die richtigen HTML Tags verwenden, diese lassen sich aber auch in HTML-Editoren wie Dreamweaver in den Voreinstellungen unter Bearbeiten> Einstellungen> Allgemein fest definieren.
HTML-Listen bzw. Gliederungen wie <ul>, <ol> und <dl> - vermitteln genau wie Überschriften eine hierarchische Inhaltsstruktur. Geordnete Listen vermitteln dabei eher eine Sequenz oder Progression der Inhalte, als ungeordnete und sollten immer entsprechende Listenelemente enthalten. Unterschiedliche Listenelement-Typen sollten dabei jeweils wirklich nur für Ihren Zweck gemäß Definition verwendet werden. Auch sind leere Listenelemente kein korrektes HTML. Verwenden Sie Listen oder Gliederungen nicht für Layout Zwecke, um beispielsweise Inhalte einzurücken und verschachteln Sie Ihre Elemente ordnungsgemäß z.B. in tieferen Ebenen mit <i>.
Diese Übersetzung wurde im Rahmen einer Vereinbarung mit WebAim.org erstellt. copyright 2011 - WebAIM
Partnerwebsites zum Thema finden Sie hier:
Seo Matrix - Ihr Partner für Accessibility und barrierefreie Word Dokumente im Web!
