Frontpage und Barrierefreiheit

• Einleitung .
• Grundsätzliches .
• Alternativtexte .
• Frames .
• Hyperlinks .
• Tabellen .

Einleitung

Dieser Beitrag wurde von Kerstin Hedrich für www.barrierefreies-webdesign.de verfasst.

Ein wesentlicher Nutzen des WWW ist die vollkommene Unabhängigkeit des Mediums - sowohl was Ort und Zeit angeht, als auch die Zugangssoftware. Dabei spielt Behinderung auch eine wichtige Rolle.

Der uneingeschränkte Zugang zu einer Seite ist möglich, wenn bestimmte programmiertechnische "Barrieren" aufgehoben werden. Diese Barrieren werden oft übersehen. Im Folgenden werden einige häufig eingesetzte Elemente in der WWW-Gestaltung aufgeführt, und die Behebung der typischen Barrieren in Microsoft FrontPage beschrieben.

Wenn die Anforderungen für Barrierefreiheit mit den Einstellungsmöglichkeiten von FrontPage abgeglichen werden, wird einem schnell klar, dass mit dem FrontPage-Editor nur einige der Anforderungen erfüllt werden können. Viele Techniken müssen in den Quelltext "per Hand" umgesetzt werden.

Grundsätzliches

Es gibt zwei Möglichkeiten, Barrieren in FrontPage zu beheben: Entweder wird die Seite erstellt und anschließend auf die Barrierefreiheit geprüft und ggf. Korrekturen vorgenommen oder die Barrieren werden während der Seitenerstellung in FrontPage behoben.

Die erste Methode sollte bei bereits erstellten Seiten angewandt werden, aber für neue Seiten ist die zweite Möglichkeit die zeitsparende Variante.

Alternativtexte

Grafiken

• Die Grafik mit der rechten Maustaste anklicken.
• Den Menüpunkt Bildeigenschaften auswählen.
• Geben Sie im Register Allgemein im Bereich Alternative Darstellungsweisen eine zur Grafik gleichwertige Aussage bei Text ein.
• Klicken Sie OK.

Image-Maps

• Zunächst geben Sie der gesamtem Image-Map einen Alternativtext, wie in "Grafiken" beschrieben), wobei klargestellt werden muss, dass es sich um eine Image-Map handelt. Der Alternativtext könnte beginnen mit "Image-Map: ..." und dann sollte der Zweck der Image-Map angegeben werden.
• Klicken Sie einmal auf die Image-Map. Am unteren Bildschirmrand müsste eine Werkzeug-Leiste erscheinen mit Image-Map-Optionen.
• Wählen Sie die geometrische Form aus und zeichnen Sie in der Grafik die Fläche für die aktiven Bereiche (Hotspots) ein. Danach erscheint ein Fenster, in dem Sie die Zieladresse des aktiven Bereichs eingeben können.
• Klicken Sie auf den Register HTML am unteren linken Fensterrand, um die Alternativtexte für die einzelnen aktiven Bereiche anzugeben. Sie werden etwas sehen wie:

  <area alt="..." href="http://www.xyz.de/..." shape="default" coords="0,0,100,100">

  wobei area das Element für den jeweiligen aktiven Bereich ist. alt der Alternativtext ist, href die Zieldatei des aktiven Bereichs, shape die geometrische Form des aktiven Bereichs angibt und coords die Koordinaten der geometrischen Form angibt.

• Sie müssen nun das alt-Attribut eintippen, da FrontPage dies nicht selbständig tut. Zwischen den Anführungsstrichen sollten Sie einen sinnvollen, dem Text oder der Funktion des aktiven Bereichs entsprechenden Alternativtext eingeben.

Frames

name-Attribut

• Klicken Sie mit der rechten Maustaste im jeweiligen Frame und wählen Sie Frameeigenschaften.
• Im Eingabefeld Name geben Sie einen sinnvollen Namen, der auf die Inhalte schliessen lässt (z.B. "Navigationsleiste").

title-Attribut

Zukünftig soll anstatt des name-Attributs das title-Attribut für Frame-Benennungen verwendet werden. Für eine Übergangszeit sollten beide verwendet werden, um den Bedürfnissen der unterschiedlichen Zugangssoftware zu berücksichtigen.

• Gehen Sie zum Register HTML des Framesets.
• Im Quelltext müssen Sie für jedes Frame das title-Attribut eingeben, so dass Sie ein Ergebnis erhalten wie:

Hyperlinks

• Markieren Sie den Text, den Sie als Link formatieren möchten.
• Klicken Sie auf die Markierung und wählen Sie Hyperlink.
• Klicken Sie neben dem Auswahlfenster Zielframe auf das Symbol. Es erscheint ein neues Fenster. Bei Übliche Ziele sollte Standard dieser Seite (Ohne) ausgewählt sein.

Wenn sie ein anderes Ziel auswählen wollen, vermeiden Sie Neues Fenster, weil dadurch ein neues Browser-Fenster für den Link geöffnet wird. Wenn Sie eigene Zielfenster eingeben, vermeiden Sie es, dass andere als das aktuelle Fenster angesprochen werden.

Tabellen

Allgemeine Tipps

• Geben Sie Breitenangaben in Prozent (relative Angabe) anstatt mit Pixel (absolute Angabe) an, damit Tabellen sich an das Browser-Fenster des Benutzers anpassen können.
• Vermeiden Sie Tabellen zum Zwecke des Layouts. Stattdessen verwenden Sie CSS-Angaben.

Um sicherzustellen, dass Ihre Tabelle auch von Screen-Readern gelesen werden können, lesen Sie Ihre Tabelle Zelle für Zelle, von links nach rechts durch. Wenn es keinen Sinn ergeben, dann stellt die Tabelle eine Barriere dar, da Screen-Reader-Nutzer Tabellen nur auf diese Weise lesen können.

title-Attribut

• Weisen Sie der Tabelle ein title-Attribut zu.
• Die Zuweisung kann nur im HTML-Quelltext erfolgen und könnte wie folgt aussehen:
  <table title="Informationen über ..." width="..." height="...">

Über das CSS-Design

Lesen Sie,  warum ich mich an die Standards halte und warum das Layout mit  Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der  Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.

Suchen Sie was auf barrierefreies- webdesign.de?

Geben Sie Ihr Stichwort ein:

Entspricht die Seite den W3C-Normen?

Die  Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.

Der schnelle Seitenzugriff

Verwenden Sie  Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.