Beachten Sie, dass WAI-ARIA älter als HTML5 ist und es nicht benötigt, obwohl die ARIA-Attribute nur von einem HTML5-Validator oder im Vergleich zu einer erweiterten ARIA-DTD als gültig angesehen werden. Der HTML5-Entwurf verbietet derzeit jedoch einige WAI-ARIA-Konstrukte.
Alohci
Ich habe dies in Facebooks HTML gesehen.
Sortierer
Antworten:
213
WAI-ARIA ist eine Spezifikation, die die Unterstützung für barrierefreie Webanwendungen definiert. Es definiert eine Reihe von Markup-Erweiterungen (meistens als Attribute für HTML5-Elemente), die vom Web-App-Entwickler verwendet werden können, um unterstützenden Technologien wie Bildschirmleseprogrammen zusätzliche Informationen über die Semantik der verschiedenen Elemente bereitzustellen. Damit ARIA funktioniert, muss der HTTP-Benutzeragent, der das Markup interpretiert, ARIA unterstützen. Die Spezifikation wird jedoch so erstellt, dass Benutzeragenten auf niedrigerer Ebene das ARIA-spezifische Markup sicher ignorieren können, ohne das zu beeinflussen Funktionalität der Web-App.
Hier ist ein Beispiel aus der ARIA-Spezifikation:
<ulrole="menubar"><!-- Rule 2A: "File" label via aria-labelledby --><lirole="menuitem"aria-haspopup="true"aria-labelledby="fileLabel"><spanid="fileLabel">File</span><ulrole="menu"><!-- Rule 2C: "New" label via Namefrom:contents --><lirole="menuitem"aria-haspopup="false">New</li><lirole="menuitem"aria-haspopup="false">Open…</li>
...
</ul></li>
...
</ul>
Beachten Sie das roleAttribut am äußeren <ul>Element. Dieses Attribut hat keinerlei Auswirkungen darauf, wie das Markup vom Browser auf dem Bildschirm gerendert wird. Browser, die ARIA unterstützen, fügen dem gerenderten UI-Element jedoch betriebssystemspezifische Eingabehilfen hinzu, sodass der Bildschirmleser es als Menü interpretieren und mit genügend Kontext vorlesen kann, damit der Endbenutzer es verstehen kann (z. B. explizit) Audio-Hinweis "Menü") und kann damit interagieren (z. B. Sprachnavigation).
Was ist der Unterschied zwischen Datenattribut und Arie?
JackMahoney
55
ariadient speziell der Barrierefreiheit und sollte nicht zum Speichern zufälliger Daten verwendet werden. dataist für zufällige Daten, die die Anwendung dem Knoten zuordnen muss.
Franci Penov
2
Bitte beachten Sie: role="menu"und "menuitem"sind korrekt für APPS (= Software mit Menüs wie File > Openoder Edit > Copy to clipboard. Für eine klassische Website ist es wahrscheinlich besser, die übliche <ul>(= Rollenliste standardmäßig) beizubehalten, da Sie nur Links zu anderen Webseiten und keine Funktionen wie bereitstellen "Speichern" oder "Kopieren / Einfügen". Wenn Sie verwenden, müssen role="menu"Sie auch Unterstützung hinzufügen, um mit den Pfeiltasten Ihrer Tastatur wie gewohnt
Ups D'oh,
62
ARIA steht für Accessible Rich Internet Applications.
WAI-ARIA ist eine unglaublich leistungsstarke Technologie, mit der Entwickler den Zweck, den Status und andere Funktionen visuell reichhaltiger Benutzeroberflächen auf einfache Weise beschreiben können - auf eine Weise, die von Assistive Technology verstanden werden kann. WAI-ARIA wurde endlich in den aktuellen Arbeitsentwurf der HTML 5-Spezifikation integriert.
Und wenn Sie sich fragen, was WAI-ARIA ist, ist es dasselbe.
Bitte beachten Sie, dass sich die Begriffe WAI-ARIA und ARIA auf dasselbe beziehen. Es ist jedoch korrekter, WAI-ARIA zu verwenden, um seine Ursprünge in WAI anzuerkennen.
WAI = Web Accessibility Initiative
So wie es aussieht, wird ARIA für unterstützende Technologien und hauptsächlich für das Lesen auf dem Bildschirm verwendet.
Die meisten Ihrer Zweifel werden ausgeräumt, wenn Sie diesen Artikel lesen
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 .
ARIA wurde entwickelt, um das Problem der Barrierefreiheit bei der Verwendung einer für Dokumente bestimmten Auszeichnungssprache (HTML) zum Erstellen von Benutzeroberflächen (UI) zu lösen. HTML enthält eine Vielzahl von Funktionen für den Umgang mit Dokumenten (P, h3, UL, TABLE), jedoch nur grundlegende Elemente der Benutzeroberfläche wie A, INPUT und BUTTON. Windows und andere Betriebssysteme unterstützen APIs, mit denen (Assistive Technology) AT auf die Funktionen von UI-Steuerelementen zugreifen kann. Internet Explorer und andere Browser ordnen die nativen HTML-Elemente der Eingabehilfen-API zu, aber die HTML-Steuerelemente sind nicht so umfangreich wie die auf Desktop-Betriebssystemen üblichen Steuerelemente und reichen für moderne Webanwendungen nicht aus. Benutzerdefinierte Steuerelemente können HTML-Elemente erweitern, um die Rich-Elemente bereitzustellen Benutzeroberfläche für moderne Webanwendungen erforderlich. Vor ARIA hatte der Browser keine Möglichkeit, diesen zusätzlichen Reichtum der Accessibility API oder AT zugänglich zu machen. Das klassische Beispiel für dieses Problem ist das Hinzufügen eines Klick-Handlers zu einem Bild. Es erstellt eine scheinbar anklickbare Schaltfläche für einen Mausbenutzer, ist jedoch für einen Tastatur- oder AT-Benutzer immer noch nur ein Bild.
Die Lösung bestand darin, eine Reihe von Attributen zu erstellen, mit denen Entwickler HTML mit UI-Semantik erweitern können. Der ARIA-Begriff für eine Gruppe von HTML-Elementen, die über benutzerdefinierte Funktionen verfügen und ARIA-Attribute verwenden, um diese Funktionen Barrierefreiheits-APIs zuzuordnen, lautet „Widget. ARIA bietet Autoren auch die Möglichkeit, die Rolle des Inhalts selbst zu dokumentieren, wodurch AT alternative Navigationsmechanismen für den Inhalt erstellen kann, die viel einfacher zu verwenden sind als das Lesen des vollständigen Textes oder nur das Durchlaufen einer Liste der Links.
Es ist wichtig zu bedenken, dass es in einfachen Fällen sehr bevorzugt ist, native HTML-Steuerelemente zu verwenden und zu formatieren, anstatt ARIA zu verwenden. Das heißt, Räder oder Kontrollkästchen nicht neu erfinden, wenn Sie nicht müssen.
Glücklicherweise kann ARIA-Markup zu vorhandenen Websites hinzugefügt werden, ohne das Verhalten für Mainstream-Benutzer zu ändern. Dies reduziert die Kosten für das Ändern und Testen der Website oder Anwendung erheblich.
Ich habe eine andere Frage zu ARIA gestellt. Aber der Inhalt sieht für diese Frage vielversprechender aus. möchte sie teilen
Was ist ARIA?
Wenn Sie sich bemühen, Ihre Website für Benutzer mit unterschiedlichen Surfgewohnheiten und körperlichen Behinderungen zugänglich zu machen, werden Sie wahrscheinlich die Rolle und die Arienattribute erkennen. WAI-ARIA (Accessible Rich Internet Applications) ist eine Methode zum Definieren Ihrer dynamischen Webinhalte und -anwendungen, damit Menschen mit Behinderungen sie identifizieren und erfolgreich damit interagieren können. Dies erfolgt über Rollen, die die Struktur des Dokuments oder der Anwendung definieren, oder über aria- * Attribute, die eine Widget-Rolle, Beziehung, einen Status oder eine Eigenschaft definieren.
Die Verwendung von ARIA wird in den Spezifikationen empfohlen, um den Zugriff auf HTML5-Anwendungen zu erleichtern. Wenn Sie semantische HTML5-Elemente verwenden, sollten Sie die entsprechende Rolle festlegen.
Kleine Korrektur: Wenn Sie semantische HTML5-Elemente verwenden, sollten Sie die entsprechende Rolle nur festlegen, wenn die Semantik des ausgewählten Elements nicht genügend Informationen enthält. Mit anderen Worten, wenn Sie ein nav-Element haben, müssen Sie keine Rolle = "Navigation" hinzufügen, da die Rolle bereits aus der Elementauswahl hervorgeht. Wenn Sie jedoch ein Eingabeelement zum Durchsuchen der Site haben, sollten Sie role = "search" hinzufügen, da Eingabeelemente für viele andere Zwecke als die Suche verwendet werden. Dadurch wird diese bestimmte Eingabe als Suchrolle gekennzeichnet.
Antworten:
WAI-ARIA ist eine Spezifikation, die die Unterstützung für barrierefreie Webanwendungen definiert. Es definiert eine Reihe von Markup-Erweiterungen (meistens als Attribute für HTML5-Elemente), die vom Web-App-Entwickler verwendet werden können, um unterstützenden Technologien wie Bildschirmleseprogrammen zusätzliche Informationen über die Semantik der verschiedenen Elemente bereitzustellen. Damit ARIA funktioniert, muss der HTTP-Benutzeragent, der das Markup interpretiert, ARIA unterstützen. Die Spezifikation wird jedoch so erstellt, dass Benutzeragenten auf niedrigerer Ebene das ARIA-spezifische Markup sicher ignorieren können, ohne das zu beeinflussen Funktionalität der Web-App.
Hier ist ein Beispiel aus der ARIA-Spezifikation:
Beachten Sie das
roleAttribut am äußeren<ul>Element. Dieses Attribut hat keinerlei Auswirkungen darauf, wie das Markup vom Browser auf dem Bildschirm gerendert wird. Browser, die ARIA unterstützen, fügen dem gerenderten UI-Element jedoch betriebssystemspezifische Eingabehilfen hinzu, sodass der Bildschirmleser es als Menü interpretieren und mit genügend Kontext vorlesen kann, damit der Endbenutzer es verstehen kann (z. B. explizit) Audio-Hinweis "Menü") und kann damit interagieren (z. B. Sprachnavigation).quelle
ariadient speziell der Barrierefreiheit und sollte nicht zum Speichern zufälliger Daten verwendet werden.dataist für zufällige Daten, die die Anwendung dem Knoten zuordnen muss.role="menu"und"menuitem"sind korrekt für APPS (= Software mit Menüs wieFile > OpenoderEdit > Copy to clipboard. Für eine klassische Website ist es wahrscheinlich besser, die übliche<ul>(= Rollenliste standardmäßig) beizubehalten, da Sie nur Links zu anderen Webseiten und keine Funktionen wie bereitstellen "Speichern" oder "Kopieren / Einfügen". Wenn Sie verwenden, müssenrole="menu"Sie auch Unterstützung hinzufügen, um mit den Pfeiltasten Ihrer Tastatur wie gewohntARIA steht für Accessible Rich Internet Applications.
Und wenn Sie sich fragen, was WAI-ARIA ist, ist es dasselbe.
WAI = Web Accessibility Initiative
So wie es aussieht, wird ARIA für unterstützende Technologien und hauptsächlich für das Lesen auf dem Bildschirm verwendet.
Die meisten Ihrer Zweifel werden ausgeräumt, wenn Sie diesen Artikel lesen
http://www.w3.org/TR/aria-in-html/
quelle
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 .
quelle
Was ist ARIA?
ARIA wurde entwickelt, um das Problem der Barrierefreiheit bei der Verwendung einer für Dokumente bestimmten Auszeichnungssprache (HTML) zum Erstellen von Benutzeroberflächen (UI) zu lösen. HTML enthält eine Vielzahl von Funktionen für den Umgang mit Dokumenten (P, h3, UL, TABLE), jedoch nur grundlegende Elemente der Benutzeroberfläche wie A, INPUT und BUTTON. Windows und andere Betriebssysteme unterstützen APIs, mit denen (Assistive Technology) AT auf die Funktionen von UI-Steuerelementen zugreifen kann. Internet Explorer und andere Browser ordnen die nativen HTML-Elemente der Eingabehilfen-API zu, aber die HTML-Steuerelemente sind nicht so umfangreich wie die auf Desktop-Betriebssystemen üblichen Steuerelemente und reichen für moderne Webanwendungen nicht aus. Benutzerdefinierte Steuerelemente können HTML-Elemente erweitern, um die Rich-Elemente bereitzustellen Benutzeroberfläche für moderne Webanwendungen erforderlich. Vor ARIA hatte der Browser keine Möglichkeit, diesen zusätzlichen Reichtum der Accessibility API oder AT zugänglich zu machen. Das klassische Beispiel für dieses Problem ist das Hinzufügen eines Klick-Handlers zu einem Bild. Es erstellt eine scheinbar anklickbare Schaltfläche für einen Mausbenutzer, ist jedoch für einen Tastatur- oder AT-Benutzer immer noch nur ein Bild.
Die Lösung bestand darin, eine Reihe von Attributen zu erstellen, mit denen Entwickler HTML mit UI-Semantik erweitern können. Der ARIA-Begriff für eine Gruppe von HTML-Elementen, die über benutzerdefinierte Funktionen verfügen und ARIA-Attribute verwenden, um diese Funktionen Barrierefreiheits-APIs zuzuordnen, lautet „Widget. ARIA bietet Autoren auch die Möglichkeit, die Rolle des Inhalts selbst zu dokumentieren, wodurch AT alternative Navigationsmechanismen für den Inhalt erstellen kann, die viel einfacher zu verwenden sind als das Lesen des vollständigen Textes oder nur das Durchlaufen einer Liste der Links.
Es ist wichtig zu bedenken, dass es in einfachen Fällen sehr bevorzugt ist, native HTML-Steuerelemente zu verwenden und zu formatieren, anstatt ARIA zu verwenden. Das heißt, Räder oder Kontrollkästchen nicht neu erfinden, wenn Sie nicht müssen.
Glücklicherweise kann ARIA-Markup zu vorhandenen Websites hinzugefügt werden, ohne das Verhalten für Mainstream-Benutzer zu ändern. Dies reduziert die Kosten für das Ändern und Testen der Website oder Anwendung erheblich.
quelle
Ich habe eine andere Frage zu ARIA gestellt. Aber der Inhalt sieht für diese Frage vielversprechender aus. möchte sie teilen
Was ist ARIA?
Wenn Sie sich bemühen, Ihre Website für Benutzer mit unterschiedlichen Surfgewohnheiten und körperlichen Behinderungen zugänglich zu machen, werden Sie wahrscheinlich die Rolle und die Arienattribute erkennen. WAI-ARIA (Accessible Rich Internet Applications) ist eine Methode zum Definieren Ihrer dynamischen Webinhalte und -anwendungen, damit Menschen mit Behinderungen sie identifizieren und erfolgreich damit interagieren können. Dies erfolgt über Rollen, die die Struktur des Dokuments oder der Anwendung definieren, oder über aria- * Attribute, die eine Widget-Rolle, Beziehung, einen Status oder eine Eigenschaft definieren.
Die Verwendung von ARIA wird in den Spezifikationen empfohlen, um den Zugriff auf HTML5-Anwendungen zu erleichtern. Wenn Sie semantische HTML5-Elemente verwenden, sollten Sie die entsprechende Rolle festlegen.
Und sehen Sie dieses YouTube-Video für ARIA live.
quelle