J'ai vu l'attribut aria partout en travaillant avec du matériel angulaire. Quelqu'un peut-il m'expliquer ce que signifie le préfixe aria? mais le plus important, ce que j'essaie de comprendre, c'est la différence entre aria-hiddenet hiddenattribut.

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

L' hiddenattribut est nouveau en HTML5 et indique aux navigateurs de ne pas afficher l'élément. La aria-hiddenpropriété indique aux lecteurs d'écran s'ils doivent ignorer l'élément. Jetez un œil aux documents 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 pour les personnes handicapées.

Un attribut masqué est un attribut booléen (Vrai / Faux). Lorsque cet attribut 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'attribut caché ne doivent pas être visibles.

Exemple:

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

Les attributs caché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:

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

Jeter un coup d'œil à cela . 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 :

Lorsqu'il est spécifié sur un élément, [l' hiddenattribut] 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 du contenu devant être réutilisé par d'autres parties de la page comme au lieu d'ê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 connecte. J'aime appeler ces choses «temporellement pertinentes» c'est-à-dire qu'elles sont pertinentes en fonction du calendrier.

D'un autre côté, ARIA 1.1 dit:

[L' aria-hiddenétat] 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 d'accessibilité , que la plupart des technologies d'assistance honorent, et les éléments avec aria-hidden="false"seront certainement exposés à l'arborescence. Les éléments sans l' aria-hiddenattribut 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 sa couleur de texte correspond à sa couleur d'arrière-plan.

Comparons maintenant la sémantique. Il convient d'utiliser hidden, mais pas aria-hidden , un élément qui n'est pas encore «temporellement pertinent», mais qui pourrait devenir pertinent à l'avenir (auquel cas vous utiliseriez des scripts dynamiques pour supprimer l' hiddenattribut). Inversement, il convient d'utiliser aria-hidden, mais pas hidden, sur un élément toujours pertinent, mais avec lequel vous ne voulez pas encombrer l'API d'accessibilité; ces éléments peuvent inclure un «flair visuel», comme des icônes et / ou des images qui ne sont pas essentielles pour l'utilisateur.

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 requis par les spécifications.

L' hiddenattribut doit masquer un élément de toutes les présentations, y compris les imprimantes et les lecteurs d'écran (en supposant que ces appareils respectent les spécifications HTML). Si vous souhaitez supprimer un élément de l'arborescence d'accessibilité ainsi que des supports visuels, hiddenferait l'affaire. Cependant, ne l'utilisez pas hidden simplement parce que vous voulez cet effet. Demandez-vous d'abord si hiddenc'est sémantiquement correct (voir ci-dessus). Si hiddenn'est pas sémantiquement correct, mais que vous souhaitez toujours masquer visuellement l'élément, vous pouvez utiliser d'autres techniques telles que CSS.

Les éléments avec aria-hidden="true"ne sont pas exposés à l'arborescence d'accessibilité, par exemple, les lecteurs d'écran ne les annonceront pas. Cette technique doit être utilisée avec précaution, car elle offrira différentes expériences à différents utilisateurs: les agents utilisateurs accessibles ne les annonceront pas / ne les rendront pas, mais ils sont toujours rendus sur les agents visuels. Cela peut être une bonne chose une fois fait correctement, mais il a le potentiel d'être abusé.

Différence syntaxique

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

hiddenest un attribut booléen , 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. Pour le vrai cas, la meilleure pratique consiste à ne pas utiliser de valeur du tout ( <div hidden>...</div>) ou la valeur de chaîne vide ( <div hidden="">...</div>). Je ne recommanderais pashidden="true" car quelqu'un lisant / mettant à jour votre code pourrait en déduire que hidden="false"cela aurait l'effet inverse, ce qui est tout simplement incorrect.

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

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

définir aria-hidden sur false et le basculer sur element.show () a fonctionné pour moi.

par exemple

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

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

et en se cachant

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