header img

Web Content Accessibility Guidelines

Bedienbarkeit der Webseite

Klare, übersichtliche, seöbsterklärende und eindeutige Navigation in allen üblichen Browsern mit klarer Anzeige über den momentanen Standort bzgl. den Unterseiten der Webseite

aktueller Menüpunkt

➽ Der aktuell angewählte Menüpunkt sollte hervorgehoben werden. Ihre Nutzer sollten jederzeit sehen können, ob ein Link gerade aktiv ist oder nicht. Dies erreichen Sie am einfachsten in dem Sie dem aktiven Menüpunkt der Seite eine Klasse zuweisen.

Testlink aktiv

Testlink aktiv

<li class="activeli"><a href="#" title="test">Testlink aktiv</a></li>

Obriges Beispiel wurde wie folgt mit CSS real cisiert

.activeli{background:#ccc;}

Die Hauptnavigation

Wofür ist ine Navigation da? Klar, zum Navigieren – aber das ist nicht die ganze Wahrheit. Die Navigation einer Website hat folgende Funktionen: Abgesehen davon soll die Navigation Vertrauen schaffen: Weiß der Betreiber einer Website, wovon er spricht? Sind alle Themen enthalten, die man hier erwarten könnte? Macht er es mir einfach, sie zu finden? Oft müssen Sie eine Abwägung zwischen Konventionen und kreativem Ausdruck treffen. Ungewohnt positionierte Navigationen können einer Gestaltung zwar das gewisse Etwas geben, allerdings auch zu großer Verwirrung bei dem Nutzer führen.

Auf die Navigation muss Verlass sein. Dazu gehört nicht nur, dass die Links auch funktionieren, sondern besonders, dass sich die Hauptnavigation auf jeder Seite an derselben Stelle befindet. Schließlich darf die Navigation nicht verwirren: Stellen Sie sicher, dass die Begriffe für Ihre Zielgruppe verständlich sind.

Zustände bei Verweisen

➽ Sie können und sollten außerdem klar hervorheben, ob ein Link gerade mit der Maus überfahren wird oder ausgewählt ist.

Testlink Hover und Focus

<a href="#" title="test hover">Testlink hover und Focus</a>

Obriges beispiel wurde wie folgt mit CSS realisiert

a{
display:block;
text-align:center;
color:#a01f8e;
}
a:hover,a:focus{color:#f00}

Focus ist besonders für die Tastaturnutzer und Smartphones wichtig da dort kein hover möglich ist.
Um nicht interaktive Elemente mit einen Focus zu versehen muss am Element selbst das Attribut tabindex gesetzt werden.

Struktur der Navigation /Website

Prinzipiell steht es Ihnen frei, beliebig viele Strukturebenen einzusetzen. Empfehlenswert sind jedoch möglichst flache Hierarchien . Zum einen helfen sie bei der Suchmaschinenoptimierung, weil Suchmaschinen nur ungern in tief verschachtelte Ebenen eintauchen. Zum anderen erleichtern sie Ihren Benutzern, zu den Inhalten zu navigieren – und sich zu merken, wo sie einen Inhalt gefunden haben. Eine gute Faustregel ist, im Idealfall nicht mehr als drei Gliederungsebenen zu verwenden. Eine etwas grobe Richtlinie: Je leichter ein Klick fällt, desto mehr Navigationsebenen sind in Ordnung. Sie merken, dass die verschiedenen Usability-Faktoren miteinander verbunden sind: Wenn die Begriffe auf der zweiten Navigationsebene so kompliziert sind, dass Nutzer lange darüber nachdenken müssen, werden sie wohl kaum viele weitere Ebenen durchklicken. Umgekehrt können einfache Begriffe dabei helfen, viele Navigationsebenen abzumildern.

Tipps für die Startseite

➽ 5 Fragen, die Sie bei aller Kompromissbereitschaft niemals vernachlässigen dürfen:

  • Worum geht es hier?
  • Was kann ich hier machen?
  • Was bietet die Webseite an?
  • Warum soll ich hier sein - und nicht irgendwo anders?
  • Wo fange ich an?
Eine gute Startseite bietet Antworten auf alle diese Fragen. Im Idealfall gibt bereits die Gestaltung Antwort auf die ersten beiden Fragen.

Seitenstruktur

In der Praxis hat sich herausgestellt, dass nicht jede Einzelseite einer Website die gleiche Funktion ausübt. Die Folge: An unterschiedliche Seitentypen werden verschiedene Anforderungen gesetzt, die sich auf Usability und Gestaltung auswirken. Als sinnvoll hat sich die folgende grobe Einteilung herausgestellt:
Startseite:
Die Entwicklung der Startseite dürfte die anspruchsvollste Aufgabe jeder Website sein. Hier soll die Zielgruppe angesprochen und überzeugt werden, auf die Unterseiten zu navigieren. Die Startseite soll daher die Hierarchie der Website aufzeigen und zugleich Lust auf die Inhalte machen.
Kategorienseite:
Kategorienseiten sind die eigentlichen Rubriken einer Website. Das können die Kategorien eines Blogs sein, die Produkttypen eines Onlineshops oder die Themen einer Nachrichtenseite.
Detailseite:
Detailseiten oder Artikelseiten enthalten die eigentlichen Inhalte einer Website. Das kann ein Artikel oder ein Produkt sein
Am schwierigsten zu gestalten ist die Startseite. Da sie die meiste Aufmerksamkeit erhält, sind Kompromisse meist unvermeidlich – schließlich möchte jedes Thema hier gerne möglichst prominent präsentiert werden.

Usabillity in Formularen

➽ verschiedene Zustände von Formularbereichen sorgen für eine bessere Benutzbarkeit und Orientierung in Formularen.

<label for="Name">Name</label>
<input id="Name" name="name">

Benutzen Sie die dynamischen Pseudoklassen :hover und :focus zum Visualisieren der Zustände.

label:hover + input,
input:hover,
input:focus{
border:1px solid #444;}
input:focus{
box-shadow:inset 1px 1px 2px #777;
border:1px solid #777;
}

Die Zustände sollten ebenso für eine Textarea verwendet werden. Select Slemente lassen sich nur begrenzt formatieren. Für Sendebuttons kann zusätzlich die Pseudoklasse :active verwendet werden.

Verständlichkeit von Formularen

Warum? Nutzer geben nur ungern Ihre Daten Preis. Fragen Sie in Formularen nur die Informationen ab die Sie wirklich bei einer Kontaktaufnahme benötigen. Umfangreiche Formulare, z.B. Bestellprozess eines Onlineshops, gestalten Sie am besten mehrteilig Bsp.: Schritt 1, Schritt 2 usw. . Wenn Sie besonders sensible Daten vom Nutzer benötigen, erklären Sie dem Benutzer warum und wofür Sie diese Daten benötigen. Bauen Sie Formulare dem natürlichen Lesenfluss entsprechend auf, damit ist es Screenreadern möglich diese in korrekter Reihenfolge wiederzugeben. Tastaturbenutzer haben somit auch eine natürliche Tabulatorenreihenfolge. Visualisieren Sie dem Benutzer wo im Formular er sich genau befindet, wenn er Eingabe-felder berührt, was er auswwählen, an- bzw. abwählen kann. Validieren Sie Formularfelder so das der Nutzer nicht alle Daten neu eingeben muss wenn er falsche Eingaben oder auswahlen durchgeführt hat. Weisen Sie den Nutzer optisch und aussagekräftig auf seine Fehler hin.