Erstellung barrierefreier Inhalte mit Dreamweaver

[ Dies ist eine Übersetzung des englischsprachigen Artikels „Creating Accessible Web Content in Dreamweaver„. Copyright © by www.Webaim.org ]

Einführung

Dreamweaver von Adobe ist ein beliebtes und bekanntes Werkzeug zur Erstellung von Online-Inhalten. Es wird häufig als WYSIWYG-Editor eingesetzt – das bedeutet, dass es ermöglicht, Webseiten zu erstellen, ohne zu viel Zeit im Code zu verbringen. Dieses Tutorial beschreibt anschaulich, wie man mit Dreamweaver zugänglichen Web-Content erstellen kann.

Hinweis

Sofern nicht anders angegeben, beziehen sich sämtliche Anweisungen und Angaben auf Dreamweaver CC 2014 oder neuer.

Alternativtext für Bilder

Jedes Bildelement sollte einen entsprechenden Alternativtext haben, welcher den Inhalt oder die Funktion des Bildes auch Benutzern von Screenreadern erläutert. Um einem Bild einen Alternativtext zu geben wählen Sie einfach das Bild aus und geben den Alternativtext in das Alt-Feld ein, welches sich im Eigenschaften-Feld am Ende der Seite befindet.

screenshot <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">

Sollte das Eigenschaften-Feld für Sie nicht sichtbar sein, so können Sie es unter Fenster – Eigenschaften aktivieren.

Wichtig

Wenn Sie ein Bild in Dreamweaver einfügen, ist ihm standardmäßig kein Alternativtext zugeordnet (alt=““). Wenn das Bild nur dekorativer Natur ist oder der zugehörige Alternativtext in einem Textstück in der unmittelbaren Nähe zur Verfügung gestellt wird, können Sie dieses Feld auch leer lassen. Andernfalls fügen Sie auf diese Weise einen Alternativtext hinzu.

Bilder in älteren Versionen von Dreamweaver

In älteren Versionen (CS6 und früher) erkundigt sich Dreamweaver selbst nach dem Alternativtext wenn ein Bild eingefügt wird, indem ein entsprechender Dialog mit Feldern für den Alternativtext und eine lange Beschreibung erscheint.

Screenshot <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">

Tippen Sie in dieses Feld den passenden Alternativtext. Wenn das Bild selbst keinen Inhalt vermittelt und nichts mit der Seitenfunktionalität zu tun hat, wählen Sie Leer im Menü für den Alternativtext.

Screenshot showing empty alternative text being selected <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">

Der Dialog enthält darüber hinaus die Option, eine lange Beschreibung für komplexere Bilder hinzuzufügen (longdesc-Attribut des img-Tags). Wir empfehlen nicht, das longdesc-Attribut zu benutzen – es wird nicht gut unterstützt und wurde in HTML5 entfernt. Sollten Sie es jedoch trotzdem benutzen wollen, fügen Sie in das Feld stattdessen eine URL ein. Bedenken Sie, dass das Bild trotzdem einen beschreibenden Alternativtext benötigt. Wenn keine lange Beschreibung ausgewählt worden ist, wird das longdesc-Attribut auch nicht zu dem Bild hinzugefügt.

Form Labels

Die meisten Formularelemente (Textboxen, Textfelder, Kontrollkästchen, Radiobuttons, etc.) brauchen auch ein beschreibendes Label. Wenn mit Dreamweaver eine Formularsteuerung zur Seite hinzugefügt wird, wird das auch ein Label-Element mit generischem Text erstellen. Ändern Sie diesen so ab, dass er einzigartig und beschreibend ist.

Hinweis

Wenn die Steuerung während der Arbeit im Code eingefügt wird, wird nur sie selbst erscheinen und nicht das Label.

Wenn die Formularsteuerung bereits eine Textbeschreibung hat, welche auch ihr Label sein soll, wählen Sie den entsprechenden Labeltext aus und navigieren zu Einfügen – Formular – Label. Wechseln Sie danach zum Eigenschaften-Feld für das Label und klicken sie auf „Für Dropdown-Menü“. Dann wählen Sie den Wert, der der ID der Formularsteuerung entspricht, die Sie benennen wollen.

screenshot of the expanded menu <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">
Wichtig

Das Label-Element kann nicht benutzt werden, um mehrere Labels für eine einzelne Formularsteuerung bereitzustellen, oder um ein einzelnes Label mit mehreren Formularsteuerungen zu assoziieren. Wenn Ihre Formularsteuerung mehr als ein Label hat (und umgekehrt), lesen Sie unseren Artikel über fortgeschrittene Formular-Label.

Wenn der Labeltext direkt an die Formularsteuerung grenzt, wählen Sie sowohl den Text als auch die Formularsteuerung aus und fügen dann dazu das Label ein. Dreamweaver wird den Text und das Formular selbstständig in einen Label-Tag hüllen. Fügen Sie eingehüllten Labels keine Attribute hinzu.

Formularlabels in älteren Versionen von Dreamweaver

Wenn Sie Formularsteuerungen in älteren Versionen von Dreamweaver hinzufügen, wird ein eigener Dialog Sie zur Eingabe eines Formularlabels auffordern:

screenshot of form label dialog box <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">

Bei Bedarf kann ein ID-Wert in das erste Feld eingetragen werden (wird es frei gelassen, so wird ihm eine generische ID zugeordnet werden). Bedenken Sie, dass dieser Wert ein Wort (ohne Leerzeichen) und auf der Seite einzigartig sein muss. Tippen Sie als nächstes das passende Formularlabel in den Label-Dialog. Danach können Sie das Label Style auswählen. Wir empfehlen, den Standardwert des Label-Anfügen-Tags so zu belassen. Dieser Dialog stellt außerdem die Option zur Verfügung, den Zugangsschlüssel und den Tab-Index zu spezifizieren. Diese werden für gewöhnlich zweckentfremdet und sollten frei gelassen werden.

Wichtig

Ältere Versionen von Dreamweaver stellen die Label-Dialogbox inkorrekterweise auch zur Verfügung, wenn Sie Ihrer Website Schalter- und Bildeingabe-Elemente hinzufügen. Keines dieser Formelemente sollte gelabelt werden. Ein Screenreader wird das Wertattribut des Schalterelements und das Alt-Attribut des Bildeingabe-Elements vorlesen, wobei beide auch mithilfe des Eigenschaften-Felds hinzugefügt werden können.

Feldgruppen

Die Fieldset- und Legend-Elemente stellen einen Mechanismus zur Verfügung, der das hinzufügen eines Labels mit einem höheren Level zu einer Gruppe von Formularsteuerungen ermöglicht. Das Fieldset identifiziert die gesamte Gruppe und Legend identifiziert deren beschreibenden Text. Diese Funktion wird oft für Gruppen von Radiobuttons und Kontrollkästchen benutzt. Um Fieldset und Legend in Dreamweaver hinzuzufügen, markieren Sie die Gruppe von Elementen und wählen Sie Einfügen – Formulare – Feldgruppe. Der gewählte Inhalt wird in ein Fieldset gehüllt werden und ein Dialog wird erscheinen, der die Eingabe der Legende ermöglicht.

Screenshot <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">

Datentabellen

Wenn man Datentabellen für Benutzer von Screenreadern erreichbar machen will, sind drei Prinzipien zu beachten:

  1. Weisen Sie Tabellenköpfe zu.
  2. Ordnen Sie den Reihen und / oder Spaltenüberschriften einen Umfang zu.
  3. Ist dieser passend, dann geben Sie der Tabelle eine Überschrift.

Beim Einfügen einer Tabelle wird Ihnen eine Dialogbox gezeigt. Wählen Sie unter Kopfzeilenoptionen, ob die Tabelle keine Kopfzeile (Keine), Reihenüberschriften (Links), Spaltenüberschriften (Oben), oder Reihen- UND Spaltenüberschriften hat (Beide).

Screenshot of the table dialog. There are options to change the table size, select the header structure, add a caption, and add a summary <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">

Dreamweaver wird Tabellenköpfe mit dem korrekten Umfang zuweisen (z.B., <th scope="col">).

Der Dialog hat auch Felder für eine Tabellenüberschrift, welche in der Regel einen Titel oder eine Beschreibung der Tabelle darstellt. Zwar brauchen nicht alle Datentabellen Überschriften, jedoch sind diese oft hilfreich. Eine Tabellenzusammenfassung sollte typischerweise frei gelassen werden – das Zusammenfassungs-Attribut wird nicht gut unterstützt und ist nicht Teil der HTML5-Spezifikation.

Hinweis
  • Wenn die Tabelle für Layoutzwecke genutzt wird, wählen Sie Keine unter den Kopfzeilenoptionen und fügen Sie keine Überschrift hinzu.
  • Wenn Sie wollen, dass Ihre Tabelle sowohl Reihen- als auch Spaltenüberschriften hat, indem Sie unter Überschriften Beide auswählen, wird Dreamweaver die oberste Zelle der linken Reihe zu einer Tabellenüberschrift machen. Wenn diese Zelle eine Reihenüberschrift oder überhaupt keine Überschrift ist, dann aktualisieren Sie sie, um der Struktur der Datentabelle zu entsprechen.

Die einzige Möglichkeit, zu bereits existierenden Tabellen das Umfang-Attribut hinzuzufügen, besteht im manuellen Editieren des Elements über die Code-Ansicht. Für komplexe Tabellen mit Überschriften, welche Reihen oder Spalten überspannen, und für die der Umfang nicht ausreichend ist, müssen Sie – ebenfalls manuell – Überschriften und ID-Attribute hinzufügen. Sofern möglich, vereinfachen Sie Ihre Tabellen, sodass Sie Überschriften und ID aus dem Weg gehen können.

Überschriften

Eine logische Struktur der Überschriften verbessert die Erreichbarkeit einer Webseite deutlich. Überschriften werden von Benutzern von Screenreadern oft zur Navigation und Orientierung benutzt. Um Überschriften zu einer Seite hinzuzufügen, wählen Sie Einfügen – Überschrift, und wählen Sie dann das gewünschte Überschriftenlevel. Um Text in eine Überschrift umzuwandeln, oder um zwischen verschiedenen Überschriftenleveln zu wechseln, markieren Sie den Text und das gewünschte Überschriftslevel vom Formatmenü im Eigenschaften-Feld.

Expanded Format dialog. The options are: None, Paragraph, Heading levels 1-6, and Preformatted. <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">

Seitentitel

Ein prägnanter, einzigartiger und beschreibender Seitentitel ist sehr wichtig für die Erreichbarkeit der Seite. Viele Benutzer, insbesondere die von Screenreadern, verlassen sich auf den Seitentitel, um deren Inhalte zu identifizieren und zu erfassen. Wenn Sie ein neues Dokument erstellen, erscheint ein Dialog. Schreiben Sie den Seitentitel in das Feld für den Titel.

Screenshot <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">

Wenn Sie keinen Titel hinzufügen oder eine ältere Version von Dreamweaver verwenden, wird der Seite der generische Titel „Unbenanntes Dokument“ zugewiesen. Sie können diesen Namen ändern, indem Sie die von Ihnen gewünschte Bezeichnung in das Feld für den Dokumententitel im Eigenschaftenfeld tippen.

Screenshot <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver">

Listen und betonter Text

Dreamweaver enthält Optionen, ungeordnete oder aufzählende Listen zu erstellen, oder auch geordnete oder nummerierte Listen. Sie können betonten Text auch näher spezifizieren. Diese Änderungen können über das Eigenschaftenfeld angewendet werden.
( Screenshot of the B, I, bulleted list, and numbered list icons <img src="images/" width="" height="" alt="Erstellung barrierefreier Inhalte mit Dreamweaver"> ).

HTML5 Unterteilungselemente

Dreamweaver unterstützt das Erschaffen der folgenden Unterteilungselemente in HTML5 (unter dem Menüpunkt Einfügen): Überschrift, Navigation, Haupt, Neben, Artikel, Sektion und Fußzeile. Genau so wie ARIA-Zeichen identifizieren diese Elemente Regionen der Seite, die dem Benutzer eines Screenreaders helfen können, sich auf der Seite zu orientieren und sie zu navigieren.