Verständlich

Wenn der Inhalt einer Seite Wörter oder Ausdrücke enthält, die in einer anderen Sprache als die Primärsprache verfasst sind, sollte das lang-Attribut auf einem um den entsprechenden Begriff gewickelten Element (z.B. ein <span>, wenn kein semantisches Element verfügbar ist) verwendet werden, um eine geeignete Sprache festzulegen.

Sie müssen keine andere Sprache für Wörter oder Ausdrücke festlegen, die unabhängig von der Sprache gleich sind (z.B. Eigennamen, technische Begriffe, die nicht zu einer bestimmten Sprache gehören).

Wenn Abkürzungen verwendet werden, sollten Sie eine Erweiterung oder erforderlichenfalls eine Definition bereitstellen.

Das <abbr>-Element wird oft als bevorzugte Methode angesehen, um eine Erweiterung für eine Abkürzung bereitzustellen — es nimmt ein title-Attribut auf, das die Erweiterung enthält, und dies erscheint, wenn die Abkürzung mit der Maus überfahren wird. Der Titelinhalt ist jedoch nicht über die Tastatur zugänglich und wird auch nicht zuverlässig von Bildschirmlesern vorgelesen. Eine bessere Methode, damit umzugehen, besteht darin, wieder auf Glossarseiten zu verlinken, die die Abkürzungserweiterung und Erklärung enthalten, oder zumindest diese im umgebenden Text im Kontext einzuschließen.

Wenn Text bereitgestellt wird, der ein höheres Leseverständnis als das Niveau der Sekundarstufe erfordert (normalerweise Kinder im Alter von 11-14 Jahren), sollten ergänzende Erläuterungen bereitgestellt werden, um Personen zu helfen, die ihn nicht lesen können, oder eine alternative Version angeboten werden, die auf dem Niveau der Sekundarstufe verfasst ist.

Das bedeutet nicht, dass alle Themen von jedem verstanden werden sollten, sondern dass der Schreibstil für jeden zugänglich sein sollte. Es ist besser, alle Inhalte auf Sekundarstufenniveau zu verfassen, selbst technische Dokumentationen wie Programmieranleitungen, es sei denn, es gibt einen guten Grund dagegen (z.B. ein alternativer Stil für poetische Effekte) oder sie müssen in einem strikten Stil verfasst werden (z.B. W3C-Spezifikationen).

Ein Mechanismus sollte bereitgestellt werden, der Benutzern den Zugang zur Aussprache von Wörtern ermöglicht, wo es erforderlich ist, um den Inhalt vollständig zu verstehen.

Mit dem HTML-<audio>-Element kann ein Steuerelement erstellt werden, das dem Leser ermöglicht, eine Audiodatei abzuspielen, die die korrekte Aussprache enthält. Es macht auch Sinn, einen textuellen Ausspracheführer nach schwierigen Wörtern einzufügen, ähnlich wie in Wörterbucheinträgen.

Wenn ein Steuerelement oder ein anderes Seitenelement den Fokus erhält, sollte es den Kontext nicht in einer Weise ändern, die den Benutzer verwirren oder desorientieren könnte.

Dies ist eine Frage des umsichtigen Designs — Menschen wollen keine Benutzeroberflächen, die sie überraschen; sie wollen, dass die Dinge intuitiv und erwartungsgemäß funktionieren. Beispielsweise sollte das Fokussieren einer Navigationsmenüoption die angezeigte Seite nicht ändern — sie sollte aktiviert werden, bevor sich die Anzeige ändert.

Wenn Daten in ein Steuerelement eingegeben werden oder eine Einstellung geändert wird, sollte der Kontext nicht unerwartet geändert werden. Der Benutzer sollte gewarnt/beraten werden, bevor die Änderung erfolgt.

Wiederum sollte ein umsichtiges Design implementiert werden. Beispielsweise sollte der Benutzer gewarnt werden oder die Möglichkeit haben, eine Aktion zu bestätigen oder seine Arbeit zu speichern, bevor eine Taste gedrückt wird, die dazu führt, dass die Anwendung die aktuelle Ansicht verlässt.

Der Stil und die Platzierung des Navigationsmenüs/der Steuerungen sollten zwischen verschiedenen Seiten oder Ansichten einer Webseite konsistent sein, und die vorhandenen Elemente sollten in derselben Reihenfolge erscheinen, selbst wenn z.B. neue Elemente hinzugefügt werden. Wenn der Benutzer eine Änderung vorgenommen hat, z.B. ein anderes Farbschema oder eine andere Position für die Navigation ausgewählt hat, sollte seine Wahl auf allen Seiten respektiert werden.

Wiederum umsichtiges Design — machen Sie die Navigationselemente auf allen Seiten oder Ansichten gleich.

Steuerelemente oder Komponenten mit derselben Funktionalität sollten auf verschiedenen Seiten oder Ansichten auf dieselbe Weise identifiziert werden. Ein Währungsumrechner, der beispielsweise auf jeder Seite einer Weltreise-Website erscheint, sollte semantisch und hinsichtlich der Bezeichnungen identisch sein.

Wiederum umsichtiges Design!

Änderungen im Kontext, die Benutzer möglicherweise verwirren oder desorientieren könnten, sollten nur auf Nutzeranfrage erfolgen oder Benutzer sollten in der Lage sein, sie zu deaktivieren.

Wenn Sie etwas benötigen, das die aktuelle Ansicht erheblich verändert (z.B. Inhalt oder Steuerelemente), lassen Sie den Benutzer steuern, wann diese Änderung erfolgen soll (z.B. welche Seite angezeigt werden soll, wann zum nächsten Foto in der Galerie gewechselt werden soll...).

Wenn Sie etwas wie ein Karussell auf einer Seite benötigen, bieten Sie eine Option an, um das automatische Fortschreiten zu stoppen. Besser ist es, solche Funktionalitäten möglichst zu vermeiden.

Webseiten, die Hilfemechanismen enthalten, einschließlich Selbsthilfeoptionen und Kontaktdetails, die auf mehreren Webseiten wiederholt werden, müssen diese Mechanismen in derselben Reihenfolge auf allen Seiten platzieren, es sei denn, eine Änderung wurde vom Benutzer initiiert.

Lesen Sie die dokumentierte konsistente Hilfe für diese Norm, um mehr zu erfahren.

Wenn ein Benutzer ein Formular ausfüllt oder zwischen Optionen wählt, sollte ein entdeckter Fehler dem Benutzer klar gemeldet werden, zusammen mit dem Formularelement, auf das sich der Fehler bezieht.

Es ist ratsam, eine clientseitige Fehlererkennung und -behandlung zu implementieren, entweder über HTML-Formularvalidierungsfunktionen und/oder JavaScript, je nachdem, was für Ihre Situation am besten geeignet ist. Wenn ein Fehler erkannt wird, sollte neben dem Formulareingabefeld, das den Fehler verursacht, eine intuitive Fehlermeldung angezeigt werden, um dem Benutzer zu helfen, seine Eingaben zu korrigieren. Für Bildschirmleser-Benutzer können Sie ARIA-Live-Regionen verwenden, um den Benutzer auf eine Änderung auf der Seite aufmerksam zu machen.

Klare Anweisungen sollten bereitgestellt werden, wenn eine Dateneingabe erforderlich ist. Wenn eine kurze Anweisung oder Eingabeaufforderung erforderlich ist, können Sie <label>-Elemente für einzelne Eingaben wie Name oder Alter verwenden, eine Kombination aus <label>s und <fieldset>s/<legend>s für mehrere Eingaben, die zusammengehören (wie die Elemente eines Geburtsdatums oder einer Postadresse).

Wenn eine komplexere Erklärung erforderlich ist, können Sie immer erklärende Absätze einfügen oder vielleicht müssen Sie versuchen, Ihre Formulare intuitiver zu gestalten.

• Verwendung bedeutungsvoller Textlabels
• Wie man ein HTML-Formular strukturiert
• Textlabels und Namen

Wenn ein Fehler erkannt wird und Korrekturvorschläge bekannt sind, stellen Sie diese dem Benutzer bereit (z.B. Alternativen vorschlagen, wenn der Benutzer einen Benutzernamen auswählt, der bereits vergeben ist), es sei denn, dies würde ein Sicherheitsproblem oder Kontextproblem verursachen (z.B. beim Eingeben eines Passworts).

In solchen Fällen wird, wo dies angemessen ist, wahrscheinlich eine Kombination aus JavaScript und serverseitigen Funktionen verwendet, um zu prüfen, ob der Eintrag korrekt ist, und wenn nicht, welche brauchbaren Vorschläge dem Benutzer gemacht werden können. Solche Vorschläge sollten nützlich im Kontext angezeigt werden, genau wie Fehlermeldungen (siehe 3.3.1).

Bei Formularen, die die Eingabe sensibler Daten erfordern (wie rechtliche Vereinbarungen, E-Commerce-Transaktionen oder persönliche Daten), sollte mindestens eines der folgenden zutreffen:

• Einsendungen sind umkehrbar.
• Daten werden auf Fehler überprüft und dem Benutzer wird Gelegenheit gegeben, sie zu korrigieren.
• Ein Mechanismus steht zur Verfügung, um Informationen vor der endgültigen Einsendung zu bestätigen und zu korrigieren.

Umkehrbar — für jede Ansicht, in der Daten eingegeben werden können, bieten Sie eine äquivalente Ansicht, die es ermöglicht, einen Eintrag zu bearbeiten oder sogar zu löschen, je nach Bedarf (z.B. siehe Django-Web-Framework).

Datenüberprüfung — wie in 3.3.1 behandelt, sollte eine Kombination aus clientseitiger und serverseitiger Validierung verwendet werden, um Fehler zu erkennen und hilfreiche Meldungen anzuzeigen, die es dem Benutzer ermöglichen, seine Eingaben zu korrigieren.

Bestätigen und korrigieren — wo dies angemessen ist, sollte der Benutzer nach dem Ausfüllen einer Reihe von Formularfeldern zur Erledigung einer Aufgabe (z.B. Kauf eines Produkts) eine Bestätigungsseite erhalten, auf der er seine Eingaben überprüfen und korrigieren kann, was nicht richtig aussieht. Dieses Muster wird häufig auf E-Commerce-Seiten wie Amazon verwendet.