web-dev-qa-db-fra.com

Quelle est la différence entre les attributs HTML "cachés" et les attributs "aria-hidden"?

J'ai vu l'attribut aria partout lorsque je travaillais avec Angular Material. Quelqu'un peut-il m'expliquer ce que signifie le préfixe aria? mais le plus important ce que j'essaie de comprendre est la différence entre les attributs aria-hidden et hidden.

html5wai-aria
198
Daniel Kobe

ARIA (Applications Internet riches accessibles) définit un moyen de rendre le contenu Web et les applications Web plus accessibles aux personnes handicapées.

L'attribut hidden est nouveau dans HTML5 et indique à navigateurs de ne pas afficher l'élément. La propriété aria-hidden indique à screen-readers s'ils doivent ignorer l'élément. Jetez un coup d'œil à la documentation w3 pour plus de détails:

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

L'utilisation de ces normes peut faciliter l'utilisation d'Internet pour les personnes handicapées.

294
Leo Farmer

Différence sémantique

Selon HTML 5.2 :

Lorsqu'il est spécifié sur un élément, [l'attribut hidden] indique que l'élément n'est pas, ou n'est plus, directement pertinent pour l'état actuel de la page, ou qu'il est utilisé pour déclarer le contenu à réutiliser par d'autres parties de la page. par opposition à être directement accessible par l'utilisateur.

Les exemples incluent une liste d'onglets où certains panneaux ne sont pas exposés, ou un écran de connexion qui disparaît après qu'un utilisateur se soit connecté. J'aime appeler ces éléments «temporellement pertinents», c.-à-d. Qu'ils sont pertinents en fonction du moment.

D'autre part, ARIA 1.1 dit:

[L'état aria-hidden] indique si un élément est exposé à l'API d'accessibilité.

En d'autres termes, les éléments avec aria-hidden="true" sont supprimés de l'arborescence accessibility , ce que la plupart des technologies d'assistance honorent, et les éléments avec aria-hidden="false" seront définitivement exposés à l'arborescence. Les éléments sans l'attribut aria-hidden sont à l'état "non défini (par défaut)", ce qui signifie que les agents utilisateurs doivent l'exposer à l'arborescence en fonction de son rendu. Par exemple. un agent utilisateur peut décider de le supprimer si la couleur de son texte correspond à celle de l'arrière-plan.

Différence effective

Les sémantiques ont des effets prévisibles dans les navigateurs/agents utilisateurs. La raison pour laquelle je distingue est que le comportement de l'agent utilisateur est recommandé _, mais pas obligatoire par les spécifications.

L'attribut hidden doit masquer un élément des toutes présentations, y compris les imprimantes et les lecteurs d'écran (en supposant que ces périphériques respectent les spécifications HTML). Si vous souhaitez supprimer un élément de l'arborescence d'accessibilité ainsi que média visuel, hidden ferait l'affaire. Cependant, n'utilisez pas hiddenjuste parce que vous voulez cet effet. Demandez-vous si hidden est sémantiquement correct en premier (voir ci-dessus). Si hidden n'est pas sémantiquement correct, mais que vous souhaitez toujours masquer visuellement l'élément, vous pouvez utiliser d'autres techniques telles que CSS.

Et, en supposant que la technologie d'assistance d'un utilisateur respecte les spécifications ARIA, elle n'exposera pas d'élément avec aria-hidden="true" à l'utilisateur. Cela serait utile pour «le flair visuel», par exemple. icônes, images, etc. qu'il n'est pas indispensable de consommer.

Différence syntaxique

Enfin, il existe une différence de syntaxe entre les deux attributs. 

hidden est un attribut boolean, ce qui signifie que si l'attribut est présent, il est vrai - quelle que soit sa valeur - et si l'attribut est absent, il est faux. Dans le cas réel, la meilleure pratique consiste à n'utiliser aucune valeur (<div hidden>...</div>) ou la valeur de chaîne vide (<div hidden="">...</div>). Je recommanderais nonhidden="true" car quelqu'un qui lit/met à jour votre code pourrait en déduire que hidden="false" aurait l'effet inverse, ce qui est tout simplement incorrect.

aria-hidden, en revanche, est un attribut enuméré, permettant une liste de valeurs finie. Si l'attribut aria-hidden est présent, sa valeur doit être "true" ou "false". Si vous voulez l'état "indéfini (par défaut)", supprimez complètement l'attribut.

Pour en savoir plus: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

6
chharvey

définir aria-hidden sur false et l'activer pour element.show () a fonctionné pour moi.

par exemple

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

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

et quand se cacher

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