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.

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.

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

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

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();