Ich habe das aria-Attribut überall gesehen, während ich mit Angular Material arbeite. Kann mir jemand erklären, was das aria-Präfix bedeutet? aber vor allem, was ich versuche zu verstehen, ist der Unterschied zwischen aria-hidden
und hidden
Attribut.
ARIA (Accessible Rich Internet Applications) definiert eine Methode, um Webinhalte und Webanwendungen für Menschen mit Behinderungen zugänglicher zu machen.
Das Attribut "hidden" ist neu in HTML5 und teilt Browsern mit, dass das Element nicht angezeigt werden soll. Die Eigenschaft "aria-hidden" teilt Bildschirmlesern mit, ob sie das Element ignorieren sollen. Weitere Einzelheiten finden Sie in den w3-Dokumenten:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
Die Verwendung dieser Standards kann es behinderten Menschen erleichtern, das Internet zu nutzen.
Ein verborgenes Attribut ist ein boolesches Attribut (Wahr/Falsch). Wenn dieses Attribut für ein Element verwendet wird, verliert es jegliche Relevanz für dieses Element. Wenn ein Benutzer die HTML-Seite aufruft, sollten Elemente mit dem Attribut hidden nicht sichtbar sein.
Beispiel:
<p hidden>You can't see this</p>
Aria-hidden-Attribute zeigen an, dass das Element und ALLE seine Nachkommen im Browser noch sichtbar sind, aber für Eingabehilfen wie Screenreader unsichtbar sind.
Beispiel:
<p aria-hidden="true">You can't see this</p>
Werfen Sie einen Blick auf dies. Es sollte alle Ihre Fragen beantworten.
Anmerkung: ARIA steht für Accessible Rich Internet Applications
Quellen: Paciello Group
Gemäß [HTML 5.2] (https://www.w3.org/TR/html52/editing.html#the-hidden-attribute):
Wenn es für ein Element angegeben ist, zeigt [das Attribut hidden
] an, dass das Element noch nicht oder nicht mehr direkt für den aktuellen Zustand der Seite relevant ist, oder dass es verwendet wird, um Inhalte zu deklarieren, die von anderen Teilen der Seite wiederverwendet werden, anstatt dass der Benutzer direkt darauf zugreifen kann.
Beispiele hierfür sind eine Registerkartenliste, bei der einige Felder nicht sichtbar sind, oder ein Anmeldebildschirm, der nach der Anmeldung des Benutzers verschwindet. Ich nenne diese Dinge gerne "zeitlich relevant", d. h. sie sind zeitlich relevant.
Andererseits sagt ARIA 1.1:
[Der aria-hidden
Status] zeigt an, ob ein Element der Accessibility API ausgesetzt ist.
Mit anderen Worten, Elemente mit aria-hidden="true"
werden aus dem [Zugänglichkeitsbaum] (https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree) entfernt, was die meisten Hilfstechnologien honorieren, und Elemente mit aria-hidden="false"
werden definitiv dem Baum ausgesetzt. Elemente ohne das Attribut aria-hidden
sind im "undefined (default)" Zustand, was bedeutet, dass User Agents sie dem Tree basierend auf ihrer Darstellung zugänglich machen sollten. Ein User-Agent kann z.B. entscheiden, es zu entfernen, wenn seine Textfarbe mit der Hintergrundfarbe übereinstimmt.
Lassen Sie uns nun die Semantik vergleichen. Es ist angemessen, hidden
zu verwenden, aber nicht aria-hidden
, für ein Element, das noch nicht "zeitlich relevant" ist, aber in der Zukunft relevant werden könnte (in diesem Fall würden Sie dynamische Skripte verwenden, um das Attribut hidden
zu entfernen). Umgekehrt ist es angebracht, aria-hidden
, aber nicht hidden
, für ein Element zu verwenden, das immer relevant ist, aber mit dem Sie die Zugänglichkeits-API nicht überfrachten wollen; solche Elemente könnten "visuelles Flair" enthalten, wie Icons und/oder Bilder, die für den Benutzer nicht unbedingt notwendig sind, um sie zu nutzen.
Die Semantik hat vorhersehbare Auswirkungen in Browsern/Benutzeragenten. Der Grund, warum ich eine Unterscheidung mache, ist, dass das Verhalten der User Agents von den Spezifikationen empfohlen, aber nicht erforderlich ist.
Das "hidden"-Attribut sollte ein Element vor allen Darstellungen verbergen, einschließlich Druckern und Bildschirmlesern (vorausgesetzt, diese Geräte beachten die HTML-Spezifikationen). Wenn Sie ein Element aus dem Zugänglichkeitsbaum sowie aus visuellen Medien entfernen wollen, würde hidden
den Zweck erfüllen. Verwenden Sie hidden
jedoch nicht, nur weil Sie diesen Effekt wünschen. Fragen Sie sich zuerst, ob hidden
semantisch korrekt ist (siehe oben). Wenn hidden
semantisch nicht korrekt ist, Sie das Element aber trotzdem visuell verstecken wollen, können Sie andere Techniken wie CSS verwenden.
Elemente mit "aria-hidden="true"` werden nicht im Zugänglichkeitsbaum angezeigt, so dass sie z. B. von Screenreadern nicht erkannt werden. Diese Technik sollte mit Bedacht eingesetzt werden, da sie verschiedenen Benutzern unterschiedliche Erfahrungen bietet: Zugängliche Benutzeragenten zeigen sie nicht an, aber sie werden trotzdem von visuellen Agenten dargestellt. Dies kann eine gute Sache sein, wenn es richtig gemacht wird, aber es hat auch das Potenzial, missbraucht zu werden.
Schließlich gibt es noch einen Unterschied in der Syntax der beiden Attribute.
hidden" ist ein Boolesches Attribut, d.h. wenn das Attribut vorhanden ist, ist es wahr - ungeachtet des Wertes, den es haben könnte - und wenn das Attribut nicht vorhanden ist, ist es falsch. Für den wahren Fall ist es am besten, entweder gar keinen Wert zu verwenden (<div hidden>...</div>
), oder den leeren String-Wert (<div hidden="">...</div>
). Ich würde nicht hidden="true"
empfehlen, weil 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 einen von einer endlichen Liste von Werten erlaubt. Wenn das Attribut "aria-hidden" vorhanden ist, muss sein Wert entweder "true" oder "false" sein. Wenn Sie den Zustand "undefined (default)" wünschen, entfernen Sie das Attribut ganz.
Weitere Lektüre: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content