Was ist es?
WAI-ARIA steht für "Web Accessibility Initiative - Accessible Rich Internet Applications" . Es handelt sich um eine Reihe von Attributen, mit denen die Semantik einer Website oder Webanwendung verbessert werden kann, damit unterstützende Technologien wie Bildschirmleseprogramme für Blinde bestimmte Dinge verstehen, die nicht in HTML enthalten sind. Die Informationen, die angezeigt werden, können so einfach sein, wie einem Bildschirmleser mitzuteilen, dass durch Aktivieren eines Links oder einer Schaltfläche nur mehr Elemente angezeigt oder ausgeblendet wurden, bis hin zu Widgets, die so komplex sind wie ganze Menüsysteme oder hierarchische Baumansichten.
Dies wird erreicht, indem Rollen und Statusattribute auf HTML 4.01 oder höher angewendet werden, das keinen Einfluss auf das Layout oder die Browserfunktionalität hat, aber zusätzliche Informationen für unterstützende Technologien bereitstellt.
Ein Eckpfeiler von WAI-ARIA ist das Rollenattribut. Es weist den Browser an, der Hilfstechnologie mitzuteilen, dass das verwendete HTML-Element nicht dem entspricht, was der Elementname andeutet, sondern etwas anderes. Während es ursprünglich nur ein div-Element ist, kann dieses div-Element der Container für eine Liste von Elementen sein, die automatisch vervollständigt werden. In diesem Fall wäre eine Rolle als "Listbox" angemessen. Ebenso sollte ein anderes div, das ein untergeordnetes Element dieses Container-div ist und ein einzelnes Optionselement enthält, die Rolle "Option" erhalten. Zwei Divs, aber durch die Rollen völlig unterschiedliche Bedeutung. Die Rollen sind nach häufig verwendeten Gegenstücken für Desktopanwendungen modelliert.
Eine Ausnahme bilden Dokument-Orientierungspunktrollen, die die tatsächliche Bedeutung des betreffenden Elements nicht ändern, sondern Informationen zu dieser bestimmten Stelle in einem Dokument bereitstellen.
Der zweite Eckpfeiler sind WAI-ARIA-Staaten und -Eigenschaften. Sie definieren den Status bestimmter nativer oder WAI-ARIA-Elemente, z. B. wenn etwas reduziert oder erweitert wird, ein Formularelement erforderlich ist, etwas mit einem Popup-Menü verbunden ist oder dergleichen. Diese sind häufig dynamisch und ändern ihre Werte während des gesamten Lebenszyklus einer Webanwendung. Sie werden normalerweise über JavaScript bearbeitet.
Was ist es nicht?
WAI-ARIA soll das Browserverhalten nicht beeinflussen. Im Gegensatz zu einem echten Schaltflächenelement bietet ein Div, auf das Sie die Rolle der Schaltfläche anwenden, keine Fokussierbarkeit für die Tastatur, einen automatischen Klick-Handler, wenn die Leertaste oder die Eingabetaste gedrückt wird, und andere Eigenschaften, die für a unabdingbar sind Taste. Der Browser selbst weiß nicht, dass ein Div mit der Rolle "Schaltfläche" eine Schaltfläche ist, sondern nur sein API-Teil für Eingabehilfen.
Infolgedessen müssen Sie die Tastaturnavigation, die Fokussierbarkeit und andere Verhaltensmuster, die von Desktop-Anwendungen bekannt sind, unbedingt selbst implementieren. Sie können einige erweiterte ARIA Techniken finden sich hier .
Wann sollte ich es nicht benutzen?
Ja, das stimmt, dieser Abschnitt steht an erster Stelle! Denn die erste Regel bei der Verwendung von WAI-ARIA lautet: Verwenden Sie es nur, wenn Sie es unbedingt müssen! Je weniger WAI-ARIA Sie haben und je mehr Sie sich auf native HTML-Widgets verlassen können, desto besser! Es gibt einige weitere Regeln zu folgen, können Sie sie heraus überprüfen hier .