Überschriften barrierefrei

HTML - Basiscode

<h2>HTML-Basisocde</h2>

Beispiel 1: Kurzer Text

Überschriften machen einen Text übersichtlich. Sie sollen ihn verständlich strukturieren. Überschriften können aber gerade auf Webseiten auch durch semantische und textuelle Präzision eine der wichtigsten Aufgaben des Internets unterstützen: Das zu finden, was man sucht.

Welche Überschrift würde passen?

Überschriften machen einen Text übersichtlich. Sie sollen ihn verständlich strukturieren. Überschriften können aber gerade auf Webseiten auch durch semantische und textuelle Präzision eine der wichtigsten Aufgaben des Internets unterstützen: Das zu finden, was man sucht.

  1. Der Absatz braucht keine Überschrift.
  2. Alles nicht so einfach!
  3. Die Bedeutung von Überschriften
  4. Überschriften

Best Practise Überschrift

HTML - Code

<h2
  id="xyz"
>
  XYZ
</h2>

Aufgabenverteilung für Best Practise Überschriften

Bilder barrierefrei

HTML - Basiscode

<img src="images/logo.gif" />

Beispiel 1: Einfaches Foto

Übungsbild Goldenes Dachl

Die Altstadt von Innsbruck befindet sich in unmittelbarer Nähe der Tagung. Nützen Sie die Seminarpausen für einen Besuch der mittelalterlichen Gässchen!

Welcher Alternativtext ist angemessen?

Übungsbild Goldenes Dachl

Die Altstadt von Innsbruck befindet sich in unmittelbarer Nähe der Tagung. Nützen Sie die Seminarpausen für einen Besuch der mittelalterlichen Gässchen!

  1. Das Goldene Dachl, das Wahrzeichen der Stadt Innsbruck
  2. Das Bild ist rein dekorativ, der Alternativtext kann daher leer bleiben. (alt=" ")
  3. Überdachter Balkon mit Reliefverzierungen und Blumenschmuck unter den daneben liegenden Fenstern
  4. Goldenes Dachl

Beispiel 2:
Einfaches Foto mit Untertitel

Übungsbild Goldenes Dachl Goldenes Dachl

Die Altstadt von Innsbruck befindet sich in unmittelbarer Nähe der Tagung. Nützen Sie die Seminarpausen für einen Besuch der mittelalterlichen Gässchen!

Welcher Alternativtext ist angemessen?

Übungsbild Goldenes Dachl Goldenes Dachl

Die Altstadt von Innsbruck befindet sich in unmittelbarer Nähe der Tagung. Nützen Sie die Seminarpausen für einen Besuch der mittelalterlichen Gässchen!

  1. Es braucht in diesem Fall gar kein ALT-Attribut.
  2. Goldenes Dachl
  3. Der Alternativtext kann leer bleiben. (alt=" ")
  4. Foto

Beispiel 3:
Grafiklink ohne Untertitel

Tourismusregionen in Tirol

Welcher Alternativtext ist angemessen?

Tourismusregionen in Tirol

  1. Mehr Infos
  2. http://www.innsbruck.info
  3. Goldenes Dachl
  4. Innsbruck Tourismus

Beispiel 4:
Grafiklink mit Untertitel

Tourismusregionen in Tirol

Welcher Alternativtext ist angemessen?

Tourismusregionen in Tirol

  1. Innsbruck Tourismus
  2. Innsbruck
  3. Die Funktion des Links ist sichtbar, also kann der Alternativtext leer bleiben (alt=" ")
  4. Innsbruck und zusätzlich sollte der sichtbare Text für den Screenreader verborgen werden.

Best Practise Bilder

HTML - Code

<p
  class="img_mit_untertitel">
  <img
    src="[Bildpfad]"
    alt="[Allfälliger Alternativtext]
    title="[Allfälliger Titel, meist 
      gleich dem Alternativtext]
  />
  [SICHTBAR.                                   ]
  [Bildbeschreibung / Textäquivalent]
</p>

Links barrierefrei

HTML - Basiscode

<a href="http://www.iktforum.at">
IKT-Forum
</a>

Technische Varianten mit gleichem Aussehen

  1. Blinden- und Sehbehindertenverband Tirol
  2. ExternBlinden- und Sehbehindertenverband Tirol
  3. Blinden- und Sehbehindertenverband Tirol
  4. Blinden- und Sehbehindertenverband Tirol
  1. Link Blinden- und ...
  2. Link Grafik Extern Blinden- und ...
  3. Link Extern Blinden- und ...
  4. Link Extern Blinden- und ...

Best Practise Code für Hintergrundgrafik

<a href="http://www.bsvt.at"
   class="extern"
   title="Externes Link">

  <span class="hidden">
    extern
  </span>

  Blinden- und Sehbehindertenverband Tirol

</a>

Danke für
das Durchhalten!

Wolfgang Berndorfer AE BFWD

office@zweiterblick.at

www.zweiterblick.at