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

L’atsortingbut 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. Jetez un coup d’œil aux documents de 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 du Web par les personnes handicapées.

Un atsortingbut masqué est un atsortingbut booléen (True / False). Lorsque cet atsortingbut est utilisé sur un élément, il supprime toute pertinence pour cet élément. Lorsqu’un utilisateur affiche la page HTML, les éléments avec l’atsortingbut masqué ne doivent pas être visibles.

Exemple:

Les atsortingbuts masqués par Aria 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:

  
You can't see this 

Regardez ça . Il devrait répondre à toutes vos questions.

Remarque: ARIA signifie «Accessible Rich Internet Applications»

Sources: Groupe Paciello

Différence sémantique

Selon HTML 5.2 :

Lorsque spécifié sur un élément, [l’atsortingbut hidden ] indique que l’élément n’est pas encore ou n’est plus directement lié à 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. au lieu d’être directement accessible par l’utilisateur.

Les exemples incluent une liste d’tabs 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 choses «temporellement pertinentes», c’est-à-dire qu’elles sont pertinentes en fonction du moment.

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’ arbre d’accessibilité , dont la plupart des technologies d’assistance, et les éléments avec aria-hidden="false" seront certainement exposés à l’arborescence. Les éléments sans l’atsortingbut aria-hidden sont dans 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 sa couleur de texte correspond à la couleur d’arrière-plan.

Différence efficace

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 de l’agent utilisateur est recommandé , mais n’est pas requirejs par les spécifications.

L’atsortingbut hidden doit masquer un élément de toutes les 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 le média visuel, hidden ferait l’affaire. Cependant, n’utilisez pas hidden juste 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 un élément avec aria-hidden="true" à l’utilisateur. Cela serait utile pour le «flair visuel», par exemple les icons, les images, etc., qui n’est pas essentiel pour l’utilisateur.

Différence syntaxique

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

hidden est un atsortingbut booléen , ce qui signifie que si l’atsortingbut est présent, il est vrai – quelle que soit la valeur qu’il pourrait avoir – et si l’atsortingbut est absent, il est faux. Pour le cas vrai, la meilleure pratique consiste à utiliser soit aucune valeur (

), soit la valeur de chaîne vide (

). Je ne recommanderais pas hidden="true" car quelqu’un qui lit / met à jour votre code peut en déduire que hidden="false" aurait l’effet inverse, ce qui est simplement incorrect.

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

Lectures complémentaires: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content