Was sollten Programmierer von HTML Seiten beachten?

Aufgrund des strukturellen Aufbaus von HTML (Hypertext Markup Language), bietet das World Wide Web (WWW) eine sehr ausdrucksvolle und flexible Möglichkeit Informationen in den verschiedensten Formaten (Text, Audio, Video, Grafik, etc.)darzustellen. Obwohl solch vielfältige Möglichkeiten das WWW Angebot für viele Nutzer attraktiver und ausdrucksstärker machen, können sie auch einige Nutzer sehr stark einschränken. Zum Beispiel können Server, deren Hauptseite ein Imagemap ist, den Zugang für Blinde versperren. Jedoch können solche Barrieren vermieden werden, wenn bei der Erstellung von HTML Seiten bestimmte Richtlinien beachtet werden. Anbei sind einige wichtige Kriterien, die es zu beachten gilt. Trotzdem wird die Attraktivität der Seiten nicht oder nur gering eingeschränkt.

Andere deutsche Infos zu diesem Thema vom

FTB
Erstellung von behindertengerechten Internetseiten von C. Dobusch
Design von Web-Seiten für Behinderte Von D. Schüll
Aktion offene Website von T. Reimann

1. Jede Grafik sollte einen alternativen Text bieten.

Grund:

Wenn die Person, die die Seiten liest einen Browser benutzt, der nicht grafisch erbeitet (z.B. Lynx) oder die Grafiken einfach ausgestellt hat in seinem Browser, um z.B. Ladezeit zu sparen, wäre die Beziehung verloren. Vor allem blinde Nutzer profitieren davon.

Wie wird es gemacht:

Das ALT Attribut im Image Reference Anchor sollte mit einem Text versehen werden.

Ungünstig:

Am 13. August hat <A HREF="/bilder/gross/birne.gif" > <IMG SRC="/bilder/klein/birne.gif" >Helmut Kohl< /A > einen Staatsbesuch des Präsidenten der USA < A HREF="/bilder/gross/bill.gif"> <IMG SRC="/bilder/klein/bill.gif"> Bill Clinton< /A > empfangen.

Ein Blinder oder anderer Nutzer mit einem Nur-Text Browser würde nichts weiter über diesen Link erfahren.

Besser wäre es:

Am 13. August hat Helmut Kohl<A HREF="/bilder/gross/birne.gif" > <IMG SRC="/bilder/klein/birne.gif" Alt="Bild von Helmut Kohl">Helmut Kohl </A> einen Staatsbesuch des Präsidenten der USA< A HREF="/bilder/gross/bill.gif"> < IMG SRC="/bilder/klein/bill.gif" Alt="Bild von Bill Clinton"> Bill Clinton </A> empfangen.

2. Wenn Image Maps benutzt werden, sollten noch Alternativen geboten werden, um eine Auswahl zu treffen

Grund:

Wenn die Person, die die Seiten liest einen Browser benutzt, der nicht grafisch erbeitet (z.B. Lynx) oder die Grafiken einfach ausgestellt hat in seinem Browser, um z.B. Ladezeit zu sparen, gibt es keine Möglichkeit mehr, eine Auswahl zu treffen.

Ungünstig:

<TITLE> Kinoplan </TITLE> <H1> Klicken sie auf eins der abgebildeten Kinos zur Anzeige des aktuellen Programmangebots !</H1> <A HREF="http://kino.de/aktuell"> <IMG SRC="http://kino.de/grafik/uebersicht.gif" ISMAP> </A>

Besser wäre es:

<TITLE> Kinoplan <TITLE> <H1> Klicken sie auf eins der abgebildeten Kinos zur Anzeige des aktuellen Programmangebots !</H1> <A HREF="http://kino.de/uebers.html"> Liste der Kinos (fuer nur-Text-Browser </A><H1> <A HREF="http://kino.de/aktuell"> <IMG SRC="http://kino.de/grafik/uebersicht.gif" ISMAP alt=Kinouebersicht"> </A>

In diesem Beispiel wird dem nur-Text-Browser Nutzer die Möglichkeit gegeben anstelle der Imagemap eine alternative Seite "uebers.html" aufzurufen.Diese Seite könnte folgendermaßen aussehen:

< TITLE > Liste aller Kinos < /TITLE >
<H1> Suchen Sie sich eines der folgenden Kinos aus </H1> <UL> <LI> <A HREF="http://kino.de/toni.htm"> Toni </A> <LI> <A HREF="http://kino.de/tonino.htm" > Tonino </A> <LI> <A HREF="http://kino.de/atlantis.htm"> Atlantis </A> <LI> ... <LI> ... </UL>...

Es gibt 2 verschiedene Wege, die umzusetzen:

Jede Seite, die ein ISMAP enthält so zu ändern, daß der Nutzer auf jeder Seite eine Alternative zur grafischen Auswahl hat.
Eine andere Möglichkeit ist, dem Nutzer bereits eine allgemeine Alternative auf der home page zu geben. Das Einfügen einer zweiten home page würde es dem Nutzer ermöglichen die Version "ohne Bilder" auszuwählen. Dies würde folgendermaßen aussehen:

Waehlen Sie <A HREF="http://kino.de/Welcome-no_graphics.html" > ohne Bilder </A> falls Sie die Nur-Text Version wollen.

3. Einfügen von detaillierten Beschreibungen zu allen JPEG images

Grund:

Oft bieten JPEG Images eine Fülle von Informationen, die blinden Nutzern fehlen würden. In diesem Falle sollte eine detaillierte Beschreibung des Bildes beigefügt werden.

Wie wird es gemacht:

Nutzen Sie einen JPEG file editor, können Sie Informationen in die "comments" (Kommentar) Sektion des JPEG files einfügen. Ansonsten können Sie auch einfach eine einfache "Text" Datei als Querverweis für das Image anbieten.

4. Den Text oder Beschreibungen zu allen Audio Clips hinzufügen

Grund:

Audio clips sind nutzlos für Nutzer mit Hörschädigungen oder die mit Computern oder Systemen arbeiten, die keinen Sound bieten.

Ungünstig:

Der Richter befragte
< A HREF="http://www.gericht.de/images/gross/portrait.gif" >
< IMG SRC="http://www.gericht.de/images/klein/portrait.gif" >
den Angeklagten < /A > über sein Alibi im
< A HREF="http://www.neueste-Nachrichten.de/aktuell/mord.htm" > Mordfall an Claudia K..
< /A >
< A HREF="http://www.gericht.de/Sounds/mord.au" >
< IMG SRC="http://www.gericht.de/icons/audio.gif"> < /A >

In diesem Falle gibt es gleich 2 Probleme: Erstens, das Sound Clip Icon hat keinen alternativen Text und kann deshalb von Nutzern mit NUR-Text Browsern nicht als solches erkannt werden.Zweitens können Nutzer mit einer Hörschädigung oder ohne Sound-fähigen Computer diesen Link nicht nutzen.

Besser wäre es:

Der Richter befragte
< A HREF="http://www.gericht.de/images/gross/portrait.gif" >
< IMG SRC="http://www.gericht.de/images/klein/portrait.gif"
alt="Bild des Angeklagten" > den Angeklagten
< /A > über sein Alibi im
< A HREF="http://www.neueste-Nachrichten.de/aktuell/mord.htm" > Mordfall an Claudia K..
< /A >
< A HREF="http://www.gericht.de/Sounds/mord.au" > You can hear
< IMG SRC="http://www.gericht.de/icons/audio.gif" alt="audio icon">
</A > oder lesen Sie < A HREF="http://www.gericht.de/texte/mord.html> den Text
</A > dieser Aufzeichnung.

Mit diesem Code kann der Nutzer die Auswahl treffen zwischen "anhören" des audio clips, oder lesen des Textes.

5. Den Text eines Links beschreibend und nicht durch Worte wie "Klick hier" oder "dort"

Grund:

Worte wie "hier", "Klick", or "das" enthalten keine weiteren Informationen über den Link und sollten deshalb nicht als Link Text benutzt werden. Stattdessen sollte er gut beschreibende Worte enthalten über die der Nutzer schnell eine Übersicht hat. Er sollte aber auch nicht zu lang sein sonst ist es wieder schwerer für den Nutzer, schnell eine Auswahl zu treffen.

Ungünstig:

<A HREF="/no-graphics/uebers.html"> Klick hier!</A> für die Nur-Textversion.

Der Link Text "Klick hier!" erklärt nichts weiter über den Link.

Besser wäre es:

Die <A HREF="/no-graphics/uebers.html"> Nur-Textversion </A> für Nutzer nichtgrafischer Browser.

6. Andere Dateiformate als HTML sollten nur als Alternativen und nicht als Ersatz für HTML Dateien angeboten werden

Grund:

Einige Datei Formate wie z. B. das Portable File Format (PDF) von Adobe Inc. sind rein grafisch und aus diesem Grund nicht erfassbar für blinde Nutzer oder andere, die im Nur-Text Modus browsen oder die nicht den entsprechenden Viewer für das jeweilige Format haben. Andere Datei Formate wie Microsoft Word (TM) or Word Perfect (TM) erfordern besondere Plug Ins.

Wie wird es gemacht:

Wenn die Dokumente in einer speziellen Dateiform angeboten werden müssen (z.B. PDF) sollte man auch noch eine ähnliche Textdatei im HTML oder Textformat anbieten.

Ungünstig:

Wählen Sie <A HREF=http://www.archive.de/jbericht.pdf "> "Jahresbericht unserer Organisation"</A> um sich den kompletten Bericht anzusehen.

In diesem Fall gibt es nur das PDF Format. Das viele Nutzer, vor allem Blinde nicht nutzen können.

Besser wäre es:

Der "Jahresbericht unserer Organisation" ist als <A HREF=http://www.archive.de/jbericht.pdf "> PDF Datei </A> oder <A HREF=http://www.archive.de/jbericht.HTM"> im Html Format verfügbar. </A>

Hier können Sie entweder das PDF oder HTML Format auswählen.

7. Alternativen für Online Formulare anbieten

Grund:

Nicht alle Browser können Formulare darstellen.

Wie wird es gemacht:

Möglichkeiten bieten, um Alternativen zu den Online Formularen darzustellen. Zum Beispiel eine Textdatei zum Downloaden, eine Telefonnummer zum Anrufen oder einfache eine-Mail Adresse.

Zum Beispiel:

<H2> Das <A HREF="net-ordr.htm">Online Bestellformular</A></H2> <P>

oder downloaden Sie <A HREF="ord-form.txt">eine einfache Textform</A> die

Sie mit einem Texteditor offline bearbeiten können<P>

Oder rufen Sie gebührenfrei unter der Nummer 0130-567890 an,ein Berater

wird Ihre Bestellungen entgegennehmen.

Hier gibt es also 3 Optionen 1.) Online Formular, 2) eine Textform, die auch mit einem normalen Texteditor bearbeitet werden kann, 3) Telefonnummer

8. Alle Seiten sollten mit den verschiedensten Browsern getestet werden

Sie sollten mindestens mit einer Version von eienem grafischen Browser einer Version eines textorientierten Browsers getestet werden. Besser wäre es noch mehr unterschiedliche Browser zu benutzen. Die Seiten sollten möglichst in DOS, Windows, und unter UNIX / Linux angeschaut werden.

9. Für einfache Grafiken, die zum Beispiel für Aufzählungen verwendet werden, benutze nur einfache "ALT" Beschreibungen

Grund:

Lange Texte wie zum Beispiel: "Das ist eine rote Kugel" als alternativen Text, würden zu zuviel überflüssigen Text führen.

Wie wird es gemacht:

Entweder diese Grafiken nicht verwenden und "*" für die Aufzählungen benutzen oder als alternativen Text kurz ALT= "o " verwenden.

Die englische Originalversion, in der ich einige Änderungen vorgenommen habe finden Sie unter http://www.gsa.gov/coca/WWWcode.htm

Deutschsprachige Internetangebote

Weitere Internetangebote

Inhaltsverzeichnis