ARIA (Accessible Rich Internet Applications) ist ein Satz von Attributen, die Sie zu HTML-Elementen hinzufügen können, um Webinhalte und Anwendungen zugänglicher zu machen, insbesondere dynamische Inhalte und erweiterte Benutzeroberflächen-Steuerelemente. Der Authoring Practices Guide (APG) bietet Anleitungen zur korrekten Verwendung von ARIA.
Was ist ARIA?
- ARIA liefert zusätzliche Informationen für assistierende Technologien, die in nativem HTML nicht verfügbar sind. Es hilft, die Rollen, Zustände und Eigenschaften benutzerdefinierter UI-Komponenten zu definieren.
- Beispiel: Wenn Sie ein benutzerdefiniertes Dropdown-Menü mit <div>-Elementen erstellen, weiß ein Screenreader nicht, dass es sich um ein Menü handelt. ARIA-Attribute wie role=„menu“, aria-haspopup=„true“ und aria-expanded=„false/true“ können verwendet werden, um seine Funktion und seinen Zustand zu beschreiben.
- Erste Regel von ARIA: Die wichtigste Regel lautet: Wenn ein natives HTML-Element bereits die benötigten Zugänglichkeitsfunktionen besitzt, verwenden Sie dieses, anstatt eine benutzerdefinierte Komponente mit ARIA zu erstellen. Verwenden Sie zum Beispiel ein <button>-Element anstelle eines <div> mit role=„button“.
Was ist der APG?
- Der APG (Authoring Practices Guide) ist eine Ressource des W3C, die Entwurfsmuster und Codebeispiele für die Erstellung zugänglicher Webkomponenten bereitstellt.
- Es zeigt, wie ARIA für gängige Widgets wie Akkordeons, Schieberegler, Tabs und Modals korrekt implementiert wird.
- Der APG ist ein unverzichtbarer Leitfaden für Entwickler, um sicherzustellen, dass ihre benutzerdefinierten Komponenten von Personen, die auf assistierende Technologien angewiesen sind, genutzt werden können.
