Einstieg in Barrierefreies Webdesign

Hier werden kurz die restlichen HTML-Elemente behandelt und wie man mit ihnen barrierefrei umgeht.

Listenelemente

Die Listenelemente sind ein wunderbares Mittel um Inhalte sinnvoll zu gliedern, wie es die BITV vorschreibt, gerade wenn man z. B. Fakten oder Erklärungen beschreiben möchte. Auch verwendet diese gerne als Basis für Navigationselemente, was unter Navigation genauer erläutert wird.

Es gibt 3 verschiedene Arten von Listen:

Ungeordnete Listen

Bei ungeordneten Listen werden die einzelnen Punkte der Liste aneinandergereiht mit einem Punkt markiert, wie diese Liste zum Beispiel

• Äpfel
• Birnen
• Zitronen

Hier der Code-Auszug:

<ul>
<li>Äpfel</li>
<li>Birnen</li>
<li>Zitronen</li>
</ul>

Man kann auch Listen verschachteln, indem man eine neue Liste in ein li-Element anlegt .

<ul>
<li>Obst
  <ul>
    <li>Äpfel</li>
    <li>Birnen</li>
  </ul>
  </li>
  <li>Gemüse
  <ul>
    <li>Paprika</li>
    <li>Kohl</li>
  </ul>
</li>
</ul>

Das Ergebnis sieht so aus:

• Obst
  • Äpfel
  • Birnen
• Gemüse
  • Paprika
  • Kohl

Auf das Aussehen der Punkte kann mittels CSS Einfluss genommen werden, was unter dem CSS-Kapitel beschrieben wird oder mit dem type-Attribut in dem ul-Element.

• type="square"
  • type="disc"

Geordnete Listen

Geordnete Listen haben an der Stelle eines Punktes einen Zähler. Ansonsten funktionieren sie genauso wie ungeordnete Listen. Mit dem type-Attribut kann man festlegen, ob der Zähler aus ganzen Zahlen, römischen Zahlen oder Buchstaben bestehen soll.

1. Einleitung
2. Hauptteil
   1. Definitionen
   2. Hypothesen
   3. ...
3. Ende

<ol>
  <li>Einleitung</li>
  <li>Hauptteil
     <ol type="i">
       <li>Definitionen</li>
       <li>Hypothesen</li>
       <li>...</li>
     </ol>
  </li>
  <li>Ende </li>
</ol>

Auch lassen sich geordnete und ungeordnete Listen sich untereinander kombinieren.

Definitionslisten

Diese Listen eigenen sich hervorragend für kurze Beitrittserklärungen z. B. für ein Glossar, aber sie lassen sich auf vielfältige Weise einsetzen wie das folgende Beispiel zeigt:

Pizza Salami

Hefeteigboden belegt mit Tomatenmark, Käse und Salamischeiben

Pizza Funghi

Hefeteigboden belegt mit Tomatenmark, Käse und Champignons

Als Quelltext:

<dl>
  <dt>Pizza Salami</dt>
  <dd>Hefeteigboden belegt mit Tomatenmark, Käse und Salamischeiben</dd>
  <dt>Pizza Funghi</dt>
  <dd>Hefeteigboden belegt mit Tomatenmark, Käse und Champignons</dd>
</dl>

Auch Links lassen sich in die Definitionsisten gliedern um diesen Links eine zusätzliche Erläuterung zu geben, wenn diese zum Beispiel zu anderen Seiten führen.

Multimediaobjekte

Objekte wie Javaapplets, Musik, Filme und Flash™ werden mit einem object-Element eingebunden oder es werden auch Elemente wie applet oder embed verwendet, da nicht alle Browser für alle Objekte das object-Element interpretieren können. Hier ein Beispiel mit einem Flashdokument:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="74" height="40">
  <param name="movie" value="/images/pork.swf"><param name="quality" value="high">
  <embed src="/images/pork.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="74" height="40">
  </embed>
</object>

Bei der Verwendung dieses Multimedia gibt es keine Voraussetzungen, aber man sollte bei allen eingebundenen Medienelementen Alternativlinks zum Herrunterladen angeboten werden. Denn ältere Browser oder Textbrowser können diese Elemente nicht anzeigen und müssen diese jeweils runterladen. Hier ist ein sehr gutes Beispiel, wie Alternativlinks angeboten werden können. Alternativlinks haben auch den Vorteil, dass der Anwender sich einmal das Multimediaelement sich herrunterladen kann und es sich so oft anschauen kann wie er oder sie es will. Das ist vor allem bei niedrigen Bandbreiten sehr sinnvoll.

Falls möglich sollten auch bei Audioelementen Textalternativen für Screenreader bereitgestellt werden.

Logische Kennzeichnung und Betonung

HTML kennt auch viele Elemente für eine logische Kennzeichnung von Texten. Unter anderem werden sie dafür genutzt um bestimmte Textabschnitte zu betonen oder hervorzuheben. Diese Elemente kennen alle Browser und können sie sinnvoll interpretieren. Mit CSS können später diese Elemente sinnvoll nach eigenem Ermessen gestaltet werden.

em-Element

Mit diesem Element legt man Textbereiche fest die betont werden sollen. Standardmäßig werden sie von den meisten Browsern kursiv dargestellt.

strong-Element

Dieses Element sorgt für eine sehr starke Betonung, weswegen sie auch standardmäßig fett dargestellt wird

q-, und blockquote-Element

Angewendet werden diese bei Zitaten aus anderen Texten oder Personen. Das q-Element ist ein Inline-, während blockquote ein Blockelement ist, wie der Name schon sagt. Diese Elemente haben ein cite-Attribut mit der man die Quelle wie bei einem Hyperlink angeben kann. Leider wird dieses Attribut nur von wenigen Browsern sinnvoll unterstützt

cite-Element

Im Gegensatz zum cite-Attribut, legt man mit diesem Element eine Quellangabe ein. Das kann ein Autor, Buch, usw. sein. Dieses Element ist auch sichtbar in allen Browsern.

code, und samp-Element

Mit diesen Elementen kann man man Quell- oder Beispieltexte markieren.

kdb-Element

Durch dieses Element werden Benutzereingaben markiert, z. B. Der Benutzer gibt dann den Befehl: mkdir ein.

dfn-Element

Dieses hebt Definitionen hervor.