Das Attribut aria-expanded ist eine WAI-ARIA-Eigenschaft, die angibt, ob ein interaktives Element derzeit einen ausklappbaren Container steuert, der erweitert oder eingeklappt ist. Indem Sie dieses Attribut auf Elemente wie Schaltflächen oder Links anwenden, die ein Menü, ein Akkordeon oder ein verstecktes Panel auslösen, informieren Sie Benutzer von Hilfstechnologien über den Status des Inhalts, mit dem sie interagieren. Die korrekte Verwendung stellt sicher, dass Screenreader ansagen, ob ein Abschnitt geöffnet oder geschlossen ist, sodass Benutzer Ihre Website sicher navigieren können.
Welchen Zweck hat aria-expanded im modernen Webdesign?
Gemäß den W3C WAI-ARIA-Spezifikationen gibt aria-expanded an, ob ein interaktives Element einen ausklappbaren Container steuert, der derzeit erweitert oder eingeklappt ist. Wenn ein Benutzer auf eine Schaltfläche klickt, die ein verstecktes Navigationsmenü umschaltet, muss der Screenreader wissen, ob dieses Menü derzeit sichtbar oder versteckt ist. Ohne dieses Attribut liefert der Browser kein programmatisches Signal zum Umschaltstatus, sodass Benutzer von Hilfstechnologien raten müssen, ob ihre Aktion den gewünschten Bereich erfolgreich geöffnet hat. Dieser Status muss von JavaScript dynamisch umgeschaltet werden, wenn der Benutzer mit dem Controller interagiert.
So implementieren Sie aria-expanded richtig
Die Implementierung erfordert sowohl statisches Markup als auch dynamische Updates. Sie definieren den Anfangszustand der Komponente in Ihrem HTML und setzen ihn normalerweise auf ‘false’, wenn der Inhalt standardmäßig ausgeblendet ist. Wenn der Benutzer auf den Auslöser klickt, sollte Ihr Skript den Attributwert auf ‘true’ aktualisieren, sobald der Inhalt sichtbar wird. Dies ist ein gängiges Muster für Akkordeon-Komponenten, mobile Menüschalter und Dropdown-Filter auf E-Commerce-Produktseiten. Stellen Sie immer sicher, dass das Auslöserelement den Fokus erhalten kann und dass die Statusänderung sofort erfolgt.
Wann sollten Sie aria-expanded im Vergleich zu anderen Attributen verwenden?
Die Entscheidung zwischen aria-expanded und anderen Status erfordert das Verständnis dessen, was das Element steuert. Verwenden Sie aria-expanded speziell dann, wenn das Element ein Controller ist, der die Sichtbarkeit eines Containers ändert. Verwenden Sie es nicht für Elemente, die die Sichtbarkeit eines separaten Bereichs nicht steuern. Beispielsweise sollte eine einfache Schaltfläche, die eine neue Seite öffnet, dieses Attribut nicht verwenden. Verwenden Sie es stattdessen für UI-Muster, die das Document Object Model im selben Seitenkontext modifizieren.
| Attribut | Primärer Anwendungsfall | Ziel-Element |
|---|---|---|
| aria-expanded | Ausklappbare Abschnitte | Schaltflächen/Links |
| aria-hidden | Inhalt ausblenden | Container/Divs |
| aria-haspopup | Menü-Auslöser | Schaltflächen/Divs |
Wie Alien Road aria-expanded in unseren Arbeitsabläufen anwendet
Bei Alien Road integrieren wir Barrierefreiheit von der ersten Wireframe-Phase an in unseren Design-Build-Prozess. Wenn wir ein benutzerdefiniertes Akkordeon oder eine Navigation für einen Kunden erstellen, dokumentieren wir die Anforderungen für die Statusänderung in unseren Projektspezifikationsdateien. Während der Entwicklungsphase schreiben unsere Entwickler JavaScript-Funktionen, die das Klickereignis eines UI-Elements auf die Aktualisierung des aria-expanded-Werts desselben Elements abbilden. Wir führen manuelle Überprüfungen mit Screenreadern durch, um zu überprüfen, ob der Status korrekt angesagt wird. Dies stellt sicher, dass jede interaktive Komponente die grundlegenden Barrierefreiheitsstandards erfüllt, bevor die Website für unsere Kunden live geschaltet wird.
Häufige Fehler bei der Verwendung von aria-expanded
Ein häufiger Fehler ist das Vergessen der Aktualisierung des Attributs, wenn der Benutzer mit der Benutzeroberfläche interagiert. Wenn die Schaltfläche ‘expanded=true’ anzeigt, der Inhalt aber visualisiert ausgeblendet ist, wird die Benutzererfahrung verwirrend. Ein weiterer Fehler ist das Anwenden des Attributs auf statische Elemente, die keine Erweiterung auslösen. Stellen Sie sicher, dass Ihr Skript Edge-Cases verarbeitet, wie z. B. das Schließen eines offenen Menüs, wenn der Benutzer außerhalb des aktiven Bereichs klickt. Dies verhindert, dass der Status mit der visuellen Darstellung der Seite synchron bleibt.
- Verwenden Sie immer die richtigen Booleschen Werte: ‘true’ oder ‘false’.
- Stellen Sie sicher, dass Ihr JavaScript das Attribut auf dem Auslöserelement aktualisiert, nicht auf dem Container.
- Überprüfen Sie, ob das Steuerelement nativ den Fokus erhalten kann, z. B. ein Button-Tag.
- Testen Sie Ihre Implementierung mit einem Screenreader, um die Ansage der Statusänderung zu bestätigen.
Warum ist der Status des Controllers wichtig?
Der Status des Controllers bietet dem Benutzer Kontext zum Ergebnis seiner Interaktion. Wenn ein Benutzer eine Taste drückt, um ein Menü zu öffnen, informiert ihn das Attribut aria-expanded darüber, dass die Aktion erfolgreich war und dass es nun einen neuen Inhaltsbereich zu erkunden gibt. Ohne dies könnte der Benutzer annehmen, dass die Seite nicht reagiert oder defekt ist. Indem Sie das Attribut genau halten, schaffen Sie ein zuverlässiges Erlebnis, das es allen Besuchern ermöglicht, ohne visuelle Bestätigung des Übergangs durch Ihre Inhalte zu navigieren.
Welche UI-Muster erfordern aria-expanded?
Mehrere UI-Muster basieren auf diesem Attribut, um die Barrierefreiheit zu gewährleisten. Akkordeons sind das häufigste Beispiel, bei dem mehrere Header die Sichtbarkeit ihres jeweiligen Inhalts steuern. Dropdown-Menüs in Navigationsleisten verwenden dies ebenfalls häufig, um das Vorhandensein von Untermenüs anzuzeigen. Darüber hinaus verwenden Filter-Panels auf E-Commerce-Seiten dies häufig, um die Sichtbarkeit von Suchkriterien zu verwalten. In einem typischen von uns verwalteten Konto sehen wir diese Muster auf Produktlisting-Seiten, wo Benutzer ihre Suchen verfeinern müssen.
- Akkordeons: Sichtbarkeit von Inhaltsblöcken umschalten.
- Navigationsmenüs: Anzeigen, ob Untermenüs sichtbar sind.
- Filter: Anzeige der Suchkriterien in der Seitenleiste verwalten.
- Modale Dialoge: Den Erweiterungsstatus des Auslösers verwalten.
Wo Sie diese Woche beginnen sollten
Beginnen Sie mit der Überprüfung Ihrer am häufigsten verwendeten interaktiven Elemente auf Ihrer Website. Identifizieren Sie alle Schaltflächen oder Links, die die Sichtbarkeit anderer Inhalte umschalten. Überprüfen Sie, ob diesen Elementen derzeit das Attribut aria-expanded korrekt zugewiesen und dynamisch aktualisiert wird. Wenn Sie Elemente finden, bei denen diese Attribute fehlen, aktualisieren Sie Ihre Skripte, um sie entsprechend zu verwalten. Konzentrieren Sie sich bei größeren Websites zuerst auf die primäre Navigation und alle Filter- oder Akkordeon-Widgets, da diese den größten Einfluss auf die Benutzernavigation und die allgemeine Barrierefreiheit der Website haben.
Häufig gestellte Fragen
Sollte ich aria-expanded für einen Link verwenden?
Ja, Sie können aria-expanded für einen Link verwenden, aber es wird im Allgemeinen bevorzugt, ein Button-Element zu verwenden, wenn die Aktion rein ein UI-Status-Umschalter ist. Links sind typischerweise für die Navigation zu einer neuen URL gedacht. Wenn Sie einen Link für eine Umschaltaktion verwenden müssen, stellen Sie sicher, dass er vollständig zugänglich ist und dass das Attribut aria-expanded den aktuellen Status des zugehörigen Containers korrekt widerspiegelt.
Steuert aria-expanded das Ausblenden von Inhalten automatisch?
Nein, aria-expanded steuert nicht die tatsächliche Sichtbarkeit des Elements. Es kommuniziert den Status nur an die Hilfstechnologie. Sie müssen weiterhin CSS wie display: none oder visibility: hidden verwenden, um den Inhalt physisch vom Bildschirm zu verstecken. Das Attribut dient lediglich als Label, um den aktuellen Status dieses Containers für Benutzer zu beschreiben, die auf Screenreader angewiesen sind.
Welchen Wert sollte ich verwenden, wenn kein erweiterter Status vorhanden ist?
Wenn ein Element keinen ausklappbaren Bereich steuert, sollten Sie das Attribut aria-expanded überhaupt nicht verwenden. Wenden Sie es nur auf Elemente an, die als Auslöser für Inhalte dienen, die zwischen sichtbaren und versteckten Zuständen umgeschaltet werden können. Das Einschließen des Attributs in nicht ausklappbare Elemente kann bei Screenreader-Benutzern Verwirrung stiften, indem es eine Funktionalität impliziert, die tatsächlich nicht existiert.
Wie teste ich die aria-expanded-Implementierung?
Verwenden Sie zum Testen Ihrer Implementierung einen Screenreader wie NVDA oder VoiceOver. Navigieren Sie zum Auslöserelement und beobachten Sie, wie der Screenreader den Status ansagt. Wenn Sie den Auslöser aktivieren, sollte der Screenreader seinen Status aktualisieren, um anzuzeigen, dass der Abschnitt jetzt erweitert ist. Wenn sich die Ansage nicht ändert, versagt Ihr JavaScript wahrscheinlich darin, den Attributwert während der Interaktion korrekt zu aktualisieren.
Weiterlesen: Webdesign und -entwicklung · Webdesign