Powered by MyCoRe

Hinweise für das Einstellen barrierefreier Webseiten

Dieses Dokument stellt einen kleinen Leitfaden zur Erstellung barrierefreier Websites dar. Dies ist notwendig, um allen Menschen einen ungehinderten Zugang zu unseren Internetseiten zu gewährleisten. Ein Grossteil wurde bereits im CSS realisiert, jedoch gibt es noch einige Punkte, die die Autoren beim Einstellen von Webseiten beachten sollten.

Anforderungen Beispiele
Bilder und Imagemaps erhalten aussagekräftige alt und title Attribute. <img src="dbtlogo.gif" alt="Logo der Digitalen Bibliothek Thüringen" title="Logo der Digitalen Bibliothek Thüringen"/>
Bilder für Layoutzwecke erhalten leere alt und title Atrribute. <img src="_blank.gif" alt="" title="" />
Datentabellen sollten die Elemente <th>, <thead>, <tbody>, <tfoot> und <caption> sowie die Atrribute summary und scope verwenden. Diese werden benötigt um dem Screenreader das Vorlesen der Tabelle zu ermöglichen.

Aber:Tabellen für Layoutzwecke sollten diese Elemente und Attribute nicht enthalten, da sie nur der Gliederung und dem visuellen Zusammenhang der Daten dienen.		 <caption></caption> Überschrift der Tabelle
<thead></thead> Kopfzeile der Tabelle
<th></th> Für Spalten- bzw. Zeilenüberschriften verwenden
<tbody></tbody> Rumpf der Tabelle
<tfoot></tfoot> Fuss der Tabelle
<table summary="Zusammenfassung des Tabelleninhalts bzw. Beschreibung der Tabelle">
<th scope="Stellt den Bezug der Überschriften zu ihren Elementen dar. Erlaubt sind col, row, colgroup und rowgroup">
Für bessere Lesbarkeit serifenlose Schriften (Arial, Helvetica, Verdana) mit gutem Kontrast zum Hintergrund verwenden, kursive oder blinkende Schrift vermeiden.
Absätze linksbündig im Flattersatz darstellen und keinen Blocksatz verwenden. 		Das ist bereits voreingestellt im CSS.
Für Überschriften, und zwar nur Überschriften, die Elemente <h1>...<h6> verwenden. Das ermöglicht eine bessere Navigation durch das Dokument.

<h1>Überschrift 1</h1>


<h2>Überschrift 1.1</h2>


<h3>Überschrift 1.1.1</h3>


<h1>Überschrift 2</h1>


... und so weiter
Inhalte gruppieren und strukturieren. Das heisst Anker für einzelne Abschnitte innerhalb einer Seite mit viel Inhalt setzen. <a href="#inhalt">Zum Inhalt springen</agt;
.... <div div="inhalt">Inhaltsbereich</divgt;
Sehbehinderte Menschen nutzen einen Reader für Webseiten, der ihnen die Inhalte vorliest. Damit dieser aquch korrekt funktioniert, sollten Sprachwechsel im Inhalt mit dem Attribut lang des Elements <span> als solche kenntlich gemacht werden. <html lang="de">...
<span lang="en">Digital Library</span>
Diese Reader sind meistens auch machtlos was Abkürzungen und Akronyme anbelangt. Deshalb sollten Abkürzungen mit dem Element <abbr> und Akronyme mit dem Element <acronym>gekennzeichnet und mit dem Attribut title ausgeschrieben werden. <abbr lang="de" title="und so weiter">usw.</abbr>
<acronym lang="en" title="Hypertext Markup Language">HTML</acronym>