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-hidden
und hidden
Attribut.
256
Antworten:
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 die Browser an, das Element nicht anzuzeigen. Diearia-hidden
Eigenschaft 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.
quelle
hidden
bedeutet für alle verborgen.aria-hidden
bedeutet 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.hidden
Sollte den Bildschirmleser daran hindern, auf den Inhalt des Tags zuzugreifen.aria-hidden
ist richtig; Sie sagten jedoch nichts darüberhidden
, um es zu unterscheidenaria-hidden
. Dies ist leider die beste Antwort. Bitte seien Sie bei Ihren Antworten gründlicher.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:
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:
Schauen Sie sich auf diese . Es sollte alle Ihre Fragen beantworten.
Hinweis: ARIA steht für Accessible Rich Internet Applications
Quellen: Paciello Group
quelle
aria-hidden="true"
ist im Browser weiterhin sichtbar, für Eingabehilfen wie Bildschirmleser jedoch nicht sichtbar.aria-hidden
wird verwendet, um das Element mit Zugriffstools vor Personen zu verbergen, die Ihre Website verwenden.Semantischer Unterschied
Laut HTML 5.2 :
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 :
Mit anderen Worten, die Elemente mit
aria-hidden="true"
von dem entfernt Zugänglichkeit Baum , der die meisten Hilfstechnologien Ehren und Elementen mitaria-hidden="false"
wird auf jedem Fall auf den Baum ausgesetzt werden. Elemente ohne dasaria-hidden
Attribut 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 nichtaria-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 entfernenhidden
Attribut). Im Gegensatz dazu ist es angemessen zu verwendenaria-hidden
, aber nichthidden
auf 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
hidden
Attribut 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 entfernenhidden
möchten, reicht dies aus. Verwenden Sie es jedoch nichthidden
nur, weil Sie diesen Effekt wünschen. Fragen Sie sich zuerst, ob dieshidden
semantisch korrekt ist (siehe oben). Wenn dieshidden
nicht 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.
hidden
ist 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öglicherweisehidden="false"
den gegenteiligen Effekt hat, der einfach falsch ist.aria-hidden
Im Gegensatz dazu handelt es sich um ein aufgezähltes Attribut , das eine endliche Liste von Werten ermöglicht. Wenn dasaria-hidden
Attribut 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
quelle
Das Setzen von aria-hidden auf false und das Umschalten auf element.show () hat bei mir funktioniert.
z.B
und wenn man sich zurück versteckt
quelle