Häufige Probleme mit der Barrierefreiheit im Internet

Ich wurde einmal gebeten, eine kurze Liste gängiger Barrierefreiheitsprobleme zu erstellen. Hier ist, was ich mir ausgedacht habe!

Farbkontrast

Testen Sie den Farbkontrast, um sicherzustellen, dass der Text lesbar ist. Verwenden Sie zum Testen ein Tool wie diesen Farbkontrastrechner . Testen Sie auch im Modus "Hoher Kontrast" .

Anker vs. Knopf Vs. Spannweite vs. Abt

Es ist wichtig zu wissen, wann das entsprechende Element für eine Seitenaktion verwendet wird. Im Folgenden finden Sie eine grundlegende Übersicht darüber, wann Sie ein Ereignis verwenden / an welches Element anhängen:

  • Verwenden Sie einen anchor , wenn Sie auf eine andere Seite verlinken oder zu einem Inhaltsbereich auf derselben Seite springen
  • Verwenden Sie eine button wenn eine dynamische Seiteninteraktion stattfinden soll (Akkordeon, ein modales Fenster öffnen usw.) oder wenn Sie ein Formular absenden. Verwenden Sie die richtige Fokusverwaltung, wenn dynamische Aktionen auf der Seite ausgelöst werden.
  • Verwenden Sie eine span , um Inline-Inhalte aufzunehmen. Fügen Sie diesem Element kein Ereignis hinzu, da es keine semantische Bedeutung hat und nicht fokussierbar ist.
  • Verwenden Sie ein div , um Inhalt auf Blockebene zu enthalten. Fügen Sie diesem Element kein Ereignis hinzu, da es keine semantische Bedeutung hat und nicht fokussierbar ist.

Mehr lesen: http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/

Alt-Text

Stellen Sie sicher, dass gegebenenfalls alt -Text angewendet wird. Dinge wie Bilder und Bildlinks müssen einen beschreibenden alt -Text haben.

Mehr lesen: http://webaim.org/techniques/alttext/

Formularetiketten

Stellen Sie sicher, dass alle input eine label haben. Diese Beschriftungen werden von Screenreadern laut vorgelesen und helfen dabei, den Kontext für das input bereitzustellen. Eingegebener placeholder ist kein Ersatz für Beschriftungen.

Mehr lesen: http://www.nngroup.com/articles/form-design-placeholders/

Tab-Index

Verwenden Sie keine tabindex Attribute mit Werten größer als 0 (Null). Browser handhaben tabindex organisch über die Quellreihenfolge. Wenn Sie einen positiven Wert über 0 verwenden, wird beim Drücken der tab zu dieser Eingabe gesprungen, was bei Tastaturbenutzern zu Verwirrung und Frustration führen kann.

  • tabindex=-1 kann zusammen mit einem anchor oder JavaScript-Ereignis verwendet werden, um den Fokus auf dieses Element zu zwingen. Dadurch wird das Element nicht zur Quellreihenfolge des Browsers hinzugefügt.
  • tabindex=0 fügt das Element der Quellreihenfolge als Tab-fähiges Element hinzu und erhält den Fokus, wenn der Benutzer das Element erreicht.

Weitere Informationen: http://webaim.org/techniques/keyboard/tabindex

Skip-Links sollten das erste Element auf der Seite sein. Diese werden verwendet, um sich wiederholende Seitenabschnitte wie Dienstprogrammleisten oder die Hauptnavigation zu überspringen, Dinge, die der Benutzer bereits kennt. Die href für den Skip-Link sollte die id des Inhaltscontainers der Hauptseite sein. Der Hauptinhaltscontainer sollte einen tabindex=-1 haben, damit er den Fokus erhält.

Mehr lesen: http://webaim.org/techniques/skipnav/

Viewport-Zoom

Es ist wichtig, das Zoomen des Ansichtsfensters für Benutzer nicht zu deaktivieren, die großen Text benötigen, um Inhalte lesen zu können. Die meisten Boilerplate-Vorlagen deaktivieren den Zoom nicht, daher sollte dies kein Problem darstellen, ist aber erwähnenswert.

Tun Sie dies grundsätzlich nicht :

 <meta name="viewport" content="user-scalable=no" />

Mehr lesen: http://www.iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom/

Fokusmanagement

Das Fokusmanagement ist der Schlüssel für ein positives Benutzererlebnis, das sich auf die Tastaturnavigation verlässt. Diese Technik kommt wirklich ins Spiel, wenn dynamische Seitenelemente wie Tabs, Akkordeons, modale Fenster und solche Dinge behandelt werden.

Verwenden Sie JavaScript, um die Fokusverwaltung zu handhaben. Es gibt eingebaute Browserfunktionen, die dabei helfen. Beispielsweise verfolgt document.activeElement , welches Seitenelement zuletzt den Fokus hatte.

Auf der Seite A11Y Project Patterns finden Sie viele Beispiele für dynamische Seiten-Widgets und Fokusverwaltung.

Zurück zum Blog