Gestaltungsvorgaben des Bayerischen Staatsministeriums für Umwelt und Verbraucherschutz
Layout- und Strukturvorgaben für Internet-Angebote im Geschäftsbereich

Aufbau einer Seite

Definition des Rahmenlayouts

Alle Internetauftritte im Geschäftsbereich des StMUV sind framelos und in einer festen Auflösung von 1024x768 darzustellen. Der Webauftritt wird im Browserfenster zentriert dargestellt.

Für alle Internetauftritte im Geschäftsbereich wird ein einheitliches Rahmenlayout gewählt. Es basiert auf einem zentral vorgegebenem "global style". Der global style definiert den Rahmen der künftigen Webauftritte. Er ist ausschließlich auf CSS-Basis erstellt.

Die Internetauftritte besitzen eine horizontale Hauptnavigation mit der Darstellung einer Unterebene. In einer Metanavigation werden Navigationselemente wie "Impressum, Kontakt und Sitemap" geführt.

Links

Als Ziel eines Links sowohl zu einem Angebot des eigenen Geschäftsbereichs, als auch zu Fremdangeboten ist das selbe Browserfenster zu wählen. Links zu externen Angeboten sind als solche zu kennzeichnen (z.B. mit dem Zusatz "externer Link").

Links im Fließtext sind aus Gründen der Usability prinzipiell zu vermeiden. Weiterführende Links sind entweder in der rechten Spalte aufzuführen oder im Content-Bereich der jeweiligen Seiten gesammelt darzustellen.

Die Mouseover-Effekte von Links sind im global style vordefiniert. Farben können im lokal style ergänzt werden.

Downloads

Ein Downloadlink ist gesondert zu kennzeichnen, damit man ihn von einem normalen Link unterscheiden kann. Auch die Downloadgröße muß angegeben sein, damit der Benutzer entscheiden kann, ob er die Wartezeit für das gewünschte Dokument in Kauf nehmen möchte. Ausserdem sollte ein Download mit einer aussagekräftigen Beschreibung versehen werden. Zu vermeiden sind alleinstehende Bezeichnungen wie: Download

PDF-Dateien ab drei Seiten sind mit Lesezeichen anzubieten.

Bilder

Bilder sind in einer weboptimierten Form (72 dpi) zu verwenden. Grundsätzlich sind alle Bilder mit einem Alternativtext zu versehen, da Screenreader Grafiken nicht verarbeiten können und diese ausserdem in Textbrowsern nicht dargestellt werden. Es ist darauf zu achten, dass diese Alternativtexte auch aussagekräftig sind. Wenn Grafiken wichtige Informationen enthalten und zu komplex sind, um sie mit einem Alternativtext zu erklären, sollten die Informationen zusätzlich als Text angeboten werden. Ebenso sollte für Grafik-Diagramme eine sinnvolle Alternative, z.B. eine Tabelle, angeboten werden.

Interaktive Formulare

Formulare sind ein wichtiger Bestandteil von Websites. Erst Formulare machen Bestellungen, Kontaktaufnahmen, Registrierungen, etc. möglich. Sie spielen daher eine wichtige Rolle und müssen bei der Barrierefreiheit besonders berücksichtigt werden.

Formulare sind mit der Tastatur relativ schwierig zu bedienen, da ausser der Tabulatortaste auch Pfeiltasten (Auswahllisten), Leertaste (Aktivierung Checkboxen und Radiobuttons) und die Eingabetaste (Absenden) zum Einsatz kommen. Problematisch ist, dass bei komplexen, mehrspaltigen Formularen die Tabulatorenreihenfolge nicht unbedingt der optischen Reihenfolge entspricht.

Die Tabulatorenreihenfolge richtet sich nach der Reihenfolge im Quelltext. Es ist grundsätzlich mit dem label-Element ein Bezug zwischen dem Formularfeld und dem dazugehörigen Text herzustellen. Die Schreibweise hierfür ist folgende:

<label for="Name">Name:</label> <input id="Name" type="text" value="Name eingeben" />

Für die Tabulatorenreihenfolge kann man zusätzliche Hilfen wie accesskey oder tabindex anbieten, wobei accesskey eine Tastenkombination zur Verfügung stellt, die zu dem jeweiligen Feld springt, und tabindex die Tabulatorenreihenfolge steuert.

Beispiel für acceskey: <label for="Name" accesskey="5">Name:</label> <input id="Name" type="text" value="Name eingeben" /> (Eingabe ALT+5)

Beispiel für tabindex:
<label for="Name" tabindex="1">Name:</label> <input id="Name" type="text" value="Name eingeben" />
<label for="Vorname" tabindex="2"> Vorname:</label> <input id=" Vorname " type="text" value=" Vorname eingeben" />

Tabindex hat den entscheidenden Nachteil, dass er als allererstes zu dem Formularfeld mit tabindex=“1“ springt und alles vorher, also auch die Navigation, überspringt. Der Einsatz von tabindex macht also nur Sinn, wenn alle Links in der Seite mit tabindex belegt sind. Am sinnvollsten ist daher ein linearer Aufbau des Formulars, auch wenn dieser nicht immer den gestalterischen Wünschen entspricht.

Da Menschen mit Behinderung möglicherweise Probleme mit Tastenkombinationen haben (z.B. das @-Zeichen bei der E-Mail-Adresse), sollten Formularfelder, in denen die Eingabe solcher Zeichen zu erwarten ist, vorbelegt sein:

<input id="mail" type="text" value="name@domain" />

Da alte Screenreader Formularfelder, die nicht vorbelegt waren, teilweise nicht erkannt haben, ist die Vorbelegung immer noch vorgeschrieben. Heutige Screenreader haben damit allerdings keine Probleme mehr. Jedes Attribut muß hierbei einen einen Wert haben. Dies kommt bei aktivierten Formularfeldern besonders häufig vor:

<option ... selected="selected"> statt <option... selected> <input ... checked=“checked“ /> statt <input ... checked />

Ein evtl. Hilfetext zu dem Formular sollte (im Quelltext) unbedingt vor dem Absendebutton erscheinen, da diese Stelle mit einem Screenreader nie erreicht wird, sofern das Formular abgeschickt wird.

Bei großen Formularen mit vielen Formularfeldern sollte darauf geachtet werden, dass diese logisch gruppiert werden, um dem Benutzer das Erkennen der Struktur zu erleichtern. Dies läßt sich mit dem fieldset-Element realisieren:

<fieldset>

      <legend>Adressangaben:</legend>
      <label...
     <input...

</fieldset>

<fieldset>

      <legend>Persönliche Angaben:</legend>
     <label...
<input...

</fieldset>