Was sind Aria-Attribute in HTML und warum sind sie wichtig?

Webdesigner, die neu in HTML sind, können auf eine Reihe von unbekannten Attributen stoßen. Diese Attribute, denen das Wort ARIA vorangestellt ist, erscheinen überall im Web, aber ihr Zweck kann neuen Benutzern ein Rätsel sein.

ARIA-Attribute erfüllen einen wichtigen Zweck bei der Zugänglichkeit Ihrer Websites. Sie beschreiben sowohl den Inhalt eines bestimmten Elements als auch die Art und Weise, wie sich ein Element auf eine Seite oder die anderen Elemente in seiner Umgebung bezieht.

Das Hinzufügen dieser äußerst wichtigen Attribute zu Ihrer Website trägt dazu bei, dass alle Besucher die gleiche Erfahrung machen, unabhängig von der verwendeten Technologie.

Was sind ARIA-Attribute?

ARIA ist ein Akronym für Accessible Rich Internet Applications. In modernem HTML, insbesondere in JavaScript-reichen Anwendungen, ist anhand der Syntax nicht immer sofort ersichtlich, welche Rolle einzelne Elemente spielen.

Die Schwierigkeit, Rollen zu erkennen, kann ein Problem darstellen, wenn Benutzer die Website mithilfe von Barrierefreiheitstools wie Screenreadern anzeigen. Ohne das richtige semantische HTML kann Ihr Endbenutzer möglicherweise nicht auf einer Website navigieren, wenn er Barrierefreiheitstools verwendet.

Der bevorzugte Weg für Sie, dieses Problem zu lösen, ist jedoch Verwenden Sie die richtigen semantischen Elemente in HTML5, dies ist nicht immer praktikabel oder möglich. Hier kommen ARIA-Attribute auf HTML-Elementen ins Spiel. Diese Attribute helfen dabei, die Rolle und die Attribute Ihres Elements so zu definieren, dass Barrierefreiheitstools sie verarbeiten können.

Warum sind ARIA-Attribute wichtig?

Kurz gesagt, ARIA-Attribute ermöglichen Benutzern mit Behinderungen die Nutzung Ihrer Website. Diese Rollen und Attribute definieren zusätzliche Informationen zu verschiedenen Elementen auf Ihrer Website, die andernfalls möglicherweise nicht ohne Weiteres verfügbar sind.

Es gibt eine Vielzahl von ARIA-Attributen, die Sie zuweisen können. Sie sollten sie überall dort verwenden, wo zusätzlicher Kontext benötigt wird, damit das Dokument auf nicht-visuelle Weise Sinn ergibt.

Stellen Sie sich zum Beispiel eine Website vor, die eine Hauptnavigation hat, die aus a besteht Element eingewickelt in a Element statt a Element:

<divKlasse="Navigation">
<Ul>
<li>Heimli>
<li>Geschäftli>
<li>Umli>
Ul>
div>

Sie können ARIA-Attribute verwenden, um Benutzern bei der Navigation zu helfen. Hinzufügen der Attribute role und aria-label zur -Element ermöglicht Screenreadern und Hilfstechnologien, zu wissen, wo sich Ihr Menü befindet.

<divKlasse="Navigation">
<UlRolle="Navigation"Arie-Label="Hauptsächlich">
<li>Heimli>
<li>Geschäftli>
<li>Umli>
Ul>
div>

Während Sie in den meisten Fällen die richtigen Elemente verwenden sollten, ist dies im Rahmen Ihrer Tätigkeit möglicherweise nicht immer möglich. Wenn Ihre Website beispielsweise die Verwendung eines Fortschrittsbalkens erfordert, Sie jedoch ein Design wünschen, das der Standardbalken nicht zulässt.

In diesem Szenario könnten Sie einen benutzerdefinierten Satz von Elementen erstellen, um Ihren Fortschrittsbalken anzuzeigen. Für einen Bildschirmleser werden diese Elemente jedoch wie ein Wirrwarr aussehen; Es kann den Besuchern Ihrer Website keine nützlichen Informationen liefern.

Indem Sie die Rolle des Wrappers auf setzen Fortschrittsanzeige, und hinzufügen aria-valuenow, Arienwertmin, Und Arienwertmax Attribute zum Wrapper hinzufügen, können Sie immer noch den Fortschritt anzeigen.

In der heutigen Zeit ist das Erstellen barrierefreier Websites wichtiger denn je. Es gibt mehrere React-Komponentenbibliotheken, die unter Berücksichtigung der Barrierefreiheit erstellt wurden.

Eine zugängliche Website kann nicht nur Ihr Suchranking für mehrere große Suchmaschinen verbessern, sondern stellt auch sicher, dass Sie keine potenzielle Benutzergruppe von Ihrer Benutzerbasis abschneiden.

Das Hinzufügen der entsprechenden ARIA-Attribute zu Ihrer Website trägt dazu bei, sicherzustellen, dass Sie die Informationen allen Benutzern präsentieren. Das Endergebnis wird eine Website sein, die alle Zielgruppen willkommen heißt und allen so nah wie möglich die gleiche Erfahrung bietet.

Welche ARIA-Attribute sollte ich verwenden?

Es gibt viele verschiedene Attribute, die Sie auf Ihrer Website verwenden sollten. Im Allgemeinen fallen diese Attribute in zwei verschiedene Kategorien. Das erste sind Widget-Attribute, die normalerweise ein benutzerdefiniertes interaktives Element beschreiben.

Die andere Kategorie, die Sie beachten müssen, sind Beziehungsattribute. Dies sind Attribute, die Informationen darüber an unterstützende Technologien weiterleiten, wie sich ein bestimmtes Element auf den Rest der Website oder andere Elemente bezieht.

Wenn es darum geht, welche ARIA-Attribute Sie einbeziehen sollten, lautet die einfache Antwort: so viele wie möglich. Überall dort, wo das von Ihnen verwendete Element nicht die Rolle beschreibt, die das Element erfüllt, sollten Sie das Rollenattribut verwenden.

Wenn Sie ein Feld mit einem Label haben, sollte dieses Feld das haben aria-labeledby Attribut. Solange die von Ihnen verwendeten Attribute sinnvoll sind, machen Sie Ihre Website nur zugänglicher, indem Sie sie hinzufügen.

Widget-Attribute sind die viel größere Kategorie. Es enthält die meisten ARIA-Attribute, die Sie einer Standard-Site hinzufügen müssen. Im vorherigen Beispiel der benutzerdefinierten Fortschrittsleiste sind aria-valuenow, aria-valuemin und aria-valuemax alle Widget-Attribute. Sie beschreiben den Zustand oder mögliche Zustände des Elements, auf dem sie sich befinden.

Es gibt viele verschiedene Attribute, die Sie verwenden können, um den Zustand eines Elements zu beschreiben. Eine der häufigsten ist Arie-Label. Dieses Attribut weist dem Element, auf dem Sie es platzieren, eine Bezeichnung zu, die nur für Hilfstechnologien sichtbar ist.

Ein weiteres häufiges Paar von ARIA-Attributen, die in diese Kategorie fallen, sind Arie-versteckt Und aria-behindert. Diese können dem Benutzer den aktuellen Zustand eines Elements mitteilen und ob ein Screenreader es vorlesen soll. Dies ist hilfreich für eine Vielzahl unterschiedlicher Geräte mit eigenen Screenreadern.

Beziehungsattribute

Im Gegensatz zu Widget-Attributen geben Beziehungsattribute Hilfstechnologien Hinweise auf die Beziehung und Verwendung eines Elements zu anderen Elementen in seiner Umgebung. Das häufigste davon ist das Rollenattribut. Die Rolle gibt an, welchem ​​Zweck ein Element innerhalb einer Site dient.

Wenn Sie die einstellen Rolle zuschreiben Navigation, wird es sofort als Navigations-Wrapper identifiziert.

Einige Beziehungsattribute definieren, wie sich ein Element auf andere Elemente in seiner Umgebung bezieht. Der aria-labeledby -Attribut zeigt beispielsweise an, welches Element als Label für dieses Element dient. Dies kann nützlich sein, wenn Layouts verwendet werden, die visuell sinnvoll sind, aber Beschriftungen für bestimmte Formularsteuerelemente im Dokumentenfluss haben.

Obwohl es weniger Beziehungsattribute als Widgetattribute gibt, haben diese Attribute oft eine größere Bedeutung. Sie können oft den Fluss und die Steuerung eines Dokuments beschreiben und zusätzliche Details darüber liefern, wie ein Benutzer auf Ihrer Website navigieren kann.

Diese Attribute sind besonders wichtig, wenn Sie Formulare und Navigationselemente auf Ihrer Website entwerfen.

Warum es so wichtig ist, ARIA-Attribute in Ihren HTML-Code aufzunehmen

ARIA-Attribute dienen auf Ihrer Website einem einfachen und notwendigen Zweck. Sie dienen dazu sicherzustellen, dass die Website für alle Benutzer zugänglich ist, unabhängig von der Verwendung von Barrierefreiheitssoftware. Für Benutzer mit Behinderungen kann das Vorhandensein dieser Attribute auf Ihrer Website die Website nutzbar machen.

Die bevorzugte Methode für die Arbeit mit Hilfstechnologien besteht darin, die richtigen semantischen Elemente zu verwenden. Wenn dies jedoch nicht möglich ist, ermöglichen ARIA-Attribute ein freies Arbeiten, ohne dass Ihre Benutzer Inhalte verlieren.