Grundidee Barrierefreies Web-Design hält die aktuellen Standards ein und trennt konsequent zwischen Inhalt und Formatierung. Zugleich werden die Inhalte sowohl auf der Ebene der Site als auch innerhalb der einzelnen Seiten logisch angeordnet. Zusätzliche Syntaxelemente vereinfachen die Bedienung für behinderte Besucher noch zusätzlich (s. unten).
Todsünden Die Fachzeitschrift c't hat drei Todsünden bezügliche Barrierefreiheit formuliert (19/2004):
  • Frames: Frames werden von Screen-Readern und Suchmaschinen (!) nur als leere Seiten erkannt.
  • Layout-Tabellen: Tabellen sind nicht für Layoutzwecke gedacht, sondern für die Strukturierung von Daten. Z.T. weisen Webseiten bis zu 80 verschachtelte Tabellen auf!
  • Javascript für Navigation: Screen-Reader können Javascript nicht auswerten.
Schriftgrössen Die Schriftgrössen sollten durch Browsereinstellungen veränderbar sein. Ist dies nicht möglich, sollte ein Style-Switcher zum Einsatz kommen.
Farbwahl Schrift und Hintergrund sollten sich durch einen hohen Kontrast voneinander abheben. Rot und Grün sollte wegen der verbreiteten Rotgrünschwäche behutsam eingesetzt werden.
Navigation per
Tabulatortaste
<a href="portrait.html" tabindex="3">Unser Portrait</a> Für das schnelle ansurfen der Links per Tabulatortaste sollte die Reihenfolge mit dem Attribue tabindex bewusst festgelegt werden.
Bilder <img scr="sonaball.jpg"
title="Pianobar am Sommernachtsball 08"
alt="Newsbild"
longdesc="SoBaBeschreibung.html" />
Bilder müssen für Behinderte korrekt in (X)HTML integriert werden:
  • title-Attribut: Kurzbeschreibung des Bildes
  • alt-Attribut: Platzhalter, für den Fall, dass das Bild nicht angezeigt wird.
  • longdesc-Attribut: (X)HTML-Datei mit ausführlicher Beschreibung.
Abkürzungen <acronym title="United States of America">USA</acronym> Abkürzungen sind mit dem acronym-Tag zu kennzeichnen und mit erklärendem Text zu versehen.
Aufzählungen <ul>
  <li>home</li>
  <li>portrait</li>
  <li>...</li>
</ul>
Aufzählungen sind unbedingt als Listen zu kennzeichnen. Dies gilt auch für Navigationsmenüs, denn sie sind nichts anderes als Auswahllisten.
Zitate <cite>Zitat...</cite> Zitate sollen als solche gekennzeichnet werden.
Tabellen <table titel="Jahresumsatz"
summary"Diese Tabelle zeigt die stark steigenden Jahresumsätze">
<caption>Jahresumsatz seit 2004</caption>
<tr>
  <th>Jahr</th>
  <th>Umsatz in CHF</th>
</tr>
<tr>
  <td>2004</td>
  <td>1'201'000</td>
</tr>
</table>
Tabellen
  • th-Tag zur Kennzeichnung der Überschriften.
  • title-Attribut für einen aussagekräftigen Tabellentitel.
  • summary-Attribut zur knappen Zusammenfassung.
  • caption-Tag zur prägnanten Beschriftung der Tabelle
(Kontakt)-adressen <address>Muster Peter
Beispielhausen
Mailkontakt</address>
Kontaktadressen und Adressen der Autoren sollten insbesondere für Behinderte angeführt werden. Dabei sollten sie mit dem address-Tag gekennzeichnet sein. Tipp: englische Schreibweise beachten.