Quels sont ces attributs: `aria-labelledby` et` aria-hidden`
En utilisant Bootstrap modal, j'ai beaucoup vu ces attributs aria, mais je n'ai jamais su comment les utiliser.
Est-ce que quelqu'un sait dans quels cas utiliser ces attributs? J'ai cherché sur Google, mais je n'ai pas trouvé de réponse simple.
HTML5 ARIA l'attribut est ce que vous recherchez. Il peut être utilisé dans votre code même sans bootstrap.
Applications Internet riches accessibles (ARIA) définit 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 s'appellent états et modèle d'attribut ARIA
aria-labelledby: Identifie l'élément (ou les éléments) qui étiquette l'élément en cours.
aria-hidden (state): Indique que l'élément et tous ses descendants ne sont visibles ou perceptibles par aucun utilisateur tels qu'ils sont mis en œuvre par l'auteur.
Les principaux utilisateurs de ces propriétés sont les utilisateurs, tels que les lecteurs d'écran pour personnes aveugles. Donc, dans le cas d'un modal Bootstrap, le div du modal a role="dialog". Lorsque le lecteur d'écran remarque qu'un div devenant visible avec ce rôle, il prononce l'étiquette de ce div.
Il y a beaucoup de façons d'étiqueter des 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 balise HTML <label>. Avec les modaux HTML, l’étiquette est généralement un en-tête <h>. Ainsi, dans le cas du modal Bootstrap, vous ajoutez aria-labelledby=[IDofModalHeader], et le lecteur d'écran lira cet en-tête lorsque le modal apparaîtra.
En règle générale, un lecteur d'écran remarquera que les éléments DOM deviennent visibles ou invisibles. La propriété aria-hidden est donc souvent redondante et peut probablement être ignorée.
aria-hidden="true" cachera des éléments décoratifs, tels que les icônes de glyphicon, aux lecteurs d’écran, dont la prononciation n’a pas de sens, afin de ne pas causer de confusion. C'est une bonne chose à faire en matière de bonnes pratiques.
ARIA ne modifie pas les fonctionnalités, il ne modifie que les rôles/propriétés présentés aux utilisateurs du lecteur d'écran. 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 lecteur d'écran tel que JAWS, NVDA, .. Lors de la navigation dans l'application, le logiciel de lecteur d'écran annonce le contenu aux utilisateurs. Aria peut être utilisé pour ajouter du contenu dans le code, ce 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 peur des concepteurs aussi).
aria-hidden:
l'attribut aria-hidden est utilisé pour masquer le contenu destiné aux utilisateurs malvoyants qui naviguent dans une 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>
l'utilisation de aria-hidden = "true" sur le <i> masque le contenu destiné aux utilisateurs de lecteurs d'écran sans aucun changement visuel dans l'application.
aria-label
l'attribut aria-label est utilisé pour communiquer l'étiquette aux utilisateurs de lecteurs d'écran. Généralement, le champ de saisie de la recherche n’a pas d’étiquette visuelle (merci 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 pas de 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 tous deux utilisés pour communiquer l'étiquette. Mais aria-labelledby peut être utilisé pour référencer toute étiquette déjà présente dans la page, tandis que aria-label est utilisé pour communiquer l'étiquette qui ne s'affiche pas 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">