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.
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.
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.
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 Formelemente (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.
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:
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.
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).
Dreamweaver wird Tabellenköpfe mit dem korrekten Umfang zuweisen.
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.
Titel der Seite
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.
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.
Links
Beim Einfügen eines Hyperlinks erscheint ein Dialog mit verschiedenen Optionen.
Fügen Sie dem Textfeld einen beschreibenden Text für den Link hinzu. Dieser Text sollte das Ziel oder die Funktion des Links klar und eindeutig beschreiben. Vermeiden Sie zweideutige oder unseriös wirkende Formulierungen wie “click here”. Der Zugangsschlüssel, Tab-Index und die Titelfelder sollten fast immer frei gelassen werden.
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.
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.
