Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Zugänglichkeit, Teil 2: Wahrnehmbar

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Accessibility.
Accessibility, Part 1: Introduction
Accessibility, Part 3: ARIA

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Dieses Prinzip besagt, dass alle Inhalte in einem Format vorliegen müssen (oder in einem Format verfügbar sein müssen), das vom Benutzer leicht wahrgenommen werden kann.  Anders gesagt, Ihre Websites sollten so gestaltet sein, dass jeder den Inhalt 'lesen' kann, unabhängig von möglichen Behinderungen.  Viele Benutzer mit Behinderungen werden unterstützende Technologien verwenden; Beispielsweise können Sehbehinderte einen Bildschirmleser verwenden, der das ausgibt, was auf dem Bildschirm erscheint, oder einen Text-zu-Blinden-Konverter.  Das Ziel ist dann, diese unterstützenden Technologien zu erleichtern.

Bitte denken Sie daran, dass die hier aufgeführten Richtlinien nicht erschöpfend sind. Daher sollten Sie sich immer an die Web Content Accessibility Guidelines halten.

Stellen Sie Textalternativen für Bilder zur Verfügung (1.1)

Verwenden Sie die Alt-Tags für Bilder

Das ist vielleicht der häufigste Ratschlag zur Verbesserung der Barrierefreiheit.  Wenn Ihre Website irgendeine Bilder enthält, werden diese von Screenreadern ignoriert, es sei denn, Sie verwenden das alt-Tag.

Beachten Sie, dass die alt-Beschreibung nicht notwendigerweise eine Beschreibung dessen ist, was das Bild ist, sondern vielmehr, was das Bild zu vermitteln versucht.  Das alt-Tag sagt in Worten, was Sie mit dem Bild zu sagen versuchen.

Während dieser Ratgeber hauptsächlich für Redakteure geeignet ist, erwähne ich ihn hier, weil Themenentwickler oft ein Logo anstelle von Text bereitstellen, um den Namen der Website oder des Unternehmens zu vermitteln.  In diesem Fall ist es wahrscheinlich am besten, den Namen der Site (get_bloginfo('name')) als alternative Beschreibung zu verwenden:

Alt-Tags sollten nicht für rein dekorative Bilder verwendet werden, da Sie den Benutzer im Wesentlichen dazu zwingen, übermäßige und unnötige Informationen zu durchsuchen.

Alternativen zu CAPTCHAs bereitstellen

Wenn Ihr Plugin ein Formular erstellt, benötigen Sie möglicherweise eine Bestätigung, dass auf eine Person statt auf einen Computer zugegriffen wird.  Wenn Sie sich entscheiden, dem Benutzer ein Bild oder einen Audioclip zur Verfügung zu stellen, den er dann interpretieren muss, sollten Sie dies in Textform erklären und eine alternative Form von CAPTCHA bereitstellen, um unterschiedlichen Behinderungen Rechnung zu tragen.

Stellen Sie sicher, dass Inhalte berücksichtigt werden können (1.4)

Verlassen Sie sich nicht ausschließlich auf Position, Farbe oder Form, um Bedeutung zu vermitteln

Diese Richtlinie gilt weitgehend für Plugin-Entwickler, kann aber auch für Themen gelten.  Wenn Farbe, Form oder Position verwendet werden, um eine Bedeutung zu vermitteln, die aus dem Text nicht erkennbar ist, geht diese Bedeutung bei Benutzern verloren, die farbenblind oder blind sind.

Ein typisches Beispiel könnten beispielsweise Kontaktformularschaltflächen sein, die sich ausschließlich auf ein Symbol aus der beliebten Symbolschriftart Font Awesome stützen:

Der Zweck dieser Tasten ist für einen sehenden Benutzer leicht ersichtlich, aber für diejenigen, die sich auf Bildschirmleser verlassen, gibt es keinen Hinweis darauf, was die Tasten tun.  Wenn Sie zu Entwurfszwecken die Verwendung von Text vermeiden möchten, sollten Sie die Beschriftung mit dem Attribut aria-label angeben.

Das ist nur ein Beispiel für das ARIA-Protokoll, auf das wir im nächsten Artikel näher eingehen werden.

Stellen Sie sicher, dass zwischen Text und Hintergrund ein ausreichender Kontrast besteht

Das ist eine naheliegende Anforderung.  Selbst für eine weitsichtige Person ist eine Website mit einem geringen Kontrast zwischen Text und Hintergrund schwer zu lesen und kann zu einer Überanstrengung der Augen führen.  Für Sehbehinderte ist ein noch höherer Kontrast erforderlich, weshalb die WCAG angibt, dass Hintergrund und Textfarbe ein Kontrastverhältnis von 4,5: 1 haben sollten.

Es ist nicht sofort offensichtlich, wie dieses Verhältnis aussieht oder wie es aussieht, aber es gibt eine Vielzahl von Werkzeuge, die Ihnen helfen, das Verhältnis zu überprüfen:

Größerer Text hat eine geringere Anforderung von 3: 1, und Logos, Text, der reine Dekoration oder nicht sichtbar ist, und 'deaktivierter' Text/Schaltflächen haben keine Kontrastanforderung.

Obwohl die meisten Themen ihren Benutzern die Möglichkeit bieten, die auf der Website verwendeten Farben anzupassen, sollten Sie sicherstellen, dass mindestens die Standardfarben (oder die verfügbaren Paletten) den minimalen Kontrastanforderungen entsprechen.  Später in dieser Serie werden wir versuchen, ein Feature in Ihr Thema zu integrieren, das den Benutzer warnt, wenn er Farben mit unzureichendem Kontrast auswählt.

Vermeiden Sie weiße Hintergründe

Die British Dyslexia Association empfiehlt, reine weiße Hintergründe für Text zu vermeiden und stattdessen eine cremefarbene, cremefarbene oder weiche Pastellfarbe zu verwenden.  Der Grund dafür ist, dass die Helligkeit einer weißen Seite den Leser 'blenden' kann.

Bei Personen, die an einem Skotopischen Sensitivitätssyndrom (oder Irlen-Syndrom) leiden, kann ein zu hoher Kontrast zwischen Hintergrund und Text Symptome verschlimmern wie:

  • Text scheint sich auf der Seite zu bewegen (steigen, fallen, wirbeln, schütteln usw.)
  • den Textinhalt "verlieren" und nur weiße Flüsse durch den Text sehen
  • Text erscheint unscharf

Diese Symptome machen das Lesen schwierig und unangenehm und können zu Augenermüdung, Augenbelastung, Schläfrigkeit und Kopfschmerzen führen.

Im Hinblick auf den vorherigen Abschnitt empfiehlt es sich, einen guten Kontrast, aber nicht zu viel Kontrast zu gewährleisten. Da Präferenzen variieren zwischen den einzelnen Personen, was "zu viel" ausmacht, liegt an der persönlichen Beurteilung.

Organisieren Sie Ihre Seitenstruktur (1.3)

Ein strukturiertes Layout mit entsprechender Verwendung von Überschriften erleichtert es den Benutzern, die Informationen zu verstehen, die ihnen präsentiert werden.  Screenreader-Benutzer verlassen sich auf eine 'sinnvolle' Struktur, um sich auf einer Seite zurecht zu finden.

Strukturieren Sie das Layout Ihres Themas

Eine schnelle Möglichkeit, das zu testen, besteht darin, Ihr Design mit deaktiviertem CSS und JavaScript anzuzeigen.  Ein besserer Weg ist Lynx, ein textbasierter Browser.  Wenn die Struktur Ihrer Website dazu führt, dass der Inhalt unorganisiert angezeigt wird, ist es für Benutzer, die Lynx oder andere unterstützende Technologien verwenden, schwierig, Ihre Website zu lesen.  Da Benutzer, die sich auf solche Technologien verlassen, nicht die Vorteile haben, dass CSS und JavaScript die Orientierung auf der Seite und den Fluss des Inhalts unterstützen, ist es wichtig, dass die richtige Lesesequenz ohne sie offensichtlich ist.

Das ist relativ einfach zu erreichen: Stellen Sie sicher, dass die HTML-Markierung die beabsichtigte visuelle Reihenfolge widerspiegelt.  Das ist ziemlich natürlich, und wenn Sie feststellen, dass Ihre Website ohne CSS nicht gut liest, dann haben Sie es wahrscheinlich absichtlich abgewichen.  Als allgemeine Faustregel sollte Ihre Website dem Muster folgen:

  • Titel
  • Navigation
  • Hauptinhalt
  • Seiteninhalt
  • Fußzeile

Verwenden Sie Kopfzeilen entsprechend 

Dieser ist ziemlich leicht zu bekommen. Die Regeln sind einfach:

  1. Verwenden Sie <h*>-Tags nur für Kopfzeilen - nicht nur, um bestimmten Text einen bestimmten Stil zuzuweisen.
  2. Suchmaschinen und Bildschirmleseprogramme verwenden Header-Tags, um Ihre Seite zu strukturieren. Denken Sie also darüber nach, wie Sie sie verwenden.  Sie sollten die Struktur der Seite widerspiegeln.
  3. Verwenden Sie sie der Reihe nach: <h3> sollte innerhalb eines <h2> und <h2> innerhalb eines <h1> verschachtelt sein.  (Das folgt aus (2)).

Eine häufig gestellte Frage lautet: Sollte sich mein Site-Titel in einem <h1>-Tag befinden?  Die W3C-Empfehlungen weisen darauf hin, dass es zwar einige Fälle gibt, in denen das sinnvoll wäre, aber im Zusammenhang mit WordPress-Themen ist es wahrscheinlich am besten, keine <h1>-Tags für den Site-Titel zu verwenden.  Es gibt ein paar Gründe:

  1. Der Site-Titel sollte im <title>-Tag enthalten sein.  Während das für visuelle Benutzer oft übersehen und ein wenig hässlich ist, ist es das Erste, was von Screenreadern gelesen wird.  Durch das Umbrechen des Site-Titels in <h1> wird es für die Benutzer von Screenreadern überflüssig, während der Titel für sehende Benutzer offensichtlicher wird, ohne dass das Header-Tag verwendet werden muss.
  2. Die Header-Tags werden zum Organisieren von Informationen verwendet.  Ihr Website-Titel ist für einen solchen Zweck nicht besonders nützlich.

Unabhängig davon, was Sie entscheiden, sollten die nachfolgenden Kopfzeilen auf Ihrer Seite darunter sitzen.  So sollten Artikel in "Die Schleife" oder Ihre Seitentitel <h2>-Tags haben, wenn Sie das <h1>-Tag für Ihren Site-Titel und <h1>-Tags verwendet haben.

Nach dem Post-Inhalt zeigen die meisten Themen die Kommentare des Posts an.  Es ist ganz natürlich, "Kommentare" als Überschrift zu verwenden, da es eine logische Abkehr vom Inhalt ist, aber da es mit dem Post-Inhalt verknüpft ist, sollte die Überschriftenebene das widerspiegeln.  Am logischsten ist es, wenn der Kopf "Kommentare" eine Ebene unterhalb des Beitragstitel steht.

Hier ist ein Ausschnitt aus einer single.php:

In meinem Beispiel habe ich ein <h1>-Tag für den Beitragstitel verwendet, sodass die Kommentarvorlage (comments.php)  dann ungefähr so aussieht:

Stellen Sie sicher, dass Ihre Website gut auf erhöhte Textgröße reagiert (1.4)

Einige Benutzer mit leichten Sehbehinderungen können sich auf die Vergrößerung von Schriftgrößen anstatt auf Hilfstechnologien wie Bildschirmlupen verlassen.  In Anbetracht dessen geben die WCAG-Richtlinien an, dass Ihre Website nicht "umknicken" sollte, wenn der Text um bis zu 200% vergrößert wird.  "Pause" bedeutet hier, dass Text verschwindet, kollidiert, aus seinen Containern überläuft, oder allgemeiner das Layout der Site gestört wird, so dass es schwierig oder verwirrend zu lesen ist.

Verwenden Sie relative Schriftgrößen

Da moderne Browser die Größe von Text verbessern, ist die Verwendung relativer Schriftgrößen nicht mehr so wichtig wie früher (obwohl IE9 die Schriftgrößen in Pixeln nicht ändert).  Unabhängig davon wird empfohlen, relative Schriftgrößen (Prozentsätze, Ems oder Rems) zu verwenden.  Die rem-Einheit behebt einige der Probleme mit der em-Einheit - und obwohl sie erst mit CSS3 eingeführt wurde, können Sie sie rückwärtskompatibel mit älteren Browsern verwenden.  Details zur Implementierung relativer Schriftarten sind etwas außerhalb des Geltungsbereichs, aber Sie können hier mehr erfahren:

Verwenden Sie Fluid Layouts

Die Größenänderung von Text kann jedoch zu Layoutproblemen führen.  Text wird möglicherweise vom Bildschirm weggeschoben, so dass der Benutzer zum Bildlauf gezwungen wird oder Text aus seinem Container möglicherweise in anderen Text übergeht, wodurch Teile der Webseite unleserlich werden.  Hier kann ein ansprechendes (oder flüssiges) Layout helfen.  "Ansprechende"-Sites passen sich an jedes Gerät an, auf dem sie angezeigt werden. Daher verwenden sie selten feste Pixel für Höhe/Breite oder Schriftgröße.  Folglich verhalten sich solche Websites normalerweise gut, wenn die Schriftgrößen geändert werden: Ihr Layout bricht nicht.

Die WCAG-Richtlinien empfehlen nicht nur, dass der Text um bis zu 200% vergrößert werden kann, sondern auch, dass die Website die erhöhte Textgröße berücksichtigen kann.  Ansprechbares Webdesign kann helfen, weil:

  • Ein vergrößerter Bildschirm passt sich der Größe des 'kleineren' Darstellungsbereichs an
  • Elemente werden verschoben, um das horizontale Scrollen zu vermeiden
  • Nicht fixierte Größen verhindern überlappende oder abgeschnittene Texte
  • Bilder werden an den verfügbaren Platz angepasst und überlappen sich nicht mit Text

Es ist jedoch wichtig zu beachten, dass ansprechbares Design und Zugänglichkeit nicht dasselbe sind: Obwohl sie sich gegenseitig ergänzen können, haben sie letztlich unterschiedliche Ziele.  Eine Ansprechbare Site ist nicht unbedingt zugänglich und umgekehrt.

Mark-Up korrekt verwenden (1.3)

Verwenden Sie nur Tabellen, um Daten darzustellen

Die Verwendung von Tabellen als Hilfsmittel in einem Seitenlayout gehört (hoffentlich) der Vergangenheit an.  Es gibt auch Zugänglichkeits-bezogene Verzweigungen für den Missbrauch von Tabellen.  Tabellen sollen Daten oder Informationen darstellen, und so haben Zeilen und Spalten eine inhärente Bedeutung, und Bildschirmleser nehmen dies beim Auslesen von Daten an.

Ein Bildschirmleser liest zum Beispiel die Zeilen- und Spaltennummer aus, bevor er den Inhalt der Zelle ausliest.  Da die Zellenposition in reinen Präsentationszwecken nicht relevant ist, kann diese Information verwirrend oder zumindest irritierend sein: Dem Endanwender wird gesagt, dass es eine tabellarische Struktur gibt, wenn es wirklich keine gibt.

Korrekte Verwendung der Tabellenmarkierung

Die meisten Theme-Entwickler müssen keine Tabellen erstellen (und der WordPress-Postkalender ist bereits verfügbar).  Plugins können jedoch Tabellen über Shortcodes oder Widgets anzeigen.  Beim Erstellen des Tabellenaufschlags sind einige Dinge zu beachten:

  • Wenn möglich, halten Sie Tabellen einfach.  Obwohl übergreifende Zeilen/Spalten seit vielen Jahren Standardmarkierungen sind, werden sie von Bildschirmleseprogrammen nicht allgemein unterstützt.
  • Stellen Sie gegebenenfalls ein <caption>-Element am Anfang einer Tabelle bereit und beschreiben Sie, was die Tabelle zeigt:

  • Verwenden Sie <th> für Tabellenüberschriften und <td> für Tabellendaten<th> Zellen sollten niemals leer sein.
  • Geben Sie einen Bereich für <th>-Zellen an und geben Sie an, ob es sich um einen Zeilen- oder Spaltenkopf handelt: <th scope = "col"> oder <th scope = "row">.  Obwohl der Umfang oft vom Bildschirmleser bestimmt wird, tut es nicht weh, explizit zu sein.
  • Sie können <thead>, <tbody> und <tfoot> verwenden, sie bieten jedoch keine Vorteile in Bezug auf die Zugänglichkeit.
  • Verwenden Sie das title-Attribut von Überschriften, um eine in der Zelle verwendete Abkürzung zu erklären:

ARIA & Formulare 

Accessible Rich Internet Applications (ARIA)-Attribute sind nützlich beim Identifizieren des Zwecks eines bestimmten Teils der Seite, irgendwelcher Eigenschaften (z. B. Etikettieren einer erforderlichen Formeingabe als solcher) und Zustand (z. B. Markieren einer Schaltfläche als deaktiviert).  Wenn Sie sie verwenden, können Hilfstechnologien Ihre Website besser verstehen und Ihre Seite dem Endnutzer deutlicher präsentieren. Wir werden ARIA im nächsten Artikel dieser Serie sehen.  Später in der Serie werden wir uns auch mit dem korrekten Form-Mark-Up und zugängliche Rückmeldungen befassen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.