Diese Seite ist Teil der Site Barrierefreies Internet von U. Kehl, URZ der Martin-Luther-Universität Halle-Wittenberg. Es sollen die HTML-Techniken zur Erstellung barrierefreier Web-Seiten des WWW-Konsortiums kurz vorgestellt werden.


Inhaltsverzeichnis

Zum Anfang der Seite | Zum Anfang der Seite | Zum Abschnitt HTML-Techniken

4. HTML-Techniken

Zum Anfang der Seite | Zum Inhaltsverzeichnis | Zum Abschnitt Dokumentstruktur

Der folgende Abschnitt führt einige Techniken zu Gestaltung barrierefreier HTML-Seiten auf. Er ist nach Themen geordnet und folgt der HTML 4.0 Spezifikation.


4.1 Dokumentstruktur und Meta-Daten

Zum Anfang der Seite | Zum Abschnitt HTML-Techniken | Zum Abschnitt Sprachinformationen

Prüfpunkte für diesen Abschnitt: 3.2.

Web-Designer sollen die strukturelle Auszeichnung von Dokumenten nutzen und diese gemäß ihrer Spezifikation in allen Seiten eines Dokumentes. Dies führt zur Konsistenz innerhalb der Site und fördert die Verständlichkeit für andere Werkzeuge, wie Index-Werkzeuge, Suchmaschinen, Übersetzungsprogramme, Navigationswerkzeuge und Programmen, die Tabellen in Datenbanken speichern.

4.1.1. Meta-Daten

Prüfpunkte für diesen Abschnitt: 7.4., 7.5., 13.9. und 3.2.

Einige Strukturelemente machen Angaben über das Dokument selbst, sie werden Meta-Daten genannt - Meta-Daten geben Informationen über Daten. Gut gemachte Meta-Daten können bedeutende Orientierungsinformationen für die Nutzer von HTML-Seiten bieten. Zu den Meta-Daten gehören:

4.1.2. Link-Metadaten und Navigationstools

Prüfpunkt für diesen Abschnitt: 13.2.

Web-Designer sollten das LINK-Tag zur Kennzeichnung der Navigation und der Relationen der Seiten untereinander benutzen. Einige Browser können Navigationswerkzeuge generieren oder ermöglichen das geordnete Drucken von Dokumenten.

Beispiel:

Die folgenden LINK-Tags könnten im Kopf des Kapitels 2 eines Buches eingebunden sein.

<LINK rel="Next" href="kapitel3.html">
<LINK rel="Previous" href="kapitel1.html">
<LINK rel="Start" href="einband.html">
<LINK rel="Glossary" href="glossar.html">
   

Ende des Beispiels.

4.1.3. Strukturelle Gruppierung

Prüfpunkte für diesen Abschnitt: 12.3.

Die folgenden HTML-Tags gruppieren den Inhalt und machen ihn damit leichter verständlich:

Alle diese Techniken sollten Web-Designer nutzen, wenn sie angebracht und natürlich sind. Die zufällige Nutzung dieser Gruppierungsmechanismen wird den Leser irritieren.

4.1.4. Abschnittsüberschriften

Prüfpunkt für diesen Abschnitt: 3.5.

Abschnittsüberschriften sollen mit den HTML-Tags H1-H6 gekennzeichnet werden, zusätzlich können zur visuellen Trennung noch Horizontallinien (HR) eingefügt werden, sie alleine jedoch sich nicht ausreichend.

Halten Sie stets die richtige Reihenfolge der Überschriften ein erst H1, dann H2 usw., überspringen sie niemals eine Stufe und nutzen Sie niemals die Überschriften-Tags für Formatierungen von Text.

Das folgende Beispiel zeigt, wie HTML und Formatvorlagen benutzt werden können, um Überschriften und den folgenden Inhalt zu gestalten.

Beispiel:

Gestaltung von Überschriften und Inhalt.

<HEAD>
<TITLE>Kochtechniken</TITLE>
  <STYLE type="text/css">
    /* kennzeichnet Überschrift und folg. Inhalt */
    DIV.section2 { margin-left: 5% }
  </STYLE>
</HEAD>
<BODY>
  <H1>Kochtechniken</H1>
    ... hier ein bißchen Text ...
  <DIV class="section2">
    <H2>Kochen mit Öl</H2>
      ... hier ein bißchen Text ...
  </DIV>
  <DIV class="section2">
    <H2>Kochen mit Butter</H2>
      ... hier ein bißchen Text ...
  </DIV>
  ...

Und so sieht da Überschriftenbeispiel aus !

Ende des Beispiels.


4.2. Sprachinformationen

Zum Anfang der Seite | Zum Abschnitt Dokumentstruktur | Zum Abschnitt Textauszeichnung

4.2.1. Kennzeichnung einer Sprachänderung

Prüfpunkt für diesen Abschnitt: 4.1.

Wenn Sie auf einer Seite unterschiedliche Sprachen benutzen, machen Sie dies unbedingt mit dem "lang"-Attribut deutlich.

Beispiel:

<P lang="en">
  And with a certain 
  <SPAN lang="fr">je ne sais quoi</SPAN>,    
  she entered both the room, and his life, forever. 
  <Q>My name is Natasha, </Q>
  she said. 
  <Q lang="it">Piacere,</Q>
  he replied in impeccable Italian, locking the door.
</p>

Ende Beispiel.

Die Kennzeichnung des Wechsels der Sprache ist aus einer Reihe von Gründen wichtig:

  1. Einer Braille-Ausgabe wird das Einfügen von Sonderzeichen als Kennzeichen für eine andere Sprache und die richtige Nutzung der Kurzschrift ermöglicht .
  2. Sprachausgaben mit mehreren Sprachen wird die richtige Betonung der Worte ermöglicht.
  3. Es wird eine automatische Sprachübersetzung möglich.

4.2.2. Kennzeichnung der Primärsprache

Prüfpunkt für diesen Abschnitt: 4.3.

Ebenfalls eine gute Praxis ist, die primäre Sprache eines Dokumentes zu kennzeichnen, entweder durch Auszeichnung - wie im Beispiel - oder durch HTTP-Header (bei neueren Apache-Servern durch Anhängen der Sprache an den Dateinamen, z. B. .de, .en - Anmerkung des Herausgebers).

Beispiel:

 <HTML lang="de">
   ....der Rest der HTML-Seite in deutsch ...
 </HTML>

Ende Beispiel.


4.3. Textauszeichnungen

Zum Anfang der Seite | Zum Abschnitt Sprachinformationen | Zum Abschnitt Listen

Der folgende Abschnitt diskutiert Möglichkeiten der Strukturierung von Textstücken.

4.3.1. Betonung

Prüfpunkte für diesen Abschnitt: 3.3.

Zur Kennzeichnung der Betonung sollen das EM-Tag oder das STRONG-Tag benutzt werden. B und I -Tag sind nur zur Präsentation. Mit der richtigen Kennzeichnung von Betonung können z. B. Sprachausgaben in die Lage versetzt werden, die entsprechenden Stellen wirklich zu betonen.

4.3.2. Akronyme und Abkürzungen

Prüfpunkte für diesen Abschnitt: 4.2.

Kennzeichnen Sie Abkürzungen und Akronyme (aus Einzelbuchstaben zusammengesetzte Abkürzung) mit dem ABBR- und ACRONYM-Element und nutzen Sie das "title"-Attribut, um die Bedeutung zu übermitteln.

Beispiel:

<p> 
  Willkommen im <acronym title="World Wide Web">
    WWW</acronym> !
</p>
<p>
  <abbr title="Im allgemeinen">I. allg.</abbr> 
  sollte diese Übersetzung richtig sein.
</p>

und so gestaltet Ihr Browser Acronyme und Abkürzungen.

Ende Beispiel.

4.3.3. Zitate

Prüfpunkt für diesen Abschnitt: 3.7.

Das Q- und das BLOCKQUOTE-Tag markieren In-Zeile und Block-Zitate.

Beispiel:

Das Beispiel zeigt ein längeres Zitat mit blockquote und ein Wort mit q-Tag.

<blockquote lang="en" 
            cite="http://www.w3.org/TR/1999/
            WAI-WEBCONTENT-TECHS-19990505/#edef-BLOCKQUOTE">
  <p>
    The Q and BLOCKQUOTE elements mark up inline 
    and block quotations, respectively.
  </p>
</blockquote>
<p>
  Ein kleiner Test für <q>Zitate</q>
</p>

Ende Beispiel.

4.3.4. Auszeichnung und Formatvorlagen statt Bilder

Prüfpunkt für diesen Abschnitt: 3.1.

Die Verwendung von HTML und Formatvorlagen statt Bildern, wenn möglich, verbessert die Barrierefreiheit aus folgenden Gründen:

Ein Beispiel dieser Technik ist, Mathematik in's Web zu bringen:

Normalerweise wird TeX benutzt, um technische Dokumente zu erstellen, diese werden dann oft mit Konvertierungsprogrammen in HTML umgewandelt. Dabei entstehen häufig Bilder, falsch benutzte Tags und Tabellen zur Layoutkontrolle. Konsequenzen daraus sind:

4.3.5. Weitere Strukturkennzeichnungen

CITE
Zitat oder Verweis auf ein anderes Dokument.
DFN
Definition eines Ausdruckes.
CODE
Stück eines Computer-Programmtextes.
SAMP
Beispiel-Ausgaben von Programmen oder Skripten
KBD
Tastatureingaben.
VAR
Variablen oder Programmargumente.
INS
kennzeichnet eingefügten Text.
DEL
kennzeichnet gelöschten Text.

4.4. Listen

Zum Anfang der Seite | Zum Abschnitt Textauszeichnung | Zum Abschnitt Tabellen

Prüfpunkt für diesen Abschnitt: 3.6.

Benutzen Sie die HTML-Listenelemente DL, UL und OL ausschließlich für Listen, niemals zur Gestaltung, wie z. B: Einrückungen.

4.4.1. Numerierte Listen

Die geordneten (numerierten) Listen helfen sehbehinderten Lesern sich in der Liste zurechtzufinden, in ungeordneten Listen können schnell Listenpunkte verloren gehen. Besonders in geschachtelten Listen ist diese Gefahr sehr groß. Web-Designer sollten kontextbezogene Anhaltspunkte in ihren Listen einfügen.

Für numerierte Listen sollten zusammengesetzte, statt einfache Numerierung benutzt werden, weil hier bei geschachtelten Listen einzelnen Numerierungspunkte mehrmals auftreten können.

Beispiel:

Die folgende CSS2-Formatvorlage zeigt, wie für zusammengesetzte Numerierungen für UL- und OL-Elemente erzeugt werden können.

<STYLE Type="text/css">
   UL, OL { counter-reset: item }
   LI { display: block }
   LI:before { content: counters(item, "."); 
      counter-increment: item }
</STYLE>
<BODY>
  <OL>
    <LI> Punkt 1.</LI>
    <OL>
      <LI> Punkt 1.1.</LI>
      <LI> Punkt 1.2.</LI>
    </OL>
    <LI> Punkt 2.</LI>
  </OL>
</BODY>

Und so sieht diese numerierte Liste aus ! Das Ergebnis wird Ihnen nicht gefallen, ich kenne auch keinen Browser, der das absolut richtig macht !

Ende Beispiel.

Solange Browser nicht hinreichend gut CSS 2.0 unterstützen, sollten Web-Designer die Zählungen per Hand vornehmen und die Bullets ausschalten - Anmerkung des Herausgebers.

Beispiel:

Abschalten der Listenpunkte.

<STYLE Type="text/css">
  OL { list-style-type: none; list-style-position: inside}
</STYLE>
<BODY>
  <OL>
    <LI>1. Punkt 1</LI>
    <OL>
      <LI>1.1. Punkt 1.1.</LI>
      <LI>1.2. Punkt 1.2.</LI>
    </OL>
    <LI>2. Punkt 2.</LI>
  </OL>
</BODY>

Und so sieht es aus !

Ende Beispiel.

4.4.2. Grafische Listenpunkte

Prüfpunkte für diesen Abschnitt: 1.1.

Mit Hilfe der Formatvorlagen können auch die Listenpunkte (Bullets) umdefiniert werden. Denken Sie daran, immer einen Standard anzugeben, der in Kraft tritt, wenn das entsprechende Bild nicht geladen werden kann.

Beispiel:

Grafische Listenpunkte als kleine Grafiken, ist CSS abgeschaltet kommen die "normalen" Punkte zum Einsatz.

<STYLE Type="text/css">
  UL { list-style-image: url(blueball.gif); 
       list-style-type: disc; list-style-position: inside}
</STYLE>
<BODY>
  <UL>
    <LI>Punkt 1.</LI>
    <UL>
      <LI>Punkt 1.1.</LI>
      <LI>Punkt 1.2.</LI>
    </UL>
    <LI>Punkt 2.</LI>
  </UL>
</BODY>

Und so sieht das Beispiel aus !

Ende Beispiel.

Unbedingt vermieden werden müssen Listenpunkte in Definitionslisten, wenn doch notwendig, muß hier unbedingt eine aussagekräftiges Textäquivalent geschaffen werden.

Ebenfalls zum schlechten Stil gehört es, wenn in die Listenpunkten Zusatzinformationen, z. B. über die Farbe, gelegt werden. Wenn auch das nicht vermieden werden kann, dann unbedingt Textäquivalente, die die Bedeutung der verschiedenen Punkte beschreiben.


4.5. Tabellen

Zum Anfang der Seite | Zum Abschnitt Listen | Zum Abschnitt Links

In diesem Abschnitt wird die Gestaltung barrierefreier Tabellen mit Hilfe des TABLE-Elementes diskutiert. Grundsätzlich werden Tabellen für tabellarische Daten und zur Layout-Kontrolle benutzt.

4.5.1. Datentabellen

Prüfpunkte für diesen Abschnitt: 5.5., 5.1., 5.2. und 5.6.

Web-Designer können HTML 4.0 - Tabellen mit verschiedenen Methoden barrierefreier machen:

Diese Kennzeichnungen erlauben es Browsern, die Struktur einer Tabelle zu erfassen und ohne visuelle Kontrolle durch die Tabelle zu navigieren.

Beispiel:

Das Beispiel zeigt die Verbindung von Datenzellen mit ihren Überschriften über das "headers"-Attribut

 <TABLE border="1"
        summary="Diese Tabelle gibt die Anzahl der 
                Tassen Kaffee für jeden Abgeordneten wieder,
                die Art des Kaffees,
                und ob mit oder ohne Zucker."
        align="left">
<CAPTION>Kaffeetassen für jeden Abgeordneten</CAPTION>
<TR> 
  <TH id="header1">Name</TH>
  <TH id="header2">Tassen</TH>
  <TH id="header3" abbr="Art">Art des Kaffees</TH>
  <TH id="header4">Zucker ?</TH>
</TR>
<TR> 
  <TD headers="header1">M. Muster</TD>
  <TD headers="header2">10</TD>
  <TD headers="header3">Espresso</TD>
  <TD headers="header4">Nein</TD>
</TR>
<TR>
  <TD headers="header1">U. Mann</TD>
  <TD headers="header2">5</TD>
  <TD headers="header3">Schwarz</TD> 
  <TD headers="header4">Ja</TD>
</TR>
</TABLE>

Ende Beispiel.

Sprachausgaben werden diese Tabelle folgendermaßen vorlesen:

summary: Diese Tabelle gibt die Anzahl der Tassen Kaffee für jeden 
         Abgeordneten wieder, die Art des Kaffees, und ob mit oder 
         ohne Zucker.
CAPTION: Kaffeetassen für jeden Abgeordneten
Name: M. Muster, Tassen: 10, Art: Espresso, Zucker: Nein
Name: U. Mann, Tassen: 5, Art: Schwarz, Zucker: Ja

Mit einem grafischen Browser wird die Tabelle etwa so aussehen:

Kaffeetassen für jeden Abgeordneten
Name Tassen Art des Kaffees Zucker ?
M. Muster 10 Espresso Nein
U. Mann 5 Schwarz Ja
[Beschreibung der Kaffeetabelle]

 

 

Das folgende Beispiel zeigt die Verwendung des scope-Attributes statt des header-Attributes. Scope muß einen der folgenden Werte haben: "row", "col", "rowgroup" oder "colgroup". Scope spezifiziert die Menge von Datenzellen, die mit der Überschriftenzelle verbunden sind. Diese Methode ist bei kleinen Datenzellen nützlich und ergibt bei richtiger Anwendung die gleichen Ergebnisse.

Beispiel:

Das Beispiel zeigt die Verbindung von Datenzellen mit ihren Überschriften über das "headers"-Attribut

 <TABLE border="1"
        summary="Diese Tabelle gibt die Anzahl der 
                Tassen Kaffee für jeden Abgeordneten wieder,
                die Art des Kaffees,
                und ob mit oder ohne Zucker."
        align="left">
<CAPTION>Kaffeetassen für jeden Abgeordneten</CAPTION>
<TR> 
  <TH scope="col">Name</TH>
  <TH scope="col">Tassen</TH>
  <TH scope="col" abbr="Art">Art des Kaffees</TH>
  <TH scope="col">Zucker ?</TH>
</TR>
<TR> 
  <TD>M. Muster</TD>
  <TD>10</TD>
  <TD>Espresso</TD>
  <TD>Nein</TD>
</TR>
<TR>
  <TD>U. Mann</TD>
  <TD>5</TD>
  <TD>Schwarz</TD> 
  <TD>Ja</TD>
</TR>
</TABLE>

Ende Beispiel.

Grafisch, wie gesprochen geben beide Beispiele die gleiche Ausgaben.

Für die Verwendung des in englischer Sprache "axis"-Attributes siehe man bitte direkt beim W3C nach.

4.5.2. Vermeidung von Layouttabellen

Prüfpunkte für diesen Abschnitt: 5.3. und 5.4.

Webautoren sollten Formatvorlagen für Layout und Positionierung verwenden. Wegen der unvollständigem Unterstützung von CSS durch die Browser gerade in diesem Punkt, vor allem bei relativer Positionierung, ist es manchmal notwendig, doch Tabellen zu benutzen. Dann muß unbedingt darauf geachtet werden, daß bei einer Linearisierung der Tabelle, also der Umwandlung der Zellen in Absätze, zeilen- oder spaltenweise, der Sinn des Inhaltes erhalten bleibt.

Verwenden Sie in unvermeidbaren Layouttabellen unbedingt Elemente zur Strukturierung des Inhalts, wie Überschriften, Listen und Absätze.

Benutzen Sie weiterhin in solchen Tabellen niemals Tabellen-Strukturelemente, wie z. B. TH, um Textformatierungen (fett und zentriert), zu erzielen. Nutzen Sie in solchen Zellen Formatvorlagen oder Formatierungsattribute.

4.5.3. Umgebrochener Text in Tabellen

Prüfpunkt für diesen Abschnitt: 10.3.

In Layouttabellen und in Datentabellen mit Text in den Zellen wird dieser Text in den Zellen umgebrochen. Dadurch entstehen Probleme mit älteren Bildschirmvorlesesystemen (Screen reader), die nicht den HTML-Quellcode vorlesen, sondern das, was am Bildschirm zu sehen ist. Mit der Folge, daß von jeder Zelle eine Zeile gelesen wird und anschließend erst zur nächsten Zeile übergegangen wird.

Web-Designer sollten die Gefahr des Zeilenumbruches in Tabellenzellen minimieren. D. h., wenn es sich nicht vermeiden läßt, Text in Tabellenzellen zu positionieren, sollten sie Folgendes beachten:

Schnelltest: Lesen Sie den Bildschirm, indem Sie mit einem Blatt Papier den Bildschirm abdecken und nur Zeile für Zeile freigeben.

Neuere Systeme haben dieses Problem nicht, weil sie den HTML-Quellcode auswerten und die Struktur der Tabelle erkennen, wenn diese richtig ausgezeichnet ist.

4.5.4. Probleme in älteren HTML-Versionen

Im HTML 3.2 erscheinen TFOOT-Zeilen vor den Datenzeilen.


4.6. Links

Zum Anfang der Seite | Zum Abschnitt Tabellen | Zum Abschnitt Bilder

4.6.1. Linktexte

Prüfpunkt für diesen Abschnitt: 13.1.

Gute Linktexte sollten nicht übertrieben allgemein gehalten werden, klick hier impliziert nicht nur eine Geräteabhängigkeit (Maus), sondern es sagt auch absolute nichts über Inhalt und Ziel des Links aus.

Außerdem sollten Web-Designer stets über das "title"-Attribut eine klare und präzise Beschreibung des Links geben, sie wird in neueren Browser als Flyout-Hilfe angezeigt.

Wenn auf einer Web-Seite ein Linktext mehrmals auftritt, sollte sich dahinter auch das gleiche Ziel verbergen und umgekehrt. Dies hilft nicht nur der Barrierefreiheit, sondern ist auch gutes Design. Läßt es sich absolut nicht vermeiden, muß der Unterschied im Ziel mit Hilfe des "title"-Attributs verdeutlicht werden.

"Hörer" einer Seite - nicht notwendig sehbehindert - können nicht mit den Augen eine Seite "abscannen". Sie springen oft von Link zu Link, um sich einen Überblick über den Inhalt einer Seite zu machen oder bestimmte Informationen zu suchen. In dieses "Abscannen" gerät man bei der Verwendung mit Lynx ebenfalls fast automatisch, weil da die Cursor-Tasten von Link zu Link springen.

Deswegen geben Sie bei einer Folge von artverwandten Links im ersten Link eine Art Einführung, dies gibt Inhaltsangaben für Nutzer, die die Links in Folge lesen.

Beispiel:

<A href="my-doc.html">Mein Dokument ist verfügbar in HTML</A>,
<A href="my-doc.pdf" title="Mein Dokument in PDF">PDF</A> und
<A href="my-doc.txt" title="Mein Dokument als Text">als Text</A>.

Ende Beispiel.

Alternativer Text für Bilder genutzt als Link

Prüfpunkt für diesen Abschnitt: 1.1.

Wenn ein Bild anstatt einem Link-Text als Links benutzt wird, so geben Sie bitte einen gleichwertigen Text für das Bild an.

Beispiel:

<A href="wege.html">
  <IMG src="wege.gif"
       alt="Gekennzeichnete Wanderwege">
</A>

Ende Beispiel.

Oder, wenn Sie im Link unmittelbar einen Text angeben, kann als ALT-Text ein Leerzeichen " " geschrieben werden.

Beispiel:

<A href="wege.html">
  <IMG src="wege.gif" alt=" ">
  Gekennzeichnete Wanderwege
</A>

Ende Beispiel.

4.6.2. Gruppierung und Umgehung von Links

Prüfpunkte für diesen Abschnitt: 13.6. und 10.5.

Wenn Links zu einer Gruppe zusammengefaßt sind (Navigationsleiste), sollten sie auch als eine Einheit gekennzeichnet werden. Diese Einheit kann dann bei Bedarf übersprungen werden, um z. B. Vorlesezeiten zu verkürzen.

Methoden dazu sind:

Im HTML nutze man das DIV, SPAN, P, oder FRAME Element, um Links zu gruppieren und das "id" oder "class"-Attribut um sie zu identifizieren.

Beispiel:

In diesem Beispiel wird das P-Element genutzt, um eine Reihe von Links zu gruppieren, das "class"-Attribut identifiziert sie als Navigationsleiste (z.B. für Formatvorlagen), "tabindex" ist auf einen Anker nach dieser Gruppe gerichtet und ein Link am Anfang dieser Gruppe verzweigt ebenfalls zu diesem Anker.
<HEAD>
  <TITLE>Wie unsere Site benutzt wird</TITLE>
</HEAD>
<BODY> 
  <P class="navigation">
    [<A href="#wie">Überspringe Navigationsleiste</A>]
    [<A href="home.html">Home</A>]
    [<A href="search.html">Suchen</A>]
    [<A href="new.html">Neuigkeiten</A>]
    [<A href="sitemap.html">Site-Map</A>]
  </P>
  <H1>
    <A name="wie" tabindex="1">Wie unsere Site benutzt wird</A>
  </H1>
<!-- Inhalt der Seite -->
</BODY> 

Ende Beispiel.

4.6.3. Tastaturzugriff

Prüfpunkte für diesen Abschnitt: 9.4. und 9.5.

Tastaturzugriff zu den aktiven Elementen einer Seite ist extrem wichtig für Nutzer ohne Zeigerinstument (Maus). Browser sollten die Möglichkeit haben, Tasten mit verschiedenen Aktionen zu verknüpfen. Im HTML 4.0 können auch über das "tabindex"-Attribut Tastaturverknüpfungen in Form von Tabulatorsprüngen angegeben werden.

Beispiel:

In diesem Beispiel kann der Nutzer die "c"-Taste (meist mit einer browserabhängigen Meta-Taste) drücken, um den Link zu folgen.
<A accesskey="c" href="doc.html" hreflang="en" 
   title="Beschreibung des Elements">
  Beschreibung des Elements
</A>

Ende Beispiel.

4.6.4. Anker und Ziele

Prüfpunkt zu diesem Abschnitt 10.1.

Solange Browser es nicht ermöglichen, das Aufgehen neuer Fenster abzuschalten, vermeiden Sie es. Ändern Sie nicht ohne Ankündigung das aktuelle Fenster. In diesem Punkt besteht ein Konflikt mit der Forderung, daß aus Framesets Links in eine andere Site in einem neuen Fenster geöffnet werden sollten, um "Schaufenster"-Effekte zu vermeiden (Anm. des Herausgebers).


4.7. Bilder und verweis-sensitive Grafiken

Zum Anfang der Seite | Zum Abschnitt Links | Zum Abschnitt Programmobjekte

Dieser Abschnitt behandelt die Barrierefreiheit von Bildern, einschließlich kleiner animierter GIF-Bilder und verweis-sensitive Bereiche in Bildern.

4.7.1. Kurze gleichwertige Texte für Bilder

Prüfpunkt zu diesem Abschnitt 1.1.

Wenn Sie das IMG-Tag benutzen, geben Sie über das "alt"-Attribut einen gleichwertigen Text zum Bild an, kurz alt-Text genannt.

Beispiel:

<IMG src="lupe.gif" alt="Suchen"> 

Ende Beispiel.

Im OBJECT-Tag geben Sie den alternativen Text im Körper des Objektes an.

Beispiel:

<OBJECT data="lupe.gif" Type="image/gif">
  Suchen
</OBJECT>

Ende Beispiel.

4.7.2. Langbeschreibungen für Bilder

Prüfpunkt für diesen Abschnitt: 1.1.

Wenn ein kurzer Text nicht ausreicht, den Inhalt zu verdeutlichen, geben Sie über das "longdesc"-Attribut einen Namen für eine Seite mit ausführlicher Beschreibung an.

Beispiel:

<IMG src="97sales.gif" alt="Verkäufe für 1997"
     longdesc="verkauf97.html">

In verkauf97.html:

Ein Diagramm zeigt die Entwicklung er Verkäufe im Jahr 1997. Das Diagramm ist ein Balkendiagramm, welches in Prozentwerten die Zunahme der monatlichen Verkäufe zeigt. Die Verkäufe im Januar haben sich gegenüber Dezember 1996 um 10% erhöht, die Verkäufe im Februar fielen um 3%, ...

Ende Beispiel.

Für Browser, die das "longdesc"-Attribut nicht unterstützen (fast alle, außer Netscape 6.2 und Mozilla 1.0 - Anm. des Herausgebers), stellen Sie einen beschreibenden Link zur Verfügung (einen sog. d-Link).

Beispiel:

<IMG src="97sales.gif" alt="Verkäufe für 1997" 
     longdesc="verkauf97.html">
<A href="verkauf97.html" 
   title="Beschreibung des Verkaufsdiagramms von 1997">
  [D]
</A>

Verkauf 1997 [D]

Ende Beispiel.

Längere Beschreibungen für Objekte können ebenfalls mit einem Link im Objektkörper gemacht werden (im Objekt können sich wieder Tags befinden, im Gegensatz zum alt-Text).

Unsichtbare d-Links

Achtung: Unsichtbare d-Links sind zu Gunsten des "longdesc"-Attributes verworfen, sollten also nicht mehr benutzt werden.

Unsichtbare d-Links sind kleine oder transparente Bilder mit dem alternativen Text "d-Link" oder "D" innerhalb eines A-Tags. Sie können nur durch Tabulatortasten erreicht werden und sollen zusätzliche Beschreibungen für Bilder geben. Sie werden von Web-Designern benutzt, die aus gestalterischen Gründen keine sichtbaren Links für zusätzliche Beschreibungen wünschen.

4.7.3. ASCII-Bild

Prüfpunkt zu diesem Abschnitt 13.10.

Vermeiden Sie Bilder aus ASCII-Zeichen und nutzen Sie statt dessen richtige Bilder mit Textäquivalenten und ggf. Langbeschreibungen, ist dies nicht möglich, fügen Sie einen Link ein, um über das ASCII-Bild zu springen.

Beispiel:

<<P>
  <a href="#post-art">Überspringe ASCII-Bild</a>
<!-- hier das ASCII-Bild -->
  <a name="post-art">Erklärung für das ASCII-Bild</a>

Ende Beispiel.

ASCII-Bilder sollten auch als solche gekennzeichnet werden, z.B. [Springe hinter das ASCII-Bild] oder mit einer Langbeschreibung auf einer separaten Seite beschrieben werden.

Beispiel:

  %   __ __ __ __ __ __ __ __ __ __ __ __ __ __  
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
Blinkfrequenz (Hz)

Ende Beispiel.

Eine andere Möglichkeit ist, für kleinere Bilder, wie Smileys, das ABBR-Tag mit dem "title"-Attribut zu verwenden.

Beispiel:

<P>
  <ABBR title="Smiley als ASCII-Bild">:-)</ABBR>

Ende Beispiel.

Ist das ASCII-Bild zu komplex, so sichern Sie ein angemessenes Textäquivalent für das Bild.

Eine weitere Möglichkeit, ASCII-Bilder zu vermeiden ist, sie einfach durch natürliche Worte zu ersetzen, so kann z. B. oft der Pfeil "->" einfach durch "weiter" ersetzt werden.

4.7.4. verweis-sensitive Grafiken

Verweis-sensitive Grafiken (image map) sind Grafiken, die aktive Bereiche enthalten. Wenn der Nutzer einen dieser Bereiche aktiviert, wird dadurch eine Aktion ausgelöst, meist wird ein Link verfolgt, aber es können auch z. B. Daten zum Server geschickt werden.

Um eine sensitive Grafik barrierefrei zu machen, muß jeder Bereich ohne Zeigerinstrument erreichbar und aktivierbar sein.

Sensitive Grafiken werden mit dem MAP-Element erzeugt, es gibt prinzipiell zwei Arten: Die klientseitigen mit dem "usemap"-Attribut, bei dem der Browser die verbunden URI's verarbeitet und die serverseitigen mit dem "ismap"-Attribut, bei denen der Server die Klick-Koordinaten (geräteabhängig!) verarbeitet.

Im englischsprachige Seite englischen Originaltext ist nun die Möglichkeit eingeräumt, wenn sich die Bereiche nicht durch die "shape"-Regionen darstellen lassen, doch ausnahmsweise serverseitige sensitive Grafiken zu nutzen. Da im "shape"-Attribut Polygonzüge genutzt werden können, ist es meiner Meinung nach immer möglich mit hinreichender Genauigkeit beliebige Gebiete definieren zu können.

Sensitive Grafiken werden auch als Submit-Buttons in Formularen benutzt, sehen Sie dazu den Abschnitt Grafische Tasten.

4.7.4.1. Textäquivalente für klientseitige sensitive Grafiken

Prüfpunkt in diesem Abschnitt: 1.1.

Stellen Sie Textäquivalente für sensitive Grafiken bereit, falls sie visuelle Informationen enthalten.

Falls das AREA-Tag benutzt wird, um die Bereiche zu definieren, nutzen Sie das "alt"-Attribut

Beispiel:

 <IMG src="welcome.gif" 
      alt="verweis-sensitive Grafik für Bereiche der Bibliothek"
      usemap="#map1">
<MAP name="map1">
<AREA shape="rect" coords="0,0,30,30"
      href="reference.html" alt="Katalog">
<AREA shape="rect" coords="34,34,100,100"
      href="media.html" alt="Audio-visuelles Labor">
</MAP>

Ende Beispiel.

Das nächste Beispiel zeigt die Verwendung des OBJECT-Tags, statt des IMG-Tags, um mehr Informationen zum Bild zu geben.

Beispiel:

<OBJECT data="welcome.gif" Type="Image/gif" usemap="#map1">
  Es gibt verschiedene Bereich in der Bibliothek, z. B. den
  <A href="reference.html">Katalog</A> und das 
  <A href="media.html">Audio-visuelle Labor</A>.
</OBJECT>
<MAP name="map1">
  <AREA shape="rect" coords="0,0,30,30"
        href="reference.html" alt="Katalog">
  <AREA shape="rect" coords="34,34,100,100"
        href="media.html" alt="Audio-visuelles Labor">
</MAP>

Ende Beispiel.

4.7.4.2. Redundante Textlinks für klientseitige sensitive Grafiken

Prüfpunkt des Abschnittes: 1.5.

Zusätzlich zum Textäquivalent können redundante Textlinks elegant erzeugt werden, wenn das AREA-Tag durch das A-Tag ersetzt wird.

Beispiel:

<OBJECT data="navbar1.gif" Type="Image/gif" usemap="#map1">
  <MAP name="map1">
  <P>Navigation durch die Site.
    [<A href="guide.html" shape="rect"
        coords="0,0,118,28">Zugangs-Führer</A>]
    [<A href="shortcut.html" shape="rect"
        coords="118,0,184,28">Start</A>]
    [<A href="search.html" shape="circle"
        coords="184.200,60">Suchen</A>]
    [<A href="top10.html" shape="poly"
        coords="276,0,276,28,100,200,50,50,276,0">
        Die 10 wichtigsten Punkte</A>]
  </MAP>
</OBJECT>

Ende Beispiel.

Beachten Sie, daß im obigen Beispiel die alternativen Textlinks nur sichtbar sind, wenn das Bild nicht angezeigt wird.

4.7.4.3. Serverseitige sensitive Grafiken

Prüfpunkte in diesem Abschnitt: 1.2. und 9.1.

Der englischsprachige Seite englische Originaltext für server-side Image maps schlägt drei Techniken vor, wie serverseitige sensitive Grafiken barrierefrei gemacht werden könnten. Für mich sind sie völlig überflüssig!

4.7.5. Farben in Bildern

Prüfpunkt für diesen Abschnitt: 2.2.

Sichern Sie, daß die Vordergrund- und Hintergrund-Farbkombinationen einen ausreichenden Farb- und Helligkeitskontrast liefern. Denken Sie an Menschen mit Farbsehproblemen (die Rot/Grün-Farbblindheit ist relativ verbreitet!) und mit monochrom-Monitoren.

4.7.6. Animierte Grafiken

Prüfpunkt für diesen Abschnitt: 7.3.

Kaum ein Browser gestattet das Anhalten von animierten Grafiken. Vermeiden Sie sie für barrierefreie Web-Seiten.


4.8. Applets und andere Programmobjekte

Zum Anfang der Seite | Zum Abschnitt Bilder | Zum Abschnitt Audio und Video

Wann immer Applets in eine Web-Seite mit APPLET oder OBJECT eingebunden werden können, so ist OBJECT die bevorzugte Methode.

4.8.1. Text- und nicht-Text-Äquivalente für Applets und andere Programmobjekte

Prüfpunkte für diesen Abschnitt: 1.1., 6.2. und 6.3.

Wenn das OBJECT-Tag benutzt wird, so stellen Sie einen äquivalenten Text im Objektinhalt zur Verfügung.

Beispiel:

<OBJECT classid="java:Druck.class" width="500" height="500">
  Wenn die Temperatur steigt, bewegen sich die Moleküle ...
</OBJECT>

Ende Beispiel.

Ein etwas komplexeres Beispiel nutzt aus, daß Objekte ineinander geschachtelt werden können.

Beispiel:

<OBJECT classid="Java:Druck.class" width="500" height="500">
  <OBJECT data="Druck.mpeg" Type="video/mpeg">
    <OBJECT data="Druck.gif" Type="Image/gif">
      Wenn die Temperatur steigt, bewegen sich die Moleküle ...
  </OBJECT>
  </OBJECT>
</OBJECT>

Ende Beispiel.

Wenn doch das APPLET-Tag benutzt wird, dann geben Sie ein Textäquivalent immer im "alt"-Attribut und im Inhalt des APPLETs an.

Schlechtes Beispiel:

<APPLET code="Druck.class" width="500" height="500"
        alt="JavaApplet: Wie Temperatur den Druck beeinflußt">
  Wenn die Temperatur steigt, bewegen sich die Moleküle ...
</APPLET>

Ende schlechtes Beispiel.

4.8.2. Direkt zugreifbare Applets

Prüfpunkt für diesem Abschnitt: 8.1.

Wenn Applets den Eingriff des Nutzers erfordern, z. B. für ein Experiment, das sich nicht alternativ darstellen läßt, muß das Applet selbst barrierefrei gestaltet werden.

Für Informationen zur Entwicklung barrierefreier Applets sehe man bitte in:

Damit verbundenen Prüfpunkte: 3.4., 6.4., 6.5., 7.1., 7.2., 7.3., 7.4., 9.2., 10.1. und 1.4.

4.8.3. Audio- und Video erstellt von dynamischen Objekten

Prüfpunkte in diesem Abschnitt: 8.1. und 1.4.

Stellen Sie ein Text-Äquivalent wie für ein Bild, Audiodescription für die Bilder und Bildunterschriften für den Ton bereit. Wenn ein Applet Bewegung erzeugt, sollte die Möglcihkeit gegeben werden, die Bewegung anzuhalten, siehe auch den nächsten Abschnitt zu Audio und Video.


4.9. Audio und Video

Zum Anfang der Seite | Zum Abschnitt Programmobjekte | Zum Abschnitt Frames

Zur Einbindung von multimedialen Objekten sollte das OBJECT-Element benutzt werden. Aus Gründen der Kompatibilität zu älteren Netscape-Versionen kann das proprietäre EMBED-Element benutzt werden, es wird allerdings vom W3C nicht befürwortet.

Ansonsten gelten die Designhinweise zu Audio und Video.


4.10. Frames

Zum Anfang der Seite | Zum Abschnitt Audio und Video | Zum Abschnitt Formulare

Frames geben die Möglichkeit, Seiten in verschiedene Bereiche aufzuteilen, allerdings müssen die Beziehungen der Inhalte der Frames für nichtvisuelle Nutzer deutlich gekennzeichnet werden.

Trotz allem ist die Nutzung von Frames (mit FRAMESET, FRAME, und IFRAME) aus drei Gründen problematisch:

In den nächsten Abschnitten wird diskutiert, wie Frames barrierefrei gemacht werden können.

4.10.1. Frametitel für leichte Orientierung

Prüfpunkt in diesem Abschnitt: 12.1.

Beispiel:

Nutzung des "title"-Attributes, um Frames einen Namen zu geben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
  <TITLE>Ein einfaches Frameset-Dokument</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%"
          title="Unsere Online-Bibliothek"> 
  <FRAME src="nav.html" title="Navigations-Leiste">
  <FRAME src="doc.html" title="Dokumente">
  <NOFRAMES>
    <A href="lib.html" title="Bibliotheks-Links">
       Zur Online-Bibliothek
    </A>
  </NOFRAMES>
</FRAMESET>

Ende Beispiel.

4.10.2. Beschreibung von Frame-Beziehungen

Prüfpunkte in diesem Abschnitt: 1.1. und 12.2.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
  <TITLE>Heutige Neuigkeiten</TITLE>
</HEAD>
<FRAMESET cols="10%,*,10%">
  <FRAMESET rows="20%,*">
    <FRAME src="promo.html" Name="Brom" title="Promotions">
    <FRAME src="sitenavbar.html" name="navbar"
           title="Site-Navigationsleiste" 
           longdesc="frameset-desc.html#navbar">
  </FRAMESET>
  <FRAME src="story.html" name="story" 
         title="Ausgeählte Seite- Hauptinhalt"
         longdesc="frameset-desc.html#story">
    <FRAMESET rows="*,20%">
      <FRAME src="headlines.html" name="index" title="Index " 
             longdesc="frameset-desc.html#headlines">
      <FRAME src="ad.html" name="adspace" title="Reklame">
    </FRAMESET>
    <NOFRAMES>
      <p><a href="noframes.html">Version ohne Frames</a></p>
      <p><a href="frameset-desc.html">
           Beschreibung der Frames.</a></p>
    </NOFRAMES>
</FRAMESET>
</HTML>

 frameset-desc.html könnte so aussehen

#Navbar - Dieses Fenster stellt Links zu den Hauptabschnitten 
         der Site bereit: Weltneuigkeiten, Landesneuigkeiten 
         Neues aus der Region, Technik-News und Unterhaltung.
#Story - Dieses Fenster zeigt die aktuelle Geschichte.
#Index - Dieses Fenster enthält Links zu den Schlagzeilen
         des Tages.
  

Ende Beispiel.

Beachten Sie, wenn sich der Inhalt eines Frames ändert, dann ist auch der äquivalente Text nicht länger verfügbar. Auch sollten Links zu den Framebeschreibungen gemeinsam mit anderen alternativen Texten im NOFRAMES-Element verfügbar sein.

4.10.3. Lesbarkeit in Browsern ohne Frameunterstützung

Prüfpunkte für diesen Abschnitt: 1.1. und 6.5.

Beispiel:

In diesem Beispiel hat der Nutzer, wenn er top.html mit einem Browser ohne Frames liest, über einen Link Zugang zu einer nicht-Frame Version.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
  <TITLE>This is top.html</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%" title="Our big document">
  <FRAME src="main.html" title="Where the content is displayed">
  <FRAME src="table_of_contents.html" title="Table of Contents">
  <NOFRAMES>
    <A href="table_of_contents.html">Table of Contents.</A>
<!-- other navigational links that are available in main.html
     are available here also. -->
  </NOFRAMES>
</FRAMESET>
</HTML>

Ende Beispiel.

4.10.4. Frame-Quelle

Prüfpunkt in diesem Abschnitt: 6.2.

Web-Designer müssen darauf achten, daß sich die Beschreibung eines Frames mit seinem Inhalt ändert, dies geht nicht, wenn der Frame-Inhalt z. B. ein Bild ist. Daraus folgt, daß die Quelle ("src"-Attribut) immer eine HTML-Datei sein muß.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
  <TITLE>A correct frameset document</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Evolving frameset">
  <FRAME name="goodframe" src="apples.html" 
         title="Apples">
</FRAMESET>
</HTML>
  <!-- In apples.html -->
         <P><IMG src="apples.gif" alt="Apples">

Ende Beispiel.

Das nächste schlechte Beispiel sollte vermieden werden, weil es ein Bild direkt als Frame enthält

Schlechtes Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
  <TITLE>A bad frameset document</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Static frameset">
  <FRAME name="badframe"
         src="apples.gif" title="Äpfel">
</FRAMESET>
</HTM>

Beachte, wenn z. B. ein Link ein neues Bild lädt,

<P>Visit a beautiful grove of 
<A target="badframe" href="oranges.gif" 
   title="Orangen">oranges</A>

dann stimmt der Titel des Frames (Äpfel) nicht länger mit dem Inhalt des Frames (Orangen) überein.

Ende schlechtes Beispiel.

4.10.5. Frame-Ziel

Prüfpunkt in diesem Abschnitt: 10.1.

Web-Designer sollten es vermeiden, ein neues Browserfenster als Ziel eines Frames mit target="_blank" zu öffnen.

Bemerkung des Herausgebers: Auf der anderen Seite sollten fremde Seiten nicht in eigene Frames eingebunden werden, um "Schaufenstereffekte" und falsch erscheinende Urheberschaft zu vermeiden. Daraus folgt: entweder keine Links zu fremden Seiten oder keine Frames.

4.10.6. Alternativen zu Frames

Der häufigste Grund zur Benutzung von Frames ist der, daß das Browserfenster des Nutzers in einen Navigationsteil und einen inhaltlichen Teil getrennt werden soll. Um die scheinbare Trennung zu erreichen und Frames zu vermeiden, können Sie folgendes Versuchen:

  1. Erzeugen Sie ein separates Dokument ( z.B. nav.html genannt) zur Navigation. Separat weil es von mehreren Seiten aus genutzt werden soll.
  2. In jedem Dokument, welches die Navigation nutzen soll, fügen Sie am Ende ein OBJECT-Element der folgenden (oder ähnlichen) Form ein:

    Beispiel:

    <P>
      <OBJECT data="nav.html">
        Gehe zum<A href="nav.html">Inhaltsverzeichnis</A>
      </OBJECT>

    Ende Beispiel.


    Die Plazierung am Ende bewirkt, daß Nutzer mit abgeschalteten Formatvorlagen diese wichtige Information am Anfang der Seite sehen werden.
  3. Nutzen Sie Formatvorlagen, um die Navigation an beliebiger Stelle im Dokument zu plazieren. Z. B. sogt das nächste Beispiel dafür, das die Navigation 25% vom linken Rand belegt.
    OBJECT { float: left; width: 25% }

    oder fest links unten:
    OBJECT { position: fixed; left: 0; bottom: 0 }

    Achtung: Navigationsmechanismen oder anderer Inhalt können auch durch serverseitige Einfügungen (server side include) erfolgen.

    Anmerkung des Herausgebers: Server Side Includes stellen ein Sicherheitsproblem dar, vor allem bei "öffentlichen" Web-Servern.

4.10.7. Framegröße in relativen Einheiten

Prüfpunkt für diesen Abschnitt: 3.4.

Wenn Sie Frames nutzen möchten und alle obigen Punkte berücksichtigt haben, so nehmen sie bitte bei der Festlegung der Framegröße Prozentwerte und keinen Pixel, wie in den obigen Beispielen.

Anmerkung des Herausgebers: Das W3C hat das "scrolling"-Attribut vergessen zu erwähnen. M. M. nach kann scrolling="no" für die Barrierefreiheit katastrophale Wirkungen haben, es verhindert, das bei zu großem Inhalt Rollbalken die Verschiebung des Inhalts im Frame ermöglichen.


4.11. Formulare

Zum Anfang der Seite | Zum Abschnitt Frames | Zum Abschnitt Skripte

Dieser Abschnitt diskutiert die Möglichkeiten Formulare und Formularinhalte barrierefrei zu machen.

4.11.1. Tastaturzugriff zu Formularelementen

Prüfpunkte des Abschnittes: 9.4. und 9.5.

In diesem Beispiel wird eine Elementreihenfolge mit Hilfe des "tabindex"-Attributes definiert.

Beispiel:

<FORM action="submit" method="post">
  <P>
  <INPUT tabindex="2" Type="text" name="field1">
  <INPUT tabindex="1" Type="text" name="field2">
  <INPUT tabindex="3" Type="submit" name="submit">
</FORM>

Ende Beispiel.

Das nächste Beispiel ordnet die Taste "U" über das LABEL-Element einem Eingabefeld zu. Damit ist dieses Formularelement am Windows-PC mit der Tastenkombination [Alt]+[u] erreichbar.

Beispiel:

<FORM action="submit" method="post">
  <P>
  <LABEL for="user" accesskey="U">Name</LABEL>
  <INPUT Type="text" id="user">
</FORM>

Ende Beispiel.

Sehen Sie bitte den Abschnitt Tastaturzugriff in den Design-Techniken für weitere Informationen.

4.11.2. Gruppierung von Formularelementen

Prüfpunkt zu diesem Abschnitt: 12.3.

Web-Designer sollten Informationen zu Gruppen zusammenfassen, wenn dies natürlich und angebracht ist. Wenn Formularelemente in logische Einheiten gruppiert werden können, benutzen sie das FIELDSET-Element und beschriften Sie diese Gruppen mit dem LEGEND-Element.

Beispiel:

<FORM action="http://irgendwo.de/neuernutzer" method="post">
<FIELDSET>
  <LEGEND>Persoenliche Informationen</LEGEND>
  <LABEL for="vorname">Vorname: </LABEL>
  <INPUT Type="text" id="vorname" tabindex="1">
  <LABEL for="name">Name: </LABEL>
  <INPUT Type="text" id="name" tabindex="2">
  ... weitere persoenliche Informationen ...
</FIELDSET>
<FIELDSET>
  <LEGEND>Krankengeschichte</LEGEND>
  ... Informationen zur Krankengeschichte ...
</FIELDSET>
</FORM>

Ende Beispiel.

Gruppierung von Menüoptionen

In langen Listen von Menüpunkten sollten die Auswahlmöglichkeiten, die mit dem OPTION-Element definiert werden, durch das OPTGROUP-Element unterteilt werden. Nutzen Sie das "label"-Attribut, um diese Gruppen zu beschriften.

Beispiel:

<FORM action="http://irgendwo.de/irgendwas" method="post">
  <P>Welches Betriebssystem nutzen Sie?
  <SELECT name="Betreibssysteme">
    <OPTGROUP Label="PC">
      <OPTION Label="win" value="1.1">MS-Windows
      <OPTION Label="linux" value="1.2">Linux
      <OPTION Label="bsd" value="1.3">FreeBSD
    </OPTGROUP>
    <OPTGROUP Label="Unix">
      <OPTION Label="sun" value="2.1">Solaris
      <OPTION Label="hp" value="2.2">HP-UX
    </OPTGROUP>
    <OPTGROUP Label="Mac">
      <OPTION Label="9" value="3.1">MacOS 9
      <OPTION Label="X" value="3.2">MacOS X
    </OPTGROUP>
  </SELECT>
</FORM>

und so sieht das Menü aus !

Ende Beispiel.

4.11.3. Beschriftung von Formularelementen

Prüfpunkte des Abschnittes: 12.4. und 10.2.

Ein Beispiel für die Nutzung des LABEL-Tag mit dem "for"-Attribut ist im vorherigen Beispiel enthalten.

Beschriftung und Formularelement können auch implizit verknüpft sein. Dies geschieht über das "for"- und das "id"-Attribut

Beispiel:

<LABEL for="vorname">Vorname:
  <INPUT Type="text" id="vorname" tabindex="1">
</LABE>

Ende Beispiel.

4.11.4. Grafische Tasten

Prüfpunkt für diesen Abschnitt: 1.1.

Die Nutzung von Grafiken zur Dekoration von Knöpfen und Tasten macht ein Formular einzigartiger und erhöht ggf. auch die Verständlichkeit. Die Nutzung von Grafiken macht aus einem Knopf nicht automatisch eine Barriere, vorausgesetzt es wird ein gleichwertiger Text zur Verfügung gestellt.

Jedoch, wenn ein Knopf mit dem INPUT-Tag und Type="Image" erstellt wird, wird daraus implizit eine serverseitige sensitive Grafik. Wenn der Knopf angeklickt wird, werden die x- und y-Koordinaten zum Server geschickt.

Die damit verbundenen Probleme wurden im Abschnitt Bilder und sensitive Grafiken behandelt, sie sollten eigentlich vermieden werden. Wenn die Aktion doch von der Klickposition abhängen soll, gibt es zwei Möglichkeiten:

4.11.5. Techniken für spezielle Formularelemente

Prüfpunkt des Abschnittes: 10.4.

Beispiel:

Einige ältere Hilfsprogramme benötigen in Formularelementen, wie z. B: TEXTAREA eine Anfangsbelegung, um richtig zu funktionieren.

<FORM action="http://irgendwo.de/text-read" method="post">
  <P>
  <TEXTAREA name=ihrname rows="20" cols="80">
    Bitte geben Sie hier Ihren Namen ein.
  </TEXTAREA>
  <INPUT Type="submit" value="Absenden">
  <INPUT Type="reset">
  </P>
</FORM>

Ende Beispiel.

Stellen Sie ein Textäquivalent für Bilder in Knöpfen bereit, die als Submit-Knopf benutzt werden.

Beispiel:

<FORM action="http://irgendwo.de/text-read" method="Post">
  <INPUT Type="Image" name=submit src="button.gif" alt="Submit">
</FORM>

Ende Beispiel.

4.11.6. Abwärtskompatibilität in Formularen

In einigen HTML 3.2. Browsern:


4.12. Skripte

Zum Anfang der Seite | Zum Abschnitt Formulare | Zum Ende der Seite

4.12.1. Leichte Transformation von Skripten

Prüfpunkt des Abschnittes: 6.5.

Web-Designer müssen dafür Sorge tragen, daß Seiten nutzbar sind, wenn die Interpretation von Skripten ausgeschaltet ist oder der Browser gar keine Skripte unterstützt.

Erzeugen Sie durch Skripte keinen dynamischen Inhalt einer Seite. Werden Skripte nicht behandelt, so ist überhaupt nichts zu sehen. Besser ist es mit Hilfe von Formatvorlagen und/oder Skripten, vordefinierte Inhalte anzuzeigen oder zu verbergen, dann wird im Ernstfall alles angezeigt. Ausgenommen davon sind natürlich dynamische Inhalte, die vom Server erstellt werden.

Vermeiden Sie unbedingt Links mit "javascript:" als URI. Können Skripte nicht bearbeitet werden, kann der Link-Inhalt nicht erstellt werden - Sackgasse !

Schlechtes Beispiel:

Das ist eine Sackgasse, für Nutzer mit Browsern ohne JavaScript.

<A href="javascript:">...</A>

Ende schlechtes Beispiel.

4.12.2. Skripte, die Flimmern verursachen

Prüfpunkt des Abschnittes: 7.1.

Bis die Browser es erlauben, Bildschirmflimmern abzustellen, vermeiden Sie Bildschirmflimmern.

4.12.3. Skripte, die Bewegung und Blinken verursachen

Prüfpunkte des Abschnittes: 7.2. und 7.3.

Solange es Browser noch nicht ermöglichen, Bewegung und Blinkeffekte abzuschalten, müssen diese Effekte in barrierefreien Seiten vermieden werden.

4.12.4 Direkt barrierefreie Skripte

Prüfpunkte des Abschnittes: 6.4., 6.3., 8.1. und 9.3.

Eine Ereignisbehandlung (event handler) ist eine Routine, die aufgerufen wird, wenn ein bestimmtes Ereignis ausgelöst wird.

Einige Ereignisbehandlungen erzeugen pure Effekte, wie Farbänderungen und Bildwechsel. Andere Ereignisbehandlungen sind substantieller, wie z. B. die Berechnung von Daten, die Prüfung von Formulardaten oder das Senden von Daten. Für solche wichtigeren Ereignisse sollten Web-Designer zur Sicherung der Barrierefreiheit folgendes beachten:

  1. Nutzen Sie Ereignisse auf Anwendungsebene statt auf Nutzeraktions-Ebene. Im HTML 4.0 sind Anwendungsereignisse "onfocus", "onblur" (das Gegenteil von "onfocus") und "onselect" definiert. Diese Ereignisse sind geräteunabhängig, werden aber in derzeitigen Browsern als Tastaturereignisse realisiert.
  2. Wenn Sie geräteabhängig Ereignisse behandeln müssen, sehen Sie zusätzliche Behandlungsmöglichkeiten vor, wie z. B. Achtung: es gibt kein Tastaturäquivalent für einen Doppelklick.
  3. Schreiben Sie keine Behandlungsroutinen, die sich auf Mauskoordinaten verlassen, sie sind extrem geräteabhängig.

4.12.5. Alternativen zu Skripten

Prüfpunkte des Abschnittes: 1.1., und 6.2.

Ein Weg, Alternativen zu Skripten zu erstellen ist die Nutzung des NOSCRIPT-Elements. Der Inhalt des Elementes wird angezeigt, wenn keine Skripte verarbeitet werden können.

Beispiel:

<SCRIPT Type="text/tcl">
...ein Tcl-Script zur Anzeige der Fußballergebnisse...
</SCRIPT>
<NOSCRIPT> 
  <P>Resultate von den gestrigen Spielen:</P>
  <DL>
    <DT>München - FC Halle: 1:5.
    <DD>
      <A href="munchhalle.html">
        Spielhöhepunkte München gegen Halle 
      </A> 
      ...weitere Ergebnisse...
  </DL>
</NOSCRIPT>

Ende Beispiel.

4.12.6. Seitenupdate und neue Fenster

Prüfpunkte des Abschnittes: 7.4., 7.5. und 10.1.

Solange die gängigen Browser es nicht ermöglichen, daß automatische Update von Seiten, das Weiterleiten oder das Öffnen neuer Fenster zu unterbinden, müssen diese Techniken auch bei Skripten vermieden werden, um barrierefreie Seiten zu erstellen.


Auf der nächsten Seite finden sich Hinweise zu CSS-Techniken zur Gestaltung barrierefreier Web-Seiten.

Letzte Änderung: 18.10.2002