Workshop Internet-Präsenz

Hinweise zur nutzer- und behindertenfreundlichen Gestaltung von Web-Seiten

Grundsätze

  • Die Hauptforderung: der Textmodus muss bleiben. Erstellen Sie keine grafischen Schalter bzw. Links, deren Text nur eine Grafik ist! Text lässt sich auch ohne Verwendung von Grafiktext ansehnlich gestalten. Die Erstellung separater Nur-Text-Seiten ist umstritten: Ziel muss ein universelles Design für alle sein.
  • Achten Sie auf hohen Kontrast und gute Lesbarkeit. Benutzen Sie Schriftarten und -größen, die belastungsärmer erfasst werden können. Es empfiehlt sich grundsätzlich die Verwendung serifenloser Schriften.
  • Bieten Sie bild- und/oder tabellenfreie Alternativen an. Diese stellen auch für den Sehenden eine Geschwindigkeitsalternative dar.
  • Vermeiden Sie verwirrende Gestaltung!
  • Achten Sie auf übersichtliche Strukturierung Ihrer Web-Site, dazu gehören Inhaltsverzeichnis oder Sitemap.
  • Versehen Sie alle Seiten mit einer einheitlichen, immer an derselben Stelle angebrachten Navigationsleiste.
  • Navigationselemente an der linken Seite in Tabellen oder Frames sind wichtige Elemente, trotzdem ist die Navigation gegenüber reinen Textseiten für den Blinden schwieriger.
    Vergessen Sie bei der Verwendung von Frames den <noframes>-Teil nicht!
  • Das <img>-Tag benötigt in jedem Fall das alt-Attribut zur Erläuterung des Bildinhaltes. Wenn der Platz nicht ausreichen sollte, so benutzen Sie das longdesc-Attribut, so dass Sie hiermit eine umfangreichere Beschreibung verfügbar machen können.
    Beispiel: <img … longdesc="url">
    Momentan wird diese Möglichkeit nur von Mozilla unterstützt, der Link wird ausgegeben, wenn man mit der rechten Maustaste auf das entsprechende Bild drückt.
    Wenn eine übergreifende Lösung gewünscht wird, bietet sich ein Link z.B. in der Bildunterschrift an.
    Vermeiden Sie in Bildern versteckte Links.
  • Aufeinander folgende Links sollten nicht nur durch einen Leerraum oder einen Zeilenumbruch getrennt sein. Ordnen Sie Links nicht zu dicht an, da körperbehinderte die Maus nicht immer genau positionieren können.
  • Versehen Sie das Link-Tag <a> mit dem title-Attribut. Bei Überfahren des Links mit der Maus erhält der Betrachter diese Information in einem Tool-Tip-Fenster.
  • Sie können in die Auswahl-Reihenfolge der Links bzw. Formularelemente, die über die Tabulator-Taste erreicht werden sollen, mit dem Attribut tabindex="nummer" eingreifen. Die Nummer legt die Auswahlposition fest.
  • Links und Formularelemente lassen sich mittels des accesskey-Attributs leicht über Tastatur ansteuern. Es wird empfohlen, nach Möglichkeit nur solche Buchstaben auszuwählen, die nicht für den Browser verwendet werden. Letzteres ist sehr schwer, mit der Tabulator-Taste lässt sich aber auch zwischen URL und Browserfenster einfach wechseln.
  • Verwenden Sie bei Tabellen (insbesondere dann, wenn sie nicht der Layoutgestaltung dienen) sowohl Überschriften (<caption>) als auch das spezielle Tabellenkopf-Tag <th>.
    Fügen Sie in das <table>-Tag eine Kurzbeschreibung der Tabelle mittels summary-Attribut ein.
    Vermeiden Sie Tabellen mit festen Breitenangaben: entweder keine Angaben oder nur %-Angaben.
    Benutzen Sie für Tabellenzellen die Attribute scope und axis.
  • Sie können die Bedeutung von Akronymen und Abkürzungen über die speziellen Tags <abbr> und <acronym> einfach zugänglich machen.
    Momentan wird diese Möglichkeit nur von Mozilla unterstützt.
  • Bitte weisen Sie mit dem lang-Attribut aus, wenn sich die Sprache in Ihrem Dokument zeitweilig ändert:
    <span lang="en-us">This is an English text.</span>.
  • Wenn Sie Skripten mittels <script>-Tag in Ihr Dokument einbauen, so versehen Sie sie mit einer alternativen Textausgabe mittels <noscript>-Tag, um im Falle der Nichtausführbarkeit noch eine Reaktion zu ermöglichen.
  • Wenn Sie die Abfrage von Mausereignissen integrieren, achten Sie bitte darauf, dass auch vergleichbare Tastaturereignisse behandelt werden:
    Maus Tastatur
    onmousedown onkeydown
    onmouseup onkeyup
    onmouseclick onkeypress
    onmouseover onfocus
    onmouseout onblur
    Für die Mausereignisse ondblclick und onmousemove gibt es keine Tastaturentsprechungen.
  • Vermeiden Sie animierte GIF-Dateien. Wenn sie gebraucht werden, so achten Sie darauf, dass der Bildwechsel nur langsam erfolgt.
  • Suchmöglichkeiten und Nutzerkonfigurationsmöglichkeiten könnten Ihre Site vervollständigen.

Referenzen