Quels sont ces attributs: «aria-labelledby» et «aria-hidden»

En utilisant Bootstrap modal, j'ai ariabeaucoup vu ces attributs, mais je n'ai jamais su les utiliser.

Est-ce que quelqu'un sait quels cas utiliser ces attributs? J'ai cherché sur Google - je n'ai tout simplement pas trouvé de réponses simples.

L' attribut HTML5 ARIA est ce que vous recherchez. Il peut être utilisé dans votre code même sans bootstrap.

Les applications Internet riches accessibles (ARIA) définissent les moyens de rendre le contenu Web et les applications Web (en particulier celles développées avec Ajax et JavaScript) plus accessibles aux personnes handicapées.

Pour être précis dans votre question, voici comment vos attributs sont appelés états et modèle d'attribut ARIA

aria-labelledby: Identifie l'élément (ou les éléments) qui étiquetent l'élément actuel.

aria-hidden (state): Indique que l'élément et tous ses descendants ne sont visibles ou perceptibles par aucun utilisateur, tels qu'ils ont été mis en œuvre par l'auteur.

Les principaux consommateurs de ces propriétés sont les agents utilisateurs tels que les lecteurs d'écran pour les aveugles. Donc, dans le cas d'un modal Bootstrap, le modal diva role="dialog". Lorsque le lecteur d'écran remarque qu'un divdevient visible qui a ce rôle, il prononce l'étiquette pour cela div.

Il existe de nombreuses façons d'étiqueter les choses (et quelques nouvelles avec ARIA), mais dans certains cas, il est approprié d'utiliser un élément existant comme étiquette (sémantique) sans utiliser la <label>balise HTML. Avec les modaux HTML, l'étiquette est généralement un en- <h>tête. Donc, dans le cas modal Bootstrap, vous ajoutez aria-labelledby=[IDofModalHeader], et le lecteur d'écran prononcera cet en-tête lorsque le modal apparaîtra.

De manière générale, un lecteur d'écran remarquera chaque fois que les éléments DOM deviennent visibles ou invisibles, de sorte que la aria-hiddenpropriété est souvent redondante et peut probablement être ignorée dans la plupart des cas.

aria-hidden="true"masquera les éléments décoratifs tels que les icônes de glyphicon des lecteurs d'écran, qui n'ont pas de prononciation significative afin de ne pas créer de confusion. C'est une bonne chose à faire en matière de bonnes pratiques.

ARIA ne modifie pas les fonctionnalités, il modifie uniquement les rôles / propriétés présentés aux utilisateurs de lecteurs d'écran. La barre d'outils WAVE de WebAIM identifie les rôles ARIA sur la page.

Aria est utilisé pour améliorer l'expérience utilisateur des utilisateurs malvoyants. Les utilisateurs malvoyants naviguent dans l'application à l'aide d'un logiciel de lecture d'écran comme JAWS, NVDA, .. Lors de la navigation dans l'application, le logiciel de lecture d'écran annonce le contenu aux utilisateurs. Aria peut être utilisé pour ajouter du contenu dans le code qui aide les utilisateurs de lecteurs d'écran à comprendre le rôle, l'état, le libellé et le but du contrôle

Aria ne change rien visuellement. (Aria a aussi peur des designers).

aria-hidden:

L'attribut aria-hidden est utilisé pour masquer le contenu pour les utilisateurs malvoyants qui naviguent dans l'application à l'aide de lecteurs d'écran (JAWS, NVDA, ...).

L'attribut aria-hidden est utilisé avec les valeurs true, false.

Comment utiliser:

<i class = "fa fa-books" aria-hidden = "true"></i>

en utilisant aria-hidden = "true" sur le <i>contenu des peaux pour les utilisateurs de lecteurs d'écran sans changement visuel dans l'application.

aria-label

L'attribut aria-label est utilisé pour communiquer l'étiquette aux utilisateurs de lecteurs d'écran. Habituellement, le champ de saisie de recherche n'a pas d'étiquette visuelle (grâce aux concepteurs). aria-label peut être utilisé pour communiquer l'étiquette de contrôle aux utilisateurs de lecteurs d'écran

Comment utiliser:

<input type = "edit" aria-label = "search" placeholder = "search">

Il n'y a aucun changement visuel dans l'application. Mais les lecteurs d'écran peuvent comprendre le but du contrôle

aria-labelledby

Aria-label et aria-labelledby sont utilisés pour communiquer l'étiquette. Mais aria-labelledby peut être utilisé pour référencer n'importe quelle étiquette déjà présente dans la page tandis que aria-label est utilisé pour communiquer l'étiquette que je n'ai pas affichée visuellement.

Approche 1:

<span id = "sd"> Search </span>

<input type = "text" aria-labelledby = "sd">

aria-labelledby peut également être utilisé pour combiner deux étiquettes pour les utilisateurs de lecteurs d'écran

Approche 2:

<span id = "de"> Billing Address </span>

<span id = "sd"> First Name </span>

<input type = "text" aria-labelledby = "de sd">