So verwenden Sie ARIA im HTML-Code Ihrer WordPress-Site

Veröffentlicht: 2019-06-29

Eines der Hauptziele der Webentwicklung ist die Schaffung einer ansprechenden Benutzererfahrung. Dies tun Sie häufig, indem Sie interaktive Funktionen und beeindruckende visuelle Elemente in Ihre Website einfügen. Diese Aspekte sind jedoch nicht unbedingt für jeden potenziellen Besucher zugänglich, insbesondere für diejenigen, die auf Screenreader angewiesen sind.

Glücklicherweise gibt es ein System, das allen Ihren Benutzern hilft, die Ergebnisse Ihrer harten Arbeit zu erleben. Die Einbindung von Accessible Rich Internet Applications (ARIA) in den HTML-Code Ihrer Site erfordert nur wenig zusätzlichen Aufwand und kann sich sehr lohnen. Dieser Beitrag stellt Ihnen ARIA und seine Verwendung vor. Lass uns gehen!

Eine Einführung in ARIA: Was es ist und warum Sie es verwenden möchten

Kurz gesagt, ARIA ist eine Möglichkeit, HTML-Attribute anzugeben, damit Screenreader sie genau identifizieren und dann an Besucher weitergeben können. Dies ist ein wichtiger Aspekt der barrierefreien Webentwicklung und hilft dabei, den Benutzern von Bildschirmleseprogrammen genauere Erfahrungen zu bieten.

Dies liegt daran, dass die Integration von ARIA in Ihren HTML-Code die Art und Weise beeinflusst, wie Browser Ihre Webseiten für Screenreader ändern. Dieser geänderte Inhalt wird in einem Barrierefreiheitsbaum dargestellt und ARIA übernimmt die Aufgabe, Ihre HTML-Elemente darin zu übersetzen.

Angenommen, Sie haben eine Seite mit einem Kontrollkästchen und haben ARIA in Ihrem HTML-Code verwendet. ARIA weist den Bildschirmleser an, den Benutzer darüber zu informieren, dass sich ein Kontrollkästchen auf der Seite befindet, und zeigt an, ob es aktiviert ist oder nicht. Natives HTML kann dies nicht alleine tun.

Denken Sie daran, wie häufig Sie das Internet nicht nur bei Ihrer Arbeit, sondern auch in Ihrem täglichen Leben nutzen. Stellen Sie sich nun vor, ein großer Teil des Webs wäre für Sie unbrauchbar. Sie hätten Zugang zu weniger Ressourcen für Bildung, Beschäftigung, Gesundheitsversorgung, Information, Kommunikation und sogar Unterhaltung.

Die Verwendung von Best Practices für barrierefreie Webentwicklung ist eine Möglichkeit, Ihren Teil dazu beizutragen, das Internet zu einem Ort der Chancengleichheit für alle zu machen, unabhängig von Alter oder Fähigkeiten. Dies wird von den Vereinten Nationen als grundlegendes Menschenrecht angesehen und ist ein Ziel, das es sich lohnt, zu verfolgen.

Wenn dies jedoch nicht ausreicht, um Sie in die Verwendung von ARIA zu investieren, sollten Sie auch beachten, dass barrierefreie Entwicklung auch aus geschäftlicher Sicht nützlich ist. Es überschneidet sich mit Best Practices für die Suchmaschinenoptimierung und erhöht die Reichweite Ihrer Website. Außerdem ist dies in einigen Fällen gesetzlich vorgeschrieben. Mit anderen Worten, es gibt viele Gründe, ein paar einfache Schritte zu unternehmen, um Ihre Website zugänglicher zu machen.

So verwenden Sie ARIA im HTML-Code Ihrer WordPress-Site (3 Schlüsselpraktiken)

Wir würden Ihnen auf jeden Fall empfehlen, sich über den Rahmen dieses Beitrags hinaus zu ARIA und Web-Accessibility weiterzubilden. Sie sollten insbesondere in Erwägung ziehen, die aktuelle Zugänglichkeit Ihrer Website zu testen.

Es gibt jedoch nur drei Dinge, die Sie wissen müssen, um ARIA im HTML-Code Ihrer WordPress-Site zu verwenden. Das Erlernen der folgenden Praktiken sollte Ihnen eine solide Grundlage bieten.

1. Verwendung von ARIA mit semantischem HTML

Bevor wir besprechen, wie Sie ARIA auf Ihren HTML-Code anwenden, ist es wichtig zu wissen, wann es angebracht ist, es zu verwenden. Obwohl natives HTML allein nicht für barrierefreie Webinhalte sorgt, gibt es einige semantische Elemente, die ARIA entweder unnötig machen oder mit ARIA in Konflikt geraten, wenn es nicht richtig verwendet wird.

Semantische Elemente – wie <header> , <figure> und <nav> – beschreiben den Zweck ihres HTML. Die Einbindung von ARIA in diese Elemente wäre überflüssig, da semantisches HTML bereits die Rolle des Elements impliziert (wir werden gleich mehr über ARIA-Rollen sprechen).

Darüber hinaus gelten für die Verwendung von ARIA bestimmte Regeln, um zu verhindern, dass Entwickler es in Konflikt mit semantischem HTML verwenden. Das World Wide Web Consortium (W3C) hat eine nützliche Tabelle, die aufschlüsselt, welche semantischen HTML-Elemente ARIA-Rollen impliziert haben:

Eine Tabelle, die die Regeln von ARIA für HTML erklärt.

Die erste Spalte gibt ein HTML-Element an, während die zweite die implizierte Rolle auflistet. Wenn für das Element eine implizite Rolle aufgeführt ist, müssen Sie keine zusätzliche ARIA-Rolle dafür angeben. In der dritten Spalte sind die Rollen aufgeführt, die jedes HTML-Element gemäß Best Practices haben kann.

2. Hinzufügen von Rollen zu HTML-Tags

Sobald Sie sicher sind, dass das HTML-Element, an dem Sie arbeiten, die Verwendung von ARIA erfordert, können Sie mit der Verwendung von 'Rollen' und 'Attributen' beginnen. Vielleicht haben Sie bereits eine Vorstellung davon, was ARIA-Rollen aus dem vorherigen Abschnitt machen. Sie geben den Elementtyp an, der im Tag enthalten ist, und geben den Zweck des Elements an.

Wenn Sie beispielsweise eine Warnung erstellen möchten, um Benutzer darüber zu informieren, dass sie ein Update installieren müssen, würden Sie die Rolle "alert" wie folgt verwenden:

 <div role="alert">
<p>Bitte installieren Sie das neueste Update!</p>
</div>

Wie bereits erwähnt, müssen Sie keine Rolle zuweisen, wenn das Element semantisch ist und die Rolle impliziert, und Sie sollten einem Element, das mit seiner implizierten Rolle in Konflikt steht, keine neue Rolle zuweisen. Beachten Sie jedoch auch, dass Sie jedem Element nur eine Rolle zuweisen können.

Stellen Sie sich das so vor – eine Rolle definiert, was ein Element ist . Ein Element kann nicht gleichzeitig zwei Dinge sein, daher sollten Sie die Rolle wählen, die es am besten beschreibt. Bei Bedarf können Sie jedoch ein Element in einem Element mit einer anderen Rolle verschachteln.

Wenn Sie beispielsweise die obige Warnung zu Ihrer Kopfzeile hinzufügen möchten, könnte sie in etwa so aussehen:

 <header><div role="alert">
<p>Bitte installieren Sie das neueste Update!</p>
</div></header>

Anstatt zu sagen, dass ein einzelnes Element sowohl ein Header als auch ein Alert ist, wird dadurch deutlich, dass im Header ein Alert enthalten ist.

3. Hinzufügen von Attributen zu Notenstatus und Eigenschaften

Attribute sind das zweite Element, aus dem ARIA besteht. Sie unterscheiden sich von Rollen dadurch, dass sie Screenreadern etwas Wichtiges über ein bestimmtes Element mitteilen, anstatt zu definieren, was dieses Element ist. Es gibt zwei Arten von ARIA-Attributen:

  • Staaten teilen Informationen zu Funktionen, die sich wahrscheinlich ändern, wenn ein Benutzer mit ihnen interagiert. Dies kann beispielsweise Kontrollkästchen oder Optionsfelder umfassen.
  • Eigenschaften weisen auf Eigenschaften hin, die sich während des Gebrauchs wahrscheinlich nicht ändern werden. Ein Element, das ein anderes Element kennzeichnet, oder die hierarchische Ebene, auf der sich ein Element befindet, sind beides Eigenschaften.

Beide sind leicht zu erkennen, da sie immer mit einer Arie beginnen, gefolgt von dem spezifischen Zustand oder dem verwendeten Eigentum. Zum Beispiel ist der Status, der verwendet wird, um einen Screenreader darüber zu informieren, dass ein Kontrollkästchen standardmäßig ausgefüllt ist, aria-checked, wie in diesem Beispiel:

 <span role="checkbox" 
aria-checked="wahr"
tabindex="0">
</span>

Ebenso ist die Eigenschaft, die verwendet wird, um zu bemerken, wenn ein Element ein anderes beschriftet, aria-labelledby. Sie können dieses Attribut beispielsweise auf ein Bild anwenden, um die dazugehörige Bildunterschrift anzugeben:

 <figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="Das Opernhaus von Sydney">
<figcaption>Wir haben hier die Oper <cite>Barbier von Sevilla</cite> gesehen!</figcaption>
</figur>

Wir empfehlen, die Liste der zulässigen Rollen, Zustände und Eigenschaften des W3C zu konsultieren, um weitere Beispiele für Attribute zu sehen, die Sie verwenden können.

Abschluss

Wenn es um Webentwicklung geht, ist die Erstellung von barrierefreien Inhalten möglicherweise nicht das Erste, was Ihnen in den Sinn kommt. Wenn Sie jedoch die Best Practices für die Barrierefreiheit im Web befolgen und ARIA HTML in Ihre Site integrieren, können Sie dazu beitragen, das Web für alle zugänglich zu machen.

Drei wichtige Praktiken für die Verwendung von ARIA auf Ihrer WordPress-Site sind:

  1. Verwenden von ARIA mit semantischem HTML.
  2. Hinzufügen von Rollen zu HTML-Tags.
  3. Einschließen von Attributen zu Notizstatus und -eigenschaften.

Haben Sie Fragen zur Verwendung von ARIA auf Ihrer WordPress-Site? Lass es uns im Kommentarbereich unten wissen!

Miniaturansicht des Artikels EgudinKa / shutterstock.com