[Dies ist eine Übersetzung des englischsprachigen Artikels „How to Make Accessible Web Content Using Dreamweaver„. Copyright © by www.Webaim.org]
Einleitung
Dreamweaver MX und MX 2004, welche von Adobe, ehemals Macromedia entwickelt wurden, gehören zu den populärsten und leistungsfähigsten Web-Entwicklungs-Anwendungen die heutzutage verfügbar sind. Sie sind aus den folgenden Gründen so beliebt:
- Die WYSIWYG (What you see is what you get = Was Sie sehen, ist was sie bekommen) Schnittstelle erlaubt es ihnen, eine Website, zu erstellen, ohne auf den Code zu sehen. Wenn Sie ein Anfänger im Webdesign sind, kann dies besonders einladend sein.
- Der HTML-Code aus der WYSIWYG-Oberfläche ist in den meisten Fällen sauberer und stärker kompatibel mit W3C HTML und XHTML Spezifikationen als der Code, der mit anderen Tools erzeugt wird. Standardkonforme Codes sind in der Regel zugänglicher und stärker kompatibel mit neuen und unterstützenden Technologien.
- Sie können Änderungen manuell oder in der ansicht durchführen, ohne sich darüber Sorgen machen zu müssen, dass Dreamweaver den Code wieder ändert. Diese Funktion hebt Dreamweaver deutlich von anderen Web-Entwicklungs-Anwendungen hervor.
- Dreamweaver integriert sich reibungslos in alle anderen Macromedia-Tools, vor allem in Flash.
Barrierefreiheits-Features von Dreamweaver
Viele der in diesem Artikel erwähnten Features sind in den neusten Versionen von Dreamweaver (MX und MX-2004) enthalten. Wenn Sie mit Dreamweaver 4 oder Vorgängerversionen arbeiten, werden viele der unten genannten Funktionen nicht verfügbar oder unvollständig sein. Sehen Sie sich Barrierefreiheits-Techniken für die Versionen 3 und 4 weiter unten an, wenn Sie zusätzliche Techniken erlernen möchten, Funktionen von älteren Versionen von Dreamweaver für die Verbesserung der Barrierefreiheit einzurichten.
Neue Aufforderungen zur Barrierefreiheit (wenn aktiviert)
Dreamweaver ermöglicht es, Entwickler beim Einfügen bestimmter Web-Elemente aufzufordern, Attribute für die Verbesserung der Barrierefreiheit anzugeben. Leider sind diese Optionen in den Einstellungen standardmäßig deaktiviert.
Standardmäßig sind die Optionen zur Verbesserung der Barrierefreiheit in Dreamweaver MX deaktiviert. Um diese Funktionen in Dreamweaver MX 2004 zu aktivieren, wählen Sie und kontrollieren Sie dann die Kästchen für , , und
Einmal ausgewählt, wird Dreamweaver eine Eingabeaufforderung für Barrierefreiheits-Features anzeigen, wenn identifizierte Elemente in ein Dokument eingefügt werden.
Auswertung der Barrierefreiheit
Dreamweaver kann Standards der Barrierefreiheit validieren und Feedback bezüglich der Barrierefreiheit von Webinhalten geben. Die Berichte können durch die Auswahl .
Referenzen zur Barrierefreiheit
Unter den anderen in Dreamweaver enthaltenen Referenzmaterialien, gibt es eine . Die Referenzmaterialien wurden von UsableNet zur Verfügung gestellt. Leider sind diese Referenzen technischer Natur und nicht sehr hilfreich, sofern Sie nicht bereits mit HTML und Techniken der Barrierefreiheit vertraut sind.
Barrierefreie Schnittstellen für Autoren
Die meisten Dialogfelder, Menüs und andere Elemente der Benutzeroberfläche sind barrierefrei zugänglich für Bildschirmlesegeräte.
Barrierefreie Inhalte erstellen
Damit Aufforderungen zur Verbesserung der Barrierefreiheit in Dreamweaver angezeigt werden:
- Die Einstellung Barrierefreiheit muss aktiviert sein
- Sie müssen in der ansicht der Schnittstelle sein. Wenn Sie in der ansicht oder in dem Codefenster sind und Elemente einfügen, werden die Aufforderungen für die Barrierefreiheit nicht angezeigt.
Alternativtext für Bilder
Sofern die Optionen für die Barrierefreiheit in den Einstellungen aktiviert sind, fordert Dreamweaver den Benutzer auf, Alternativtexte für Bilder einzugeben, sobald dieser ein Bild in ein Dokument einfügt.
Geben Sie entsprechende und gleichwertige Alternativtexte in bereich ein. Wenn das Bild ein komplexes Bild ist, geben Sie eine URL ein oder benutzen Sie eine Webseite für eine längere Beschreibung (longdesc-Attribut des img-Tags). Wenn nichts für die ausgewählt ist, wird das longdesc-Attribut nicht zum Bild hinzugefügt. Alternativ, wenn das Bild keinen Inhalt übermittelt und keine wichtige Funktion auf der Seite bietet, kann ausgewählt werden, damit der leer mit alt text (alt="") mitgeliefert wird.
Nachdem das Bild in das Dokument eingefügt wurde, kann der Alternativtext über das -Panel hinzugefügt oder verändert werden.
Wie bei der Aufforderung für die Barrierefreiheit können Sie aus dem Dropdown-Menü auswählen, um einen leeren Alternativtext hinzuzufügen.
Longdesc kann nicht über das -Panel hinzugefügt werden. Um longdesc zu einem Bild hinzuzufügen, kann man entweder das Bild nochmal einfügen und dabei das Feld in den Optionen der Barrierefreiheit ausfüllen, oder das longdesc-Attribut über die ansicht zum Bild hinzuzufügen.
Dreamweaver bietet auch eine Option für alt-Texte für Hotspots von Image-maps von Clienten an. //?
Formular-Labels
Dadurch, dass die Optionen für die Barrierefreiheit aktiviert sind, wird Dreamweaver Sie auffordern, eine angemessene Kennzeichnung der Informationen anzugeben, wenn Elemente auf die Website hinzugefügt werden.
Geben Sie einfach das entsprechende Formularlabel in das -Dialogfeld ein.Sie können zwischen den verschiedenen Stilen für das Label auswählen: . Die besten Ergebnisse werden mit erzielt. Es ermöglicht, dass das Formularlabel an eine andere Position innerhalb der Seite verschoben werden kann und es ist am stärksten kompatibel mit den aktuellen Bildschirmlesegeräten. Sie können auch auswählen, ob das Formularlabel vor oder nach dem Formularelement positioniert sein soll. Der bietet auch die Option einer und eines , welche beide nicht für die Barrierefreiheit benötigt werden und welche beide häufig missbraucht werden.
Um Labels zu Formularelementen, die bereits auf einer Website sind, hinzuzufügen, können drei Methoden benutzt werden:
- Löschen Sie zuerst das Formularelement und fügen Sie es dann mitsamt einem entsprechenden Label über das Dialogfeld erneut ein.
- Fügen Sie die entsprechende Label-Information über die ansicht ein.
- Wählen Sie sowohl das Label wie auch das Formularelement aus und wählen Sie . Wenn diese Methode benutzt wird, umschließt Dreamweaver das Label und das Formularelement mit den Label-Tags, was die Möglichkeit einschränkt, das Label zu bewegen und es wird darüber hinaus nicht komplett in allen Bildschirmlesegeräten unterstützt.
Dreamweaver bietet das -Dialogfeld fälschlicherweise an, wenn Sie Buttons und Bildeingabeelemente in die Website einfügen. Keine dieser Formularelemente sollte Labels besitzen. Ein Bildschirmlesegerät liest den Wert des Attributes des Buttons und das alt-Attribut des Bildeingabeelementes aus, die beide mit dem -Panel zur Verfügung gestellt werden.
Barrierefreie Datentabellen
Es gibt für die Herstellung von barrierefreien Datentabellen, die für die Nutzer von Bildschirmlesegeräten zugänglich sind, drei Prinzipien:
- Legen Sie Tabellenüberschriften fest
- Bestimmen Sie einen
Bereichfür Zeilen oder Spalten von Headern - Für komplexe Tabellen, legen Sie
headerundid-Attribute für Header und Datentabellenzellen fest.
Die visuelle Benutzeroberfläche von Dreamweaver unterstützt Option 1 (bennante Header), unterstützt teilweise Option 2 (festgelegter Umfang) und unterstützt nicht Option 3.
Dreamweaver unterstützt die Benennung von Headern auf zwei Arten: Erstens, wenn die Tabelle bereits vorhanden ist, können Sie Header identifizieren, indem Sie eine Zelle, Zeile oder Spalte auswählen und dann die -Option im -Panel wählen.
Zweitens, wenn die Optionen für Barrierefreiheit in den , aktiviert sind, wird ein Dialogfeld angezeigt, wenn die Tabelle eingefügt wird. Sie können dann wählen, ob die Tabelle keine Kopfzeile (), Zeilenüberschriften (), Spaltenüberschriften (), oder Zeilen und Spaltenüberschriften () haben soll.
Dreamweaver bezeichnet richtige Zellen als Tabellenüberschriften mit dem <th>-Tag.
Wenn die Tabelle, die Sie einfügen, keine Datentabelle ist, wählen Sie keine Optionen der Barrierefreiheit. Nur Datentabellen benötigen diese zusätzlichen Optionen.
Wenn Sie das Dialogfeld der für die Barrierefreiheit benutzen um Header auszuwählen, wird Dreamweaver ein angemessenes Attribut für den Umfang zu diesem Header hinzufügen (z.B., scope=col oder scope=row).
Wenn Sie angeben, dass ihre Tabelle sowohl Zeilen- als auch Spaltenüberschriften besitzt, indem Sie Both bei , wird Dreamweaver die obere linke Zelle als Spalten-Header bezeichnen. In einigen Fällen kann diese Zelle schon ein Zeilen-Header oder gar kein Header sein. Achten Sie darauf, das Umfangs-Attribut für diese Zelle in der ansicht zu verändern oder zu löschen um ein angemessenes Layout für die Datentabelle zu erlangen.
Der einzige Weg, um das Umfangsattribut in bestehende Tabellen in das Dokument einzufügen, ist die manuelle Eingabe über die ansicht. Für komplexe Tabellen mit Kopfzeilen, Zeilen oder Spalten und für jene, für die der Umfang nicht ausreicht, müssen Sie Header und id-Attribute über die ansicht in die Tabelle einfügen. Das visuelle Interface unterstützt das Hinzufügen von Header und id nicht.
Die Dialogbox für die Barrierefreiheit der ermöglicht das Hinzufügen von einer und einer , die beide zusätzliche Informationen über den Inhalt der Tabelle angeben. In den meisten Fällen sollten beide angegeben sein.
Frame-Titel
Wenn die Optionen für die Barrierefreiheit innerhalb der Einstellungen gesetzt sind, wird Dreamweaver Sie auffordern, Titel für Frames einzugeben, wenn ein neues Frameset-Dokument erstellt wird.
Die Titeloptionen sollten eine kurze Beschreibung der Frame-Inhalte oder der Funktionalität sein. Diese Informationen werden von einem Bildschirmlesegerät gelesen, um den Rahmen zu identifizieren. Die werden nur angezeigt, wenn Sie ein neues Frameset-Dokument () erstellen und wird nicht angezeigt, wenn Sie ein bestehendes Dokument deiner Frame-Seite modifizieren ().
Sie können auch noframes-Inhalte für das Frameset-Dokument ändern, indem Sie .
Techniken für die Barrierefreiheit der Versionen 3 und 4
Wenn Sie eine Version von Dreamweaver MX benutzen, die älter ist, haben Sie wahrscheinlich bemerkt, dass viele der Features für Barrierefreiheit, die bereits erwähnt wurden, nicht verfügbar oder unvollständig sind. Wenn Sie Dreamweaver regelmäßig verwenden, sollten Sie ein Upgrade auf eine neuere Version durchführen. Dennoch gibt es einige Dinge, die Sie tun können, um ältere Versionen von Dreamweaver barrierefreier zu machen.
Ändern Sie die Standardvorlage zu einer, die gültig ist
Die vorgegebene leere Seite, die Dreamweaver liefert, ist nicht unzugänglich per se, aber sie ist unvollständig was das gültige HTML anbelangt. Um die vorgegebene leere Seite zu aktualisieren, müssen Sie Dreamweaver verlassen und dann den Ordner auf ihrem PC öffnen, in dem Dreamweaver sich befindet. Innerhalb dieses Ordners befindet sich ein weiterer Ordner namens Konfiguration, der den Ordner Vorlagen enthalten sollte. Der Pfad zu diesem Order sollte ähnlich sein wie C:\Program Files\Macromedia\Dreamweaver 4\Configuration\Templates, es könnte aber auf ihrem PC auch anders benannt sein. Innerhalb des Ordners Vorlagen ist ein Dokument namens Default. Öffnen Sie dieses Dokument in einem Texteditor wie Notepad, Wordpad, Text Edit, oder etwas ähnlichem. Dann ändern Sie den HTML-Code innerhalb der Datei, damit dieser so ähnlich aussieht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"></html>
Dies ist nicht die einzige gültige Vorlage. Die obere Vorlage ist für Dokumente, die für eine HTML 4.0 Übergangssyntax gültig sind. Eine Vorlage für ein XHTML 1.0 Übergangsdokument würde so aussehen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Installieren Sie eine barrierefreie Validator Erweiterung
Es gibt zwei Erweiterungen für die Barrierefreiheit für Dreamweaver zur Auswahl. Macromedia hat eins selbst erstellt und UsableNet hat das andere gemacht. Insgesamt ist die Version von UsableNet besser und kundengerechter. Keines von beiden ist perfekt. Die Dreamweaver-Erweiterungen unterhalb können Seiten evaluieren, die auf ihrer Festplatte sind.
Die “Section 508 Accessibility Suite Erweiterung“
Die Programmierer von UsableNet.com haben eine zusätzliche Erweiterung für die Barrierefreiheit zusammengestellt, welche sie “508 Accessibility Suite Erweiterung“ nannten. Diese Erweiterung schafft einen völlig neuen Menüpunkt namens . Diese Erweiterung ist anpassbarer und hat mehr Funktionen als die Erweiterung von Macromedia. Sie können jeweils eine einzelne oder eine gesamte Webseite gleichzeitig überprüfen. Es sollte erwähnt werden, dass die Überprüfung der gesamten Website sehr viel Zeit in Anspruch nehmen kann. Zusätzlich ist die große Menge an Feedback über alle Seiten sehr unüberschaubar. Wenn die Erweiterung auf nur einer einzigen Seite verwendet wird, kann diese jedoch ein nützliches Werkzeug und ein Ansatz für die Barrierefreiheit sein.
Wie bei allen automatisierten Validatoren für die Barrierefreiheit, müssen Sie zusätzlich noch eine manuelle Prüfung durchführen oder aber das Feedback ist deutlich weniger nützlich.