Anmeldung mit Ihrem RZ-Account

Menüs

Hinweise zur Gestaltung barrierefreier Webseiten

Notwendige Maßnahmen durch die Autoren der einzelnen Webpräsenzen

Es gibt notwendige Maßnahmen, die nicht automatisiert werden können, um den Forderungen der BITV zu genügen. Dazu gehören unter anderem folgende Punkte:

  • Alternativtexte für Grafiken und Bilder
    Die Grafiken müssen mit Alternativtexten versehen werden. Die Alternativtexte sollen Äquivalent des Bildes in Textform sein und dieselbe Funktion erfüllen  wie das Bild.
    Für das Hochladen von Bildern ist inzwischen die Angabe einer Beschreibung obligatorisch. Diese wird als Alternativtext-Bestandteil im HTML-Quelltext verwendet.

  • Barrierefreie PDF-Dateien generieren
    Die Erstellung von PDF-Dateien muss barrierefrei erfolgen. Wir haben Ihnen eine Anleitung zur Erstellung barrierefreier PDF-Dateien (mit Adobe Acrobat) zusammengestellt.

  • Valides HTML
    Die verwendete Sprache HTML muss fehlerfrei genutzt werden.
    • Sorgen Sie dafür, dass Ihre Seiten mittels Validator vom W3-Consortium erfolgreich geprüft werden können:  http://validator.w3.org Externer Link: http://validator.w3.org (http://validator.w3.org).
    • Falls eine Seite gemäß HTML-Validator nicht fehlerfrei sein sollte, reicht es in aller Regel, die entsprechende Seite in den Bearbeitungsmodus zu versetzen und neu zu speichern. Hintergrund: Der neue Editor korrigiert evtl. Fehler, die zu einer Verletzung der HTML-Syntax führen (meist hervorgerufen durch die Unzulänglichkeiten der alten Editoren).

  • HTML-Strukturelemente für Überschriften
    Überschriften müssen korrekt mit den HTML-Strukturelementen h1 (Überschrift1) bis h6 (Überschrift6) ausgezeichnet sein.
    • Verwenden Sie Überschriften-Elemente, um die Struktur eines Dokuments darzustellen. Wählen Sie sie aus der Menüleiste im Editor. Versichern Sie sich, dass die Überschrift den folgenden Textabschnitt treffend beschreibt.

  • HTML-Strukturelemente für Zitate
    Sie können Zitate von Fremdautoren durch einen eigenen, anders formatierten  Absatz hervorheben.
    • <blockquote> ist ein Blockelement und dient dazu einen längeren Text zu zitieren. Bei der Darstellung wird der Text mit eingerückten Rändern dargestellt.
    • Wenn Sie ein Zitat verwenden, müssen Sie im Quelltext  gemäß gezeigtem Beispiel vorgehen:

      Albert Einstein schrieb:<blockquote>Es besteht eine Möglichkeit ...  </blockquote>
      Hier geht der normale Text weiter ....

    • Hinweis: Wird dies jedoch als Stilmittel für das Layout verwendet ist die Verwendung nicht im Sinne des HTML-Standards und damit nicht BIT-V konform. Der Editor kann keine semantische Unterscheidung vornehmen. Verwenden Sie daher die Einrückung des Editors ausschließlich für Zitate.

  • Anderssprachige Wörter/ Abschnitte ausgezeichnet
    Dies ist ein Hinweis für den Fall, dass Sie Sprachauszeichnungen manuell kennzeichnen müssen, ansonsten können Sie sie in der  Webbox unter Administrationsmenü -> Weitere Funktionen verwalten.
    Bildschirmleseprogramme und andere Hilfstechnologien haben unterschiedliche Sprachbibliotheken für unterschiedliche Sprachen. Ein deutscher Satz, der mit englischer Aussprache gesprochen oder vorgelesen wird, könnte unverständlich werden. Benutzen Sie im Quelltext das lang Attribut (meistens in Verbindung mit dem <span> Element), um einen Wechsel in der Sprache des Dokuments zu verdeutlichen. Beispiel <span xml:lang="en">This is an english phrase...</span>.
    • Einzelne fremdsprachige Wörter müssen ausgezeichnet werden. Wenn Autoren von Inhalten die Änderungen der natürlichen Sprache in einem Dokument kennzeichnen, können Sprachgeneratoren und Blindenschrift-Geräte automatisch zur neuen Sprache wechseln, wodurch das Dokument zugänglicher für mehrsprachige Benutzer wird.
  • Priorität II - Abkürzungen sind erkennbar zu machen
    • Dies ist ein Hinweis für den Fall, dass Sie Abkürzungen manuell eintragen müssen, ansonsten können Sie sie in der Webbox unter Administrationsmenü -> Weitere Funktionen verwalten.
      Bitte benutzen Sie das <acronym>-Tag, um Akronyme oder das <abbr>-Tag, um Abkürzungen erkennbar zu machen. Es muss im Quelltext direkt eingefügt werden. Die Tags bezeichnen einen eingeschlossenen Text als Acronym bzw. Abkürzung.  Beide Tags werden  nur von den neueren Browsergeneration unterstützt und werden von den meisten älteren Browsern einfach ignoriert.
      Zum Beispiel: Stichwort Zugänglichkeit nach <acronym title='Barrierefreie Informationstechnologie-Verordnung'>BITV</acronym>

      Darstellung:

      Darstellung des
  • Tabellen mit Überschriften
    Sorgen Sie dafür, dass Überschriften in Tabellen entsprechend ausgezeichnet werden.
    • Bei Tabellen müssen Sie die Überschriften-Zellen (Überschriften-Zeilen oder -Spalten) auszeichnen.
    • Wie soll man solche Zellen auszeichnen?  Im WYSIWYG-Editor müssen Sie in der entsprechenden Zelle folgendes auswählen:
      Rechte Maustaste -> Tabelle -> Zelleneigenschaften -> Kopfzelle aktivieren
  • Zuordnung von Zellen in mehrstufigen Tabellen
    • Bei komplexen Tabellen können Bildschirmleseprogramme aus dem Tabellenaufbau allein nicht schließen, welche Bezüge es zwischen Daten- und Überschriftenzellen gibt. Deshalb müssen diese Verknüpfungen mithilfe der in HTML zur Verfügung stehenden Attribute (headers, id und scope)  ausdrücklich definiert werden. Auch wenn die Komplexität auf diese Weise technisch abgebildet werden kann, sind besonders für Benutzer von Bildschirmleseprogrammen komplexe Tabellen immer schwerer zu erfassen als einfache. In vielen Fällen können komplexe Tabellen durch (eventuell mehrere) einfache Tabellen ersetzt werden. Beispiele zur Verwendung dieser Attribute finden Sie unter:  http://de.selfhtml.org/html/tabellen/nicht_visuell.htm#referenzen Externer Link: http://de.selfhtml.org/html/tabellen/nicht_visuell.htm#referenzen (http://de.selfhtml.org/html/tabellen/nicht_visuell.htm#referenzen)

  • Verzicht auf veraltete Elemente und Attribute
    Verwenden Sie nur Elemente und Attribute, die aktueller Bestandteil der benutzten Auszeichnungssprache sind. Ältere Auszeichnungssprachen wie HTML 3.2, aber auch HTML 4.x  sind nicht mehr aktuell, da es mit XHTML bereits eine neuere Version gibt. Diese Bedingung gilt insbesondere für Sprachelemente älterer HTML-Versionen wie <font> und ähnliche Tags, die in HTML 4 als veraltet gekennzeichnet sind. Bei den Tests zu dieser Vorgabe werden Ihnen die Online-Werkzeuge wie der W3C-Validator helfen: Viele Hilfen zur Barrierefreiheit wurden erst mit der Version 4 in die Seitenbeschreibungssprache HTML eingeführt. Wenn der Validator (  http://validator.w3.org Externer Link: http://validator.w3.org (http://validator.w3.org/) ) bei der Überprüfung Ihrer Seiten zu dem Ergebnis kommt, dass es sich um HTML 3.2 (oder noch älter) handelt, dann bearbeiten Sie bitte die Seite nach.

    • Generell veraltete Attribute sind: alink, background, bgcolor, clear, compact, hspace, language, link, noshade, nowrap, prompt, start, text, version, vlink, vspace
    • Vermeiden Sie in HTML das veraltete <font>-Element; verwenden Sie stattdessen Stylesheets.
  •  Inhalte gegliedert
    Sorgen Sie dafür, dass die Inhalte Ihrer Seiten gegliedert sind. Sie müssen beachten, dass Absätze, Gruppen von Formularelementen und tabellarische Daten mit geeigneten Strukturelementen ausgezeichnet sind. Zum Beispiel:

    • Überprüfen Sie im Quelltext, ob Absätze mit <p> ausgezeichnet sind (nicht statt <p> doppelte Zeilenumbrüche <br> verwenden).
    • Überprüfen Sie, ob Gruppen von Formularelementen mit  <fieldset> strukturiert sind.  Eine zusammengehörige Gruppe von Formularelementen schließen Sie in die Tags <fieldset>...</fieldset> ein (fieldset = Feldgruppe). Dazwischen können Sie beliebige Teile Ihres Formulars definieren.
    • Überprüfen Sie, ob für tabellarische Daten <table> verwendet wird (nicht <div>-, <span>- oder <p>-Elemente).
    • Wenn Farbe benutzt wird, um wichtige Informationen auszuzeichnen, stellen Sie sicher, dass Sie dies auch durch entsprechende Quelltextauszeichnungen erreichen.  Zum Beispiel durch Benutzen des <strong>(fette Schrift) oder <em> (kursive Schrift) Elements.
  • Label mit Formularelementen verknüpft
    Für Formularelemente wie Eingabefelder oder Auswahllisten gibt es normalerweise keine logische Beschriftungsmöglichkeit. Mit Hilfe von Labels können Sie einen solchen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen. Den Beschriftungstext, den Sie einem solchen Formularelement zuordnen, notieren Sie als Inhalt zwischen <label> und </label>.

    • Wenn Sie ein Formularelement  verwenden, müssen Sie im Quelltext  gemäß gezeigtem Beispiel vorgehen:
      <form><table border="0">
      <tr>
      <td><label for="vname">Vorname</label></td>
      <td><label for="nname">Nachname</label></td>
      </tr>
      </table>
      </form>

      Darstellung:

      Beispiel_label

  • Aussagekräftige Linktexte
    Sorgen Sie dafür, dass Linktexte auch außerhalb Ihres Textzusammenhangs etwas über das Linkziel erläutern müssen.  Sie sollen kontextunabhängig aussagekräftig sein.
    • Falls Sie kurze Wörter wie mehr; hier; weitere Informationen als Links benutzen müssen, geben Sie unbedingt ein dazugehöriges Title-Atribut ein. Im Menü unter Einfügen wählen Sie Link einfügen aus. Im erscheinenden Fenster unter Erweitert geben Sie ein den Link beschreibendes Title-Atribut ein.

      Link einfügen mit title AtributBild vergrößert anzeigen... Link wird in einem neuen Fenster geöffnet
    • Ist die Anzeige der Grafik nicht möglich (z.B. Textbrowser) wird der Text, der als alt-Text eingegeben ist, bei dem Anwender als anklickbar dargestellt. Anstelle eines Verweistextes können Sie auch eine Grafik als Link verwenden.
      Zum Beispiel:
      <a href="universitaets_fakultaeten.html"><img src="symbol.jpg" width="80" height="34"  alt="Fakultäten an der Universität Hamburg"></a>
      (Erweiterte Information über HTML finden Sie unter:  http://de.selfhtml.org/ Externer Link: http://de.selfhtml.org/ (http://de.selfhtml.org/)
    • Sorgen Sie dafür, dass Sie keine Links auf Ihren Seiten verwenden, deren Ziel nicht (mehr) existiert.
    • Achten Sie außerdem auf konsistente Menüs (z.B. Nichtverwendung von Links, die nicht auf das angegebene Ziel gemäß Verweistext verweisen).
  • Priorität II- Soweit inhaltlich zusammenhängende Dokumente getrennt angeboten werden, sind Zusammenstellungen dieser Dokumente bereitzustellen
    Sorgen Sie dafür, dass bei einzeln bereitgestellten Dokumentteilen auch zusätzlich das gesamte Dokument angeboten wird.

  •  Einfache Wörter
    Verwenden Sie für den Inhalt einer Seite eine klare und einfache Sprache. Webangebote sollen auch für unerfahrene Nutzer keine Schwierigkeiten bereiten. Fremdwörter oder Fachwörter können zur Behinderung  für den Nutzer  werden. Durch ihre Verwendung können mögliche Nutzer ausgeschlossen werden.

  • Einfache Sätze
    Zur Verständlichkeit von Inhalten gehört, dass die Texte leicht lesbar und leicht verständlich angeboten werden müssen.
    • Sorgen Sie dafür, dass möglichst kurze Sätze und einfache Satzkonstruktionen benutzt werden.
    • Schreiben für das Web verlangt einen präzisen, kurzen Schreibstil. Kernaussagen müssen schnell ersichtlich und einfach formuliert sein. Eine klare Struktur hilft, den Überblick zu erhalten.
    • Schreiben Sie kurz und prägnant. Verzichten Sie auf lange Zeilen und lange Abschnitte.
    • Vermeiden Sie Fremdwörter und unverständliche Fachausdrücke. Wenn solche Wörter benutzt werden, sollen sie genau erklärt werden.
    • Die Verwendung einfacher Sätze ist für alle Nutzer vorteilhaft, insbesondere aber  für lernbehinderte Nutzer.
    • Vermeiden Sie Zweideutigkeiten.

Generelle Hinweise

  • Um formal einige Aspekte der BITV automatisch zu prüfen, gibt es eine Reihe von Online-Prüfprogrammen.
    • Eines davon stellt das Projekt  WAVE dar (http://www.webaim.org/ Externer Link: http://www.webaim.org/ (http://www.webaim.org/) Link wird in einem neuen Fenster geöffnet ) mit dem Web accessibility validator (http://dev.wave.webaim.org/index.jsp Externer Link: http://dev.wave.webaim.org/index.jsp (http://dev.wave.webaim.org/index.jsp) Link wird in einem neuen Fenster geöffnet ) dar, der eine Online-Überprüfung von Seiten ermöglicht. Überprüft werden die Vorgaben der WCAG 1.0.
      Bei der Überprüfung von WebBox-Seiten mittels WAVE 3.5 wird stets eine Warnung ausgegeben, die auf verwendetes JavaScript zurückzuführen ist. Die BITV ist bzgl. dieses Punktes jedoch erfüllt, da die Seiten für Nutzer auch ohne JavaScript zugänglich sind (ein Beispiel für die Notwendigkeit manueller Prüfung).

      Achtung-Symbol Achtung: eine solche Prüfung kann lediglich formale Fehler aufdecken und erlaubt keinesfalls den Umkehrschluss "Keine Fehler, also konform gemäß der Zugänglichkeitsrichtlinien für Web-Inhalte 1.0".
  • Bitte achten Sie beim Einfügen von Inhalten, die Sie zum Beispiel aus Word einfügen wollen, darauf, dass Sie im Editor unter Bearbeiten -> Einfügen und filtern auswählen. Ansonsten können Formatierungsprobleme auftreten.
  • Informationen über die Zugänglichkeit nach BITV und W3C WAI (WCAG)
Stand dieser Seite: 24.05.2012 - 16:37:42 | Impressum | Datenschutzerklärung | Druckdatum: 30.06.2016 - 07:03:45

Letzte Aktualisierung (Rechenzentrum): 08.06.2016 - 16:07:30 | WebBox 1.5.2.20160202 | rzcluster2-8 |