Web Content Accessibility Guidelines
Verständlichkeit von Inhalten
Lesbarkeit und Verständlichkeit von Textinhalten sowie Vorhersehbarkeit der Website Funktionalität.
Falsche Formatierung
➽ Na haben Sie den Link schon gefunden?
<span style="color:#1755C3;font-family:alegreya-sc; text-decoration:underline; cursor:pointer;">Na haben Sie den Link schon gefunden?</span>
Sie merken schon auf den bisherigen Seiten waren die Links innerhalb der Texte blau. In diesem Fall gibt es jedoch keinen Link. Verwirrend!
Verständliche Farben und Funktionen für Interaktive Elemente
Warum? Der Nutzer versucht schnell ein Schema für normalen Text, hervorgehobenen (wichtigeren) Text und Inhalten mit denen er interagieren kann zu erkennen Sorgen Sie für ein kontinuierliches Farbschema bei Verweisen und Formularen. Der Nutzer findet sich so schneller zurecht und ist eher bereit auch einem Link zu folgen. Nutzer erwarten wenn sich der Mouse-Cursor zur Hand ändert, dass sich dann auch ein Link dahinter befindet. Setzen SIe die CSS-Eigenschaft cursor:pointer; nur dann ein wenn Sie Elemente mit Javascript anklickbar funktionstüchtig gestaltet haben.Datentabellen in Backends
➽ In Backends von Webseiten sind Tabellen beliebig einsetzbar. Bei Onlineshops sollte jedoch darauf geachtet werden das gerade im Warenkorbbereicheine saubere Struktur vorliegt damit Screenreader diesen korrekt ausgeben. Unter Umständen kann an dieser Stelle auch eine Liste geeigneter sein. Wenn Sie Tabellen einsetzen verwenden Sie die semantischen Gliederungselemente einer Tabelle
<thead>
<tbody>
<tfoot>
Datentabellen im Frontend einer Webseite
Warum? Tabellen sollten nicht für Layoutzwecke verwendet werden und tabellarische Daten sollten richtig mit Tabellen ausgezeichnet werden, die verfügbare Elemente und Attribute zur Erhöhung der Zugänglichkeit benutzen. Sie sollten den Gebrauch oder Missbrauch von Tabellen zu kontrollieren. Die Web Developer Erweiterung wird jetzt erneut nützlich. Benutzen Sie Outline - Outline Table Cells und Outline - Outline Tables, um alle Tabellen hervorzuheben. Falls die betrachtete Seite keine Tabellen beinhaltet, sollten Sie nichts sehen. Falls Teile der Seite, die keine tabellarischen Daten enthält, hervorgehoben wird, werden Tabellen für das Layout benutzt Falls die Seite tatsächlich tabellarische Daten enthält, prüfen Sie, ob es als Tabelle ausgezeichnet ist und korrektes und zugängliches Markup verwendet. Verwenden Sie Tabellen nur wenn eine tabellarische Darstellung zum Verständniss des Inhalts notwendig ist!Label verknüpfen
➽ Das Label Element muss mit dem zugehörigen Eingabefeld/Auswahlfeld verknüpft werden.
<label for="eingabe">text eingeben</label>
<input id="eingabe" title="geben Sie irgend etwas ein">
Bei einigen Formularelementen wie LABEL und INPUT kann das Title-Attribut zum besseren Benutzbarkeit beitragen.
Bedienelemente und Kennzeichnung von Formularen
Warum? Richtige Labels helfen jedem, da sie den anwählbare Bereich vergrößern. Jedes sichtbare Formularfeld sollte deutlich mit einem Lebelelement verknüpft sein. Tastaturbenutzer haben große Probleme, wenn Formulare automatisch versandt werden, wenn eine Option in einer Select-Box ausgewählt wird. JavaScript vorauszusetzen, macht es dem Nutzer unmöglich, das Formular ohne JavaScript abzuschicken. Wenn Sie sich auf JavaScript verlassen, kann es zu unvorhersehbaren Werten im Formular und in der Datenbank kommen. Automatisierte Zugänglichkeitswerkzeuge informieren Sie normalerweise, wenn Formularfelder kein Label besitzen. Sie können außerdem die Web Developer Erweiterung benutzen: Forms - View Form Information. Stellen Sie fest, ob alle sichtbaren Felder eine zugehöriges Label besitzenHTML5 Semantic
➽ Sinnstiftende Mechanismenen z.B.: Suchmaschienen und Screenreader sind in der Lage Inhalte strukturiert zu indexieren bzw. wiederzugeben wenn semantisch gut strukturiertes Markup vorliegt.