it-swarm.com.de

Was ist der Unterschied zwischen HTML-Attributen "hidden" und "aria-hidden"?

Ich habe das Arienattribut überall gesehen, während ich mit Winkelmaterial gearbeitet habe. Kann mir jemand erklären, was das Aria-Präfix bedeutet? Was aber am wichtigsten ist, ist der Unterschied zwischen aria-hidden und hidden.

198
Daniel Kobe

ARIA (Accessible Rich Internet Applications) definiert eine Möglichkeit, Webinhalte und Webanwendungen für Menschen mit Behinderungen zugänglicher zu machen.

Das hidden-Attribut ist neu in HTML5 und weist browsers an, das Element nicht anzuzeigen. Die aria-hidden-Eigenschaft teilt screen-reader mit, ob sie das Element ignorieren sollen. Weitere Informationen finden Sie in den w3-Dokumenten:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

Die Verwendung dieser Standards kann behinderten Menschen die Nutzung des Webs erleichtern.

294
Leo Farmer

Ein verstecktes Attribut ist ein boolesches Attribut (Wahr/Falsch). Wenn dieses Attribut für ein Element verwendet wird, wird die Relevanz für dieses Element aufgehoben. Wenn ein Benutzer die HTML-Seite anzeigt, sollten Elemente mit dem versteckten Attribut nicht sichtbar sein.

Beispiel:

    <p hidden>You can't see this</p>

Durch Aria ausgeblendete Attribute weisen darauf hin, dass das Element und ALLE untergeordneten Elemente im Browser weiterhin sichtbar sind, für Eingabehilfen wie Bildschirmleseprogramme jedoch nicht sichtbar sind.

Beispiel:

    <p aria-hidden="true">You can't see this</p>

Schauen Sie sich this an. Es sollte alle Ihre Fragen beantworten.

Hinweis: ARIA steht für Accessible Rich Internet Applications

Quellen: Paciello Group

32
UnknownOctopus

Semantischer Unterschied

Nach HTML 5.2 :

Bei Angabe in einem Element gibt [das hidden-Attribut] an, dass das Element noch nicht oder nicht mehr direkt für den aktuellen Status der Seite relevant ist oder dass es verwendet wird, um zu erklären, dass der Inhalt von anderen Teilen der Seite wiederverwendet wird im Gegensatz zu einem direkten Zugriff durch den Benutzer.

Beispiele sind eine Registerkartenliste, auf der einige Bereiche nicht angezeigt werden, oder ein Anmeldebildschirm, der nach der Anmeldung eines Benutzers verschwindet. Ich bezeichne diese Dinge gerne als "zeitlich relevant", d. H. Sie sind zeitabhängig relevant.

ARIA 1.1 sagt dagegen:

[Der aria-hidden-Zustand] gibt an, ob ein Element für die Eingabehilfen-API verfügbar ist.

Mit anderen Worten, Elemente mit aria-hidden="true" werden aus dem accessibility-Baum entfernt, der von den meisten technischen Assistenten geehrt wird, und Elemente mit aria-hidden="false" werden definitiv dem Baum zugänglich gemacht. Elemente ohne das aria-hidden-Attribut befinden sich im Status "undefined (Standard)". Dies bedeutet, dass Benutzeragenten diese Struktur basierend auf ihrer Darstellung für die Struktur verfügbar machen müssen. Z.B. Ein Benutzeragent kann entscheiden, es zu entfernen, wenn seine Textfarbe mit der Hintergrundfarbe übereinstimmt.

Effektiver Unterschied

Die Semantik hat vorhersagbare Effekte in Browsern/Benutzeragenten. Der Grund, warum ich unterscheide, ist, dass das Verhalten des Benutzeragenten empfohlen ist, jedoch nicht erforderlich in den Spezifikationen.

Das hidden-Attribut sollte ein Element vor all -Präsentationen einschließlich Druckern und Bildschirmlesegeräten ausblenden (vorausgesetzt, diese Geräte berücksichtigen die HTML-Spezifikationen). Wenn Sie ein Element aus dem Eingabehilfenbaum sowie visuellen Datenträgern entfernen möchten, würde hidden den Trick ausführen. Verwenden Sie jedoch nicht hiddennur weil, um diesen Effekt zu erzielen. Fragen Sie sich, ob hidden zuerst semantisch korrekt ist (siehe oben). Wenn hidden nicht semantisch korrekt ist, Sie das Element jedoch visuell ausblenden möchten, können Sie andere Techniken wie CSS verwenden.

Unter der Annahme, dass die assistierende Technologie eines Benutzers die ARIA-Spezifikationen berücksichtigt, wird dem Benutzer kein Element mit aria-hidden="true" angezeigt. Dies wäre nützlich für "visuelles Flair", z. Symbole, Bilder usw., die für den Benutzer nicht unbedingt erforderlich sind.

Syntaktischer Unterschied

Schließlich gibt es einen Unterschied in der Syntax zwischen den beiden Attributen. 

hidden ist ein boolean-Attribut. Das heißt, wenn das Attribut vorhanden ist, ist es wahr - unabhängig von dem Wert, den es möglicherweise hat - und wenn das Attribut nicht vorhanden ist, ist es falsch. In diesem Fall empfiehlt es sich, entweder keinen Wert (<div hidden>...</div>) oder den leeren Zeichenfolgenwert (<div hidden="">...</div>) zu verwenden. Ich würde nichthidden="true" empfehlen, da jemand, der Ihren Code liest/aktualisiert, daraus schließen könnte, dass hidden="false" den gegenteiligen Effekt hätte, was einfach falsch ist.

Im Gegensatz dazu ist aria-hidden ein Aufzählungsattribut, das eine endliche Liste von Werten erlaubt. Wenn das aria-hidden-Attribut vorhanden ist, muss sein Wert entweder "true" oder "false" sein. Wenn Sie den Status "undefined (Standard)" haben möchten, entfernen Sie das Attribut vollständig.


Weiterführende Literatur: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

6
chharvey

aria-hidden auf false setzen und auf element.show () einstellen, funktionierte für mich.

z.B

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

und beim Verstecken

$(span).attr('aria-hidden', 'true');
$(span).hide();
0
Moiz