Was ist der Unterschied zwischen HTML-Attributen "versteckt" und "Arie versteckt"?

256

Ich habe das Arienattribut überall gesehen, während ich mit Angular Material gearbeitet habe. Kann mir jemand erklären, was das Arienpräfix bedeutet? Aber am wichtigsten ist, was ich zu verstehen versuche, der Unterschied zwischen aria-hiddenund hiddenAttribut.

Daniel Kobe
quelle
1
Ich habe hier einige Klarstellungen gefunden: paciellogroup.com/blog/2012/05/…
Abdul

Antworten:

363

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

Das hiddenAttribut ist neu in HTML5 und weist die Browser an, das Element nicht anzuzeigen. Die aria-hiddenEigenschaft teilt Bildschirmlesern 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.

Leo Farmer
quelle
4
Wenn Sie also nur ein verstecktes Attribut verwenden, liest der Bildschirmleser immer noch?
Daniel Kobe
39
Richtig. hiddenbedeutet für alle verborgen. aria-hiddenbedeutet versteckt für Screenreader und ähnliche Tools. Dies ist nützlich für Komponenten, die beispielsweise nur zur Formatierung verwendet werden und keinen echten Inhalt enthalten.
Andrei Bârsan
23
@ AndreiBârsan @DanielKobe Ich denke, Andrei meinte "Falsch". (Der Rest seines Kommentars ist sachlich.) hiddenSollte den Bildschirmleser daran hindern, auf den Inhalt des Tags zuzugreifen.
Eenblam
6
Ihre Antwort über aria-hiddenist richtig; Sie sagten jedoch nichts darüber hidden, um es zu unterscheiden aria-hidden. Dies ist leider die beste Antwort. Bitte seien Sie bei Ihren Antworten gründlicher.
Pegues
1
Ihre Antwort erklärt die Auswirkungen der Attribute, aber nicht ihre Bedeutung . Sie erwähnen nichts über den Barrierefreiheitsbaum oder die zeitliche Relevanz eines Elements. Lesen Sie die technischen Daten für weitere Informationen. [HTML 5.2 , ARIA 1.1 ]
chharvey
40

Ein verstecktes Attribut ist ein boolesches Attribut (True / False). Wenn dieses Attribut für ein Element verwendet wird, wird jede Relevanz für dieses Element entfernt. Wenn ein Benutzer die HTML-Seite anzeigt, sollten Elemente mit dem ausgeblendeten Attribut nicht sichtbar sein.

Beispiel:

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

Von Arien ausgeblendete Attribute zeigen an, dass das Element und ALLE seine Nachkommen weiterhin im Browser sichtbar sind, für Eingabehilfen wie Bildschirmleser jedoch nicht sichtbar sind.

Beispiel:

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

Schauen Sie sich auf diese . Es sollte alle Ihre Fragen beantworten.

Hinweis: ARIA steht für Accessible Rich Internet Applications

Quellen: Paciello Group

Unbekannter Oktopus
quelle
25
Dies ist nicht ganz richtig (auch die offizielle Dokumentation ist hier etwas verschwommen). Ein Element mit aria-hidden="true"ist im Browser weiterhin sichtbar, für Eingabehilfen wie Bildschirmleser jedoch nicht sichtbar.
Andrei Bârsan
aria-hiddenwird verwendet, um das Element mit Zugriffstools vor Personen zu verbergen, die Ihre Website verwenden.
Luke Brown
13

Semantischer Unterschied

Laut HTML 5.2 :

Wenn für ein Element angegeben, gibt [das hiddenAttribut] 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 deklarieren, dass Inhalte von anderen Teilen der Seite als wiederverwendet werden sollen im Gegensatz zum direkten Zugriff durch den Benutzer.

Beispiele hierfür sind eine Registerkartenliste, in der einige Bedienfelder nicht angezeigt werden, oder ein Anmeldebildschirm, der nach der Anmeldung eines Benutzers ausgeblendet wird. Ich nenne diese Dinge gerne „zeitlich relevant“, dh sie sind zeitabhängig relevant.

Auf der anderen Seite sagt ARIA 1.1 :

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

Mit anderen Worten, die Elemente mit aria-hidden="true"von dem entfernt Zugänglichkeit Baum , der die meisten Hilfstechnologien Ehren und Elementen mit aria-hidden="false"wird auf jedem Fall auf den Baum ausgesetzt werden. Elemente ohne das aria-hiddenAttribut befinden sich im Status "undefiniert (Standard)". Dies bedeutet, dass Benutzeragenten es basierend auf seinem Rendering für den Baum verfügbar machen sollten. Beispielsweise kann ein Benutzeragent entscheiden, es zu entfernen, wenn seine Textfarbe mit seiner Hintergrundfarbe übereinstimmt.

Vergleichen wir nun die Semantik. Es ist angemessen zu verwenden hidden, aber nicht aria-hidden für ein Element , das noch nicht „zeitlich relevant“ ist, aber das könnte in der Zukunft relevant wird (in diesem Fall würden Sie dynamische Skripte verwenden , um die entfernen hiddenAttribut). Im Gegensatz dazu ist es angemessen zu verwenden aria-hidden, aber nicht hiddenauf ein Element , das immer relevant ist, aber mit dem Sie nicht wollen , dass die Zugänglichkeit API Krempel; Zu diesen Elementen kann „visuelles Flair“ gehören, z. B. Symbole und / oder Bilder, die für den Benutzer nicht unbedingt erforderlich sind.

Effektiver Unterschied

Die Semantik hat vorhersehbare Auswirkungen auf Browser / Benutzeragenten. Der Grund, warum ich einen Unterschied mache, ist, dass das Verhalten von Benutzeragenten empfohlen wird , aber von den Spezifikationen nicht verlangt wird.

Das hiddenAttribut sollte ein Element vor allen Präsentationen verbergen , einschließlich Druckern und Bildschirmleseprogrammen (vorausgesetzt, diese Geräte erfüllen die HTML-Spezifikationen). Wenn Sie ein Element aus dem Eingabehilfenbaum sowie aus visuellen Medien entfernen hiddenmöchten, reicht dies aus. Verwenden Sie es jedoch nicht hidden nur, weil Sie diesen Effekt wünschen. Fragen Sie sich zuerst, ob dies hiddensemantisch korrekt ist (siehe oben). Wenn dies hiddennicht semantisch korrekt ist, Sie das Element jedoch visuell ausblenden möchten, können Sie andere Techniken wie CSS verwenden.

Elemente mit aria-hidden="true"sind nicht für den Eingabehilfenbaum verfügbar, sodass Bildschirmleser sie beispielsweise nicht ankündigen. Diese Technik sollte sorgfältig angewendet werden, da sie verschiedenen Benutzern unterschiedliche Erfahrungen bietet: Zugängliche Benutzeragenten werden sie nicht ankündigen / rendern, sie werden jedoch weiterhin auf visuellen Agenten gerendert. Dies kann eine gute Sache sein, wenn es richtig gemacht wird, aber es kann missbraucht werden.

Syntaktischer Unterschied

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

hiddenist ein boolesches Attribut , dh wenn das Attribut vorhanden ist, ist es wahr - unabhängig davon, welchen Wert es haben könnte - und wenn das Attribut fehlt, ist es falsch. Für den wahren Fall besteht die beste Vorgehensweise darin, entweder überhaupt keinen Wert ( <div hidden>...</div>) oder den leeren Zeichenfolgenwert ( <div hidden="">...</div>) zu verwenden. Ich würde es nicht empfehlen, hidden="true"da jemand, der Ihren Code liest / aktualisiert, möglicherweise hidden="false"den gegenteiligen Effekt hat, der einfach falsch ist.

aria-hiddenIm Gegensatz dazu handelt es sich um ein aufgezähltes Attribut , das eine endliche Liste von Werten ermöglicht. Wenn das aria-hiddenAttribut vorhanden ist, muss sein Wert entweder "true"oder sein "false". Wenn Sie den Status "undefiniert (Standard)" möchten, entfernen Sie das Attribut vollständig.


Lesen Sie weiter: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

chharvey
quelle
1
In diesem Beitrag der Paciello Group, 2012, heißt es: "aria-hidden = false wird in keinem Browser zugeordnet, der aria-hidden unterstützt. Daher hat seine Verwendung keine Bedeutung oder mit anderen Worten dieselbe Bedeutung wie seine Abwesenheit." Ich bin mir nicht sicher, ob dies immer noch der Fall ist, füge aber zur Vorsicht hinzu. Ich würde gerne meine a11y-Ansichtszustände getrennt von meinem CSS beschreiben, bin mir aber nicht sicher, ob dies mit aria-hidden möglich ist. developer.paciellogroup.com/blog/2012/05/…
RobW
-1

Das Setzen von aria-hidden auf false und das Umschalten auf element.show () hat bei mir funktioniert.

z.B

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

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

und wenn man sich zurück versteckt

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