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

L'attribut hidden est nouveau dans HTML5 et indique aux navigateurs de ne pas afficher l'élément. La propriété aria-hidden indique aux lecteurs d'écran s'ils doivent ignorer l'élément. Consultez la documentation du W3 pour plus de détails :

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

[1] : http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden

L'utilisation de ces normes peut faciliter l'utilisation du web par les personnes handicapées.

Un attribut caché est un attribut booléen (vrai/faux). Lorsque cet attribut est utilisé sur un élément, il supprime toute pertinence à cet élément. Lorsqu'un utilisateur visualise la page html, les éléments dotés de l'attribut hidden ne doivent pas être visibles.

Exemple :

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

Les attributs Aria-hidden indiquent que l'élément et TOUS ses descendants sont toujours visibles dans le navigateur, mais seront invisibles pour les outils d'accessibilité, tels que les lecteurs d'écran.

Exemple :

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

Jetez un oeil à [ceci] (http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/). Il devrait répondre à toutes vos questions.

**Remarque : ARIA signifie Accessible Rich Internet Applications (applications Internet riches accessibles).

Sources: Paciello Group

Différence sémantique

Selon [HTML 5.2] (https://www.w3.org/TR/html52/editing.html#the-hidden-attribute) :

Lorsqu'il est spécifié sur un élément, [l'attribut hidden] indique que l'élément n'est pas encore, ou n'est plus, directement pertinent pour l'état actuel de la page, ou qu'il est utilisé pour déclarer un contenu qui sera réutilisé par d'autres parties de la page, par opposition à un accès direct par l'utilisateur.

Il peut s'agir, par exemple, d'une liste d'onglets dont certains panneaux ne sont pas exposés, ou d'un écran de connexion qui disparaît après que l'utilisateur s'est connecté. J'aime appeler ces choses "pertinentes dans le temps", c'est-à-dire qu'elles sont pertinentes en fonction du moment.

D'un autre côté, [ARIA 1.1] (https://www.w3.org/TR/wai-aria-1.1/#aria-hidden) dit que :

[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 retirés de l'arbre d'accessibilité, que la plupart des technologies d'assistance respectent, et les éléments avec aria-hidden="false" seront définitivement exposés à l'arbre. Les éléments sans l'attribut aria-hidden sont dans l'état "undefined (default)&quot ;, ce qui signifie que les agents utilisateurs doivent les exposer à l'arbre en fonction de leur rendu. Par exemple, un agent utilisateur peut décider de le supprimer si sa couleur de texte correspond à sa couleur de fond.

Maintenant, comparons la sémantique. Il est approprié d'utiliser hidden, mais pas aria-hidden, pour un élément qui n'est pas encore "temporellement pertinent", mais qui pourrait le devenir dans le futur (dans ce cas, vous utiliseriez des scripts dynamiques pour supprimer l'attribut hidden). À l'inverse, il convient d'utiliser l'attribut aria-hidden, mais pas l'attribut hidden, pour un élément qui est toujours pertinent, mais avec lequel vous ne voulez pas encombrer l'API d'accessibilité ; de tels éléments peuvent inclure des "éléments visuels", comme des icônes et/ou des images qui ne sont pas essentiels pour l'utilisateur.

Différence effective

La sémantique a des effets prévisibles dans les navigateurs/agents utilisateurs. La raison pour laquelle je fais une distinction est que le comportement des agents utilisateurs est recommandé, mais pas exigé par les spécifications.

L'attribut hidden devrait cacher un élément de toutes les présentations, y compris les imprimantes et les lecteurs d'écran (en supposant que ces dispositifs respectent les spécifications HTML). Si vous voulez supprimer un élément de l'arbre d'accessibilité ainsi que des supports visuels, hidden fera l'affaire. Cependant, n'utilisez pas hidden juste parce que vous voulez cet effet. Demandez-vous d'abord si hidden est sémantiquement correct (voir ci-dessus). Si hidden n'est pas sémantiquement correct, mais que vous voulez quand même cacher visuellement l'élément, vous pouvez utiliser d'autres techniques comme les CSS.

Les éléments avec aria-hidden="true" ne sont pas exposés à l'arbre d'accessibilité, donc par exemple, les lecteurs d'écran ne les annonceront pas. Cette technique doit être utilisée avec précaution, car elle offre des expériences différentes selon les utilisateurs : les agents d'utilisateurs accessibles ne les annoncent pas, mais ils sont tout de même rendus par les agents visuels. Cela peut être une bonne chose lorsque cela est fait correctement, mais il est possible d'en abuser.

Différence syntaxique

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

hidden est un attribut booléen, ce qui signifie que si l'attribut est présent, il est vrai - quelle que soit la valeur qu'il puisse avoir - et si l'attribut est absent, il est faux. Pour le cas vrai, la meilleure pratique est de ne pas utiliser de valeur du tout (<div hidden>...</div>), ou la valeur de la chaîne vide (<div hidden="">...</div>). Je ne recommanderais pas hidden="true" car quelqu'un qui lirait/mettrait à jour votre code pourrait en déduire que hidden="false" aurait l'effet inverse, ce qui est tout simplement incorrect.

En revanche, aria-hidden est un attribut numérique, permettant une valeur parmi une liste finie de valeurs. Si l'attribut aria-hidden est présent, sa valeur doit être soit "true" soit "false". Si vous voulez l'état "undefined (default)&quot", supprimez l'attribut.

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