Vermeiden Sie Redundanz mit WAI-Aria auf HTML-Seiten

Seit der Einbeziehung von Aria -Rollen in HTML ist die Webentwicklung erheblich einfacher geworden. ARIA verbessert die Benutzerfreundlichkeit der Webanwendungen für Menschen mit Behinderungen, indem sie zusätzliche semantische Informationen für assistive Technologien (ATS) bereitstellen. Eine Schlüsselfrage bleibt jedoch bestehen: Sind ARIA -Rollenattribute erforderlich, wenn HTML -Elemente bereits inhärente Semantik besitzen?

Dieser Artikel untersucht dieses Problem und konzentriert

Schlüsselpunkte:

Vermeiden Sie die Verwendung von ARIA -Rollen, wenn das HTML -Element bereits die erforderliche Semantik bereitstellt. Unnötige ARIA -Attribute erstellen redundanten Code.
HTML5 -Elemente haben eine standardmäßige implizite Aria -Semantik; Daher ist normalerweise überflüssig und entmutigt.
• aria-* Trotz dieser impliziten Semantik kann das Hinzufügen von Aria -Rollen aus Kompatibilitätsgründen berücksichtigt werden, auch wenn dies zu Redundanz führt.

Aria Grundlagen und gemeinsame Missverständnisse:

wai-aria (zugängliche reiche Internetanwendungen) umfasst Attribute, die HTML-Elemente verbessern. Diese Attribute mitteilen Rollen-, Eigentums- und staatliche Informationen über die APIs von Browser Barrierefreiheit. Für Aria Newcomer ist Stephans "Eine Einführung in Wai-Aria" eine empfohlene Ressource.

Eine vorherrschende Ansicht in der HTML -Community lautet: "Verwenden Sie Aria nicht, wenn HTML es bereits umgeht." Genauer gesagt: Verwenden Sie ARIA nur, wenn einem implementierten HTML -Element die Unterstützung der Zugänglichkeit fehlt.

Aria -Rollen und die meisten Elemente:

Aria -Rollen, -Heurmen und -zustände können die Semantik eines HTML -Elements aufdecken. Dies ist als die implizite ARIA -Semantik des Elements

bekannt. priorisieren Sie semantisch korrektes HTML (Nutzung der nativen Semantik), bevor ARIA -Attribute hinzugefügt werden. Aria -Rollen erweitern im Allgemeinen nicht die Standardsemantik der meisten HTML -Elemente. Halten Sie es einfach: Wenn das HTML -Element von Natur aus die Semantik liefert, verwenden Sie Aria nicht. Dies schafft redundanter Code.

Aria -Rollen und HTML4:

Als Barrierefreiheitsexperte Steve Faulkner erklärt HTML4 (und frühere) Elemente keine zusätzlichen Arie -Rollen, um ihre Standardsemantik aufzudecken, da sie bereits zugeordnet sind. Das Hinzufügen von Aria -Rollen in diesem Zusammenhang ist sinnlos und fügt den Codeüberprüfungen unnötige Komplexität hinzu.

HTML5 -Verbesserungen:

In der HTML5 -Spezifikation heißt es: "In den meisten Fällen ist es unnötig und nicht empfohlen.

Während HTML5 -Elemente eine Standard -Aria -Semantik aufweisen, ist es nicht garantiert, dass jedes Element ohne Überprüfung abgebildet wird. Daher kann das Hinzufügen von Arie -Rollen als Vorsichtsmaßnahme berücksichtigt werden, wobei die Redundanz akzeptiert wird.

Redundanz in Arie:

Standard -implizite ARIA -Rollen zu interaktiven HTML5 -Elementen (wie Formelemente oder <button></button>) hat keinen Einfluss. Obwohl es nicht schädlich ist, ist es unnötig und verschwendet die Entwicklungszeit. Interaktive Elemente erfordern zugängliche Namen (bieten einen Wert für die Zugriffsname der API der API). Zum Beispiel:

weniger effizient:

<label>Title</label><input type="text">

effizienter:

<label for="title">Title</label><input type="text" id="title">

Das zweite Beispiel verwendet for und id Attribute, wobei das Etikett eindeutig mit der Eingabe assoziiert.

Beispiele für Redundanz (zu vermeiden):

• redundante Rollen für interaktive Elemente:

<button role="button">Submit</button>

Das role="button" ist unnötig.

• Aria -Rollen neben nativen HTML -Gegenstücken:

<div hidden aria-hidden="true"></div>

Das HTML hidden -Treibsattribut macht aria-hidden überflüssig.

• Arie auf etablierten strukturellen Elementen:

<h1 id="I-am-a-Heading">I am a Heading</h1>

beide role und aria-level sind unnötig.

Arie mit HTML5 -Strukturelementen:

html5 führte strukturelle Elemente (z. B. <aside></aside>, <article></article>, <main></main>) mit standardmäßigen impliziten Aria -Semantikzuordnungen ein. Einige Zuordnungen sind jedoch bedingt. Zum Beispiel bildet <footer></footer> nur dann role=contentinfo auf <article></article>, wenn nicht in einem <section></section> oder

. Browser enthüllen diese Standardsemantik von Natur aus.

Browser -Unterstützung:

Die meisten modernen Browser unterstützen die standardmäßige implizite Semantik von HTML5 -Struktur- und Schnittelementen. (Die Implementierung von Internet Explorer kann variieren.)

Schlussfolgerung:

Vermeiden Sie Arie -Rollen, Eigenschaften und Staaten, wenn die HTML5 -Spezifikation die Funktion bereits definiert.
Viele HTML5 -Elemente haben eine standardmäßige implizite Aria -Semantik.
Aria -Unterstützung ist in modernen Browsern im Allgemeinen hervorragend (mit Ausnahmen).

Betrachten Sie die Auswirkungen des Hinzufügens von Aria -Attributen zu HTML -Elementen und teilen Sie Ihre Gedanken in den Kommentaren.

häufig gestellte Fragen (FAQs):

(Der FAQS-Abschnitt aus der ursprünglichen Eingabe wird hier beibehalten, da er sich direkt auf das Thema bezieht und keine Änderung für die Pseudooriginalität erfordert.)

Was ist der Zweck von WAI-Aria auf HTML-Seiten? Konsortium (W3C). Es bietet einen Rahmen zur Verbesserung der Zugänglichkeit und Interoperabilität von Webinhalten und Anwendungen, insbesondere für Menschen mit Behinderungen. Dies erfolgt durch die Festlegung von Möglichkeiten, Webinhalte für Menschen mit Behinderungen zugänglicher zu machen, z. WAI-ARIA- und HTML-Seiten? Wenn beispielsweise ein HTML -Element bereits eine implizite Rolle spielt, die durch die HTML -Spezifikation definiert wird, und ein Entwickler eine ARIA -Rolle fügt, die der implizite Rolle entspricht, schafft dies Redundanz. Dies kann assistive Technologien verwechseln und die Benutzer, die sich auf sie verlassen. auf etwas unterschiedliche Weise arbeiten. Das HTML -Hidden -Attribut verbirgt ein Element aller Benutzer, während das Aria versteckte Attribut speziell ein Element vor assistiven Technologien verbirgt. Wenn ein Element mit Aria versteckt ist, ist es für Benutzer, die keine assistiven Technologien verwenden, weiterhin sichtbar. Die Rolle ist für das 'li' -Element in HTML unnötig, da es bereits eine implizite Rolle von ListItem spielt. Durch das Hinzufügen der ARIA -Rolle von ListItem zu einem LI -Element wird Redundanz erzeugt. Um dies zu vermeiden, verwenden Sie einfach das 'li' -Element so, wie es ist, ohne die ARIA -Rolle hinzuzufügen. Audits. Dies liegt daran, dass redundante ARIA -Rollen assistive Technologien verwirren und zu einer weniger zugänglichen Benutzererfahrung führen können. Durch die Vermeidung von Redundanz können Sie die Zugänglichkeit Ihres Webinhalts verbessern und Ihre Chancen für die Übergabe von Barrierefreiheitsprüfungen erhöhen. Bereitstellung zusätzlicher Semantik, bei der die HTML -Spezifikation sie nicht bereitstellt. Sie sollten nicht verwendet werden, um die von HTML bereits bereitgestellte Semantik zu duplizieren. Durch die Verwendung von Aria -Rollen und die Vermeidung von Redundanz können Sie die Zugänglichkeit Ihres Webinhalts verbessern.

Was sind einige häufige Fehler, die Sie bei der Verwendung von Aria -Rollen vermeiden sollten? Die redundante Verwendung von ARIA -Rollen kann assistive Technologien verwirren, während eine falsche Verwendung zu einer falschen Semantik führen kann. Überbeanspruchte von Aria -Rollen können Ihren Webinhalt übermäßig komplex und schwierig zu navigieren machen. ARIA -Code mithilfe von Barrierefreiheitsprüfungs -Tools. Diese Tools können redundante ARIA -Rollen und andere Probleme mit Barrierefreiheit in Ihrem Code identifizieren. Durch die Behebung dieser Probleme können Sie die Zugänglichkeit Ihres Webinhaltes verbessern. Sie helfen Menschen mit Behinderungen, den Zugang zu und interagieren mit Webinhalten. Beispiele für assistive Technologien sind Bildschirmleser, in denen Webinhalte für Personen mit Sehbehinderungen und Spracherkennungssoftware vorgelesen werden, mit denen Menschen mit Mobilitätsstörungen ihre Computer mit ihren Stimmen kontrollieren können.

Wie verbessert sich WAI-Aria Die Funktionalität assistierender Technologien? Funktionalität von Webinhalten. Auf diese Weise können assistierende Technologien ihren Benutzern eine genauere und nützlichere Darstellung des Webinhaltes bereitstellen.

Das obige ist der detaillierte Inhalt vonVermeiden Sie Redundanz mit WAI-Aria auf HTML-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!