Est-il un équivalent de l'attribut “alt” pour les éléments div?

Essayer role="listitem" ou role="group" et aria-labelledby="shopping cart items". Voir Exemple 1. Le 2 est du contenu du texte qui doit être lu par le lecteur d'écran déjà avec l'attribut lecture que le contexte du contenu. Reportez-vous à cette section.

Mise à JOUR 2

Ajouter aria-readonly=true role=textbox si vous utilisez une entrée. Si il y a des doutes quant à l'utilisation aria-label ou aria-labelledby, lisez ce l'article. Dans le la documentation pour des MÂCHOIRES et de le tester moi-même soutient le fait que aria-label est ignoré. En outre, la sémantique est très importante lorsque l'accessibilité est votre préoccupation. À l'aide d'une div lorsque vous pouvez utiliser une entrée n'est pas sémantiquement son et comme je l'ai dit avant, les MÂCHOIRES, accepterait un élément de formulaire, plus facilement qu'un div. Je suppose que ce "panier" est une forme ou d'une partie d'un formulaire, et si vous n'aimez pas ses frontières, input {border: 0 none transparent} ou de l'utilisation <output>* ce qui serait Un+ aussi loin que la sémantique sont concernés.

Désolé, @RadekPech a rappelé à moi, j'ai oublié d'ajouter que l'utilisation de aria-labelledby besoins de texte visible et que le texte a besoin d'un id qui est également sur la liste des valeur(s) de aria-labelledby. Si vous ne voulez pas de texte à cause de l'esthétique, de l'utilisation color: transparent, line-height: 0, ou color:<same as background>. Qui devrait satisfaire de visibilité que le DOM est concerné* et encore invisible à l'œil nu. Gardez à l'esprit que ces mesures sont parce que les MÂCHOIRES ignore aria-label.

*non testé

EXEMPLE 3

<span id="shopping">Shopping</span>&nbsp;
<span id="cart">Cart</span>&nbsp;
<span id="items">Items</span>&nbsp;
<input id='cart' tabindex="0" aria-readonly=true readonly role="textbox" aria-labelledby="shopping cart items" value='2'>

---

Mise à JOUR de 1

Pour les MÂCHOIRES, vous devrez probablement configurer un peu:

1. Cliquez sur le Utilitaires élément de menu.
2. Puis Paramètres > Center.
3. de la Parole et des Sons Schémas
4. Modiy Régime...
5. HTML Onglet

Dans cette boîte de dialogue, vous pouvez ajouter des attributs spécifiques et ce qui est dit quand un élément est tabulés. MÂCHOIRES se répondent pour former des éléments plus facile, car ils peuvent déclencher la focus événement. Vous aurez un temps plus facile de faire Exemple 2 à la place:

EXEMPLE 1

<div id=myCoolDiv tabindex="0" role="listitem" aria-labelledby="shopping cart items"> 2 <div>

EXEMPLE 2

<input id='semantic' tabindex="0" role="listitem" aria-labelledby="shopping cart items" value='2' readonly>

Dans le cas où vous utilisez Bootstrap Cadre il y a une solution rapide et facile. Vous devez utiliser sr-only ou sr-only sr-only-focusable Bootstrap CSS les classes dans un span élément où votre screen-reader-only texte sera écrit.

Vérifiez l'exemple suivant, un span élément avec la classe glyphicon glyphicon-shopping-cart est également utilisé comme icône de panier.

<div id="myCoolDiv">
<h5>
<span class="glyphicon glyphicon-shopping-cart"></span> 2  
<span class="sr-only sr-only-focusable" tabindex="0">shopping cart items</span>
</h5>
<div>

Sortie de Lecteur d'écran: "deux panier articles"

• fournis par Les Crocs D'Un Lecteur D'Écran De L'Émulateur Addon pour Firefox

Vous pouvez trouver ci-dessus exemple de travail dans ce: Violon

Comme suggéré par Oriol, dans le cas où vous n'utilisez pas Bootstrap Cadre puis il suffit d'ajouter la ligne suivante dans votre fichier CSS.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

Selon la texte de remplacement d'algorithme de calcul de la W3C et la
Accessibles de Nom et de Description: Calcul et de l'API Mappages 1.1 vous devriez certainement utiliser aria-label.

Cela étant dit, il ne fonctionne pas avec des Mâchoires, c'est une honte pour un tel outil cher.

L'autre option est d'utiliser un lien qui vous permettra d'aller à la page de votre panier, en utilisant à la fois title et aria-label pour satisfaire tout le monde:

<a href="#cart" title="2 shopping cart items" aria-label="2 shopping cart items">2</a>

Vous pouvez également utiliser un transparent de 1 pixel option:

2 <img src="pixel.png" height="1" width="1" alt="shopping cart items" />

Vous pouvez créer une classe comme screen-reader-text avec le code css suivant:

.screen-reader-text { 
   clip: rect(1px, 1px, 1px, 1px); 
   height: 1px; 
   width: 1px; 
   overflow: hidden; 
   position: absolute !important;
}

Puis, dans votre code, vous pouvez simplement ajouter un <span> avec le lecteur d'écran texte ainsi:

<div>
I am a div!
<span class="screen-reader-text">This is my screen reader text</span> 
</div>

Voir un exemple ici: https://jsfiddle.net/zj1zuk9y/

(Source: http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/)