Ce sont ces attributs: `aria-labelledby " et " aria-hidden`

En utilisant Bootstrap modal, j'ai vu ces aria attributs beaucoup, mais je ne savais pas comment les utiliser.

Personne ne sait ce cas, l'utilisation de ces attributs? J'ai googlé—juste ne trouvez pas de réponses simples.

InformationsquelleAutor Hao | 2013-09-21
  1. 227

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

    Accessible Rich Internet Applications (ARIA) définit les moyens pour rendre le Web
    contenu et applications Web (en particulier celles développées avec l'Ajax et
    JavaScript) plus accessibles aux personnes handicapées.

    Pour être précis pour votre question, voici ce que vos attributs sont appelés attribut ARIA états et modèle

    aria-labelledby: Identifie l'élément (ou les éléments) que les étiquettes de l'élément courant.

    aria-hidden (state): Indique que l'élément et l'ensemble de ses descendants ne sont pas visibles ou perceptibles à tout utilisateur comme la mise en œuvre
    par l'auteur.

    InformationsquelleAutor Praveen
  2. 65

    Les principaux consommateurs de ces propriétés sont les agents utilisateurs tels que les lecteurs d'écran pour les personnes aveugles. Ainsi, dans le cas avec un Bootstrap modal, le modal est div a role="dialog". Lorsque le lecteur d'écran remarque qu'un div devient visible qui a ce rôle, il va parler de l'étiquette pour que div.

    Il y a beaucoup de façons d'étiqueter les choses (et quelques-uns avec ARIA), mais dans certains cas, il est approprié d'utiliser un élément existant comme une étiquette (sémantique) sans l'aide de la <label> balise HTML. Avec HTML modals de l'étiquette est habituellement un <h> en-tête. Ainsi, dans le Bootstrap modal cas, vous ajoutez aria-labelledby=[IDofModalHeader], et le lecteur d'écran va parler que de l'en-tête lorsque l'modale s'affiche.

    Généralement un lecteur d'écran est en train de l'observer à chaque fois que des éléments du DOM devenir visible ou invisible, de sorte que le aria-hidden propriété est souvent redondante et peut probablement être ignorée dans la plupart des cas.

    • C'est de façon plus spécifique que l'on a accepté de répondre à
    • C'est une réponse utile à l'OMI.
    InformationsquelleAutor wittjeff
  3. 20

    aria-hidden="true" permet de masquer les objets de décoration comme glyphicon les icônes de l'écran des lecteurs, qui n'a pas de sens de prononciation afin de ne pas provoquer des confusions. C'est une bonne chose à faire en tant que bonne pratique.

    InformationsquelleAutor deepak samantaray
  4. 9

    ARIA ne change pas la fonctionnalité, elle change seulement les rôles/propriétés aux utilisateurs de lecteurs d'écran. WebAIM la VAGUE de la barre d'outils identifie les rôles ARIA sur la page.

    • Ne pas changer les rôles et les propriétés ainsi que les utilisateurs de lecteurs d'écran d'obtenir une expérience différente de l'automne, en vertu de la définition même d'un changement de fonctionnalité?
    InformationsquelleAutor Harry Bosh
  5. 3

    Aria est utilisé pour améliorer l'expérience utilisateur des utilisateurs ayant une déficience visuelle. Pour les utilisateurs malvoyants, passer d'une application à l'aide de logiciel de lecteur d'écran comme JAWS, NVDA,.. lors de la navigation par le biais de l'application, logiciel de lecture d'écran annonce du 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, l'étiquette et le but du contrôle

    Aria ne change rien visuellement. (Aria a peur de designers trop).

    aria-hidden:

    attribut aria-hidden est utilisé pour masquer le contenu pour les utilisateurs déficients visuels qui naviguer à travers l'application utilisant un lecteur d'écran (JAWS, NVDA,...).

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

    Comment Utiliser: 

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

    à l'aide de l'aria-hidden = "true" sur le <i> cache de contenu pour les utilisateurs de lecteurs d'écran avec pas de changement visuel dans l'application.

    aria-label

    aria-label attribut est utilisé pour communiquer l'étiquette pour les utilisateurs de lecteurs d'écran. Habituellement champ de saisie de recherche visuelle n'est pas de l'étiquette (grâce à des designers). aria-label peut être utilisé pour communiquer de l'étiquette de contrôle pour les 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 de contrôler

    aria-labelledby

    À la fois aria-label et aria-labelledby est utilisée pour communiquer l'étiquette. Mais aria-labelledby peut être utilisé pour faire référence à une étiquette déjà présent dans la page alors que aria-label est utilisé pour communiquer l'étiquette que j'ai pas affiché visuellement

    Approche 1:

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

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

    aria-labelledby peut également être utilisé pour combiner les 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">
    InformationsquelleAutor Pavan Sai Mohan Kolli