web-dev-qa-db-fra.com

Existe-t-il un équivalent de l'attribut "alt" pour les éléments div?

Les lecteurs d'écran liront la chaîne définie sur l'attribut "alt". L'utilisation de cet attribut est spécifiquement pour les balises d'image.

Si j'ai une div comme ça:

<div id=myCoolDiv tabindex="0"> 2 <div>

Existe-t-il un moyen de faire en sorte qu'un lecteur d'écran récupère un attribut pour lire une chaîne de la même manière qu'une balise alt est utilisée?

Donc, pour les divs énumérés ci-dessous, le lecteur d’écran dira: "articles du panier 2"?

J'ai essayé d'utiliser aria-label mais le lecteur d'écran ne le détecte pas:

<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>
javascripthtmlcssaccessibilityscreen-readers
31
Kode_12

Spróbuj role="listitem" lub role="group" i aria-labelledby="shopping cart items". Zobacz Przykład 1 . KOD 2 Zobacz à sekcja .

AKTUALIZACJA 2

Dodaj kod aria-readonly=truerole=textbox, jeśli używasz wejścia. Jeśli istnieją wątpliwości, czy użyć aria-label lub aria-labelledby, przeczytaj to artykuł . W dokumentacja dla JAWS i testowanie va osobiście obsługuje fakt, Le aria-label jest ignorowany. Ponadto semantyka jest bardzo ważna, gdy chodzi o dostępność. Używanie div, gdy można użyć wejścia, rien n’est semantycznie rozsądne i, jak powiedziałem wcześniej, JAWS chętniej akceptuje élément formularza ni div. Zakładam, les dix "koszyk" jest formá lub częścią formularza, un jeśli nie lubisz jego granic, input {border: 0 none transparent} lub użyj <output> *, par Byby by A +, jeśli chodzi o semantykę.

Przepraszam, przypomniał mi @RadekPech; Zapomniałem dodać, e użycie aria-labelledby wymaga widocznego tekstu i i t tekst potrzebuje identyfikatora, który jest również wymieniony jako wartość aria-labelledby. Jeśli nie chcesz tekstu ze względu na estetykę, color: transparent, line-height: 0 lub color:<same as background>. Powinno zaspokoić widoczność w odniesieniu do DOM * i nadal być niewidoczne gołym okiem. Pamiętaj, les règles du jeu, les JAWS ignoruje aria-label.

* niesprawdzony

PRZYKŁAD 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'>

AKTUALIZACJA 1

W przypadku JAWS prawdopodobnie musisz go trochę skonfigurować:

  1. KliknijUtilitiespozycja w menu.
  2. NastępnieSettings Center.
  3. Speech and Sounds Schemes
  4. Modiy Scheme...
  5. HTMLPatka

Cliquez sur OK pour voir plus de détails sur ce sujet, découvrez le code de la souris, élément gdy jest kartowany. JAWS będzie łatwiej odpowiadać est un élément de base, ponieważ mogą wywołać zdarzenie focus. Będziesz mieć łatwiejszy czas do wykonania Przykład 2 zamiast:

PRZYKŁAD 1

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

PRZYKŁAD 2

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

Il existe deux manières (qui peuvent être combinées) d’avoir un lecteur d’écran pour lire un texte alternatif:

  1. Tout ce qui a le rôle ARIA img peut (DOIT) avoir l'attribut alt. Voir WAI-ARIA img role .

    <div role="img" alt="heart">
♥︎
</div>

Toutefois, cela ne doit être utilisé que dans le cas où l'élément représente réellement une image (par exemple, le caractère Unicode du cœur).

  1. Si un élément contient du texte réel, qui nécessite simplement une lecture différente, vous devez définir le rôle ARIA sur text et ajouter aria-label avec tout ce que vous souhaitez lire. Voir Rôle du texte WAI-ARIA .

    <div role=text aria-label="Rating: 60%">
Rating: ★★★☆☆︎
</div>

Ne pas faire correspondre ce code avec aria-labeledby qui devrait contenir l'ID d'un élément associé.

  1. Vous pouvez combiner les deux cas précédents en un seul en utilisant deux rôles ARIA et en ajoutant alt et aria-label:

    <div role="img text" alt="heart" aria-label="heart">
♥︎
</div>

Lorsque plusieurs rôles ARIA sont définis, le navigateur doit utiliser le premier qui est pris en charge et traiter l'élément avec ce rôle.

Une dernière chose importante est que vous devez définir le type de page sur HTML5 (qui prend en charge ARIA de par sa conception).

<!DOCTYPE html>

L'utilisation de HTML4 ou XHTML nécessite une DTD spéciale pour activer le support ARIA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
   "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
4
Radek Pech

Si vous utilisez Framework Bootstrap , il existe une solution simple et rapide. Vous devez utiliser sr-only ou sr-only sr-only-focusable CSS classes de Bootstrap dans un élément span où votre texte screen-reader-only sera écrit. 

Dans l'exemple suivant, un élément span avec la classe glyphicon glyphicon-shopping-cart est également utilisé en tant qu'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 du lecteur d'écran: _ ​​"deux éléments du panier"

Vous pouvez trouver l'exemple de travail ci-dessus dans ceci: Fiddle

Comme suggéré par Oriol , si vous n'utilisez pas Bootstrap Framework , ajoutez simplement les éléments suivants 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;
}
3
Peter Darmis

Non, il n'y a pas d'équivalent à un attribut alt pour les éléments <div>.

Pour ce que vous essayez de faire, une solution basée sur ARIA est excessive. Non seulement vous vous heurtez aux problèmes de compatibilité des lecteurs d’écran, mais vous appliquez les attributs ARIA là où ils ne sont pas nécessaires (et n’appartenez pas si vous êtes sur quelque chose comme un <div>).

Pensez plutôt à utiliser une technique hors écran (telle que celle du groupe Paciello ou celle de WebAIM ). Le contenu masqué à l'aide de cette technique sera toujours lu par les lecteurs d'écran, mais sera visuellement masqué.

En lisant votre question, je pense que c'est ce que vous recherchez.

J'ai fabriqué un stylo illustrant cette technique . Il peut être plus facile de tester dans la version pleine page .

Edit: ajout de HTML et CSS à partir de l'exemple, mais notez que les spécifications et la prise en charge du navigateur/des technologies d'assistance évoluent dans le temps. Si vous lisez ceci dans un an, vous devez continuer à utiliser les liens ci-dessus pour vérifier cette CSS est toujours la meilleure pratique actuelle.

HTML

 <div tabindex="0">
  <span class="offscreen">Items in shopping cart: </span>2
 </div>

CSS

.offscreen {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
2
aardrian

Selon l'algorithme de calcul alternatif text du W3C et du Nom et description accessibles: Calculs et mappages d'API 1.1 , vous devez absolument utiliser aria-label.

Cela étant dit, cela ne fonctionne pas avec Jaws, c'est dommage pour un outil aussi coûteux.

L'option restante consiste à utiliser un lien qui ira à votre page de panier, en utilisant title et aria-label pour satisfaire quiconque:

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

Vous pouvez également utiliser une option transparente de 1 pixel:

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

Essayer:

HTML

<div id=myCoolDiv tabindex="0"><span class="aria-hidden">shopping cart items</span>2<div>

CSS

.aria-hidden {
  position: absolute;
  left: -100000px;
}

Cela annoncera le texte à l'intérieur de la durée. Et la div du parent ne perdra pas son focus visuel. La classe Aria-hidden masquera l'étendue de la zone d'écran visible mais la lira comme telle à l'intérieur de la div qui a le focus.

0
UIPassion

Utilisez une image à l'intérieur du div dont l'étiquette est l'attribut alt. Ainsi, ceux qui n'ont pas de lecteur d'écran voient seulement le numéro et une image, tandis que ceux qui ont un lecteur entendent la phrase entière:

<div>
    <img src="http://tny.im/57j" alt="Shopping cart items" />
    2
</div>

Vu en tant que: Panier articles http://icons.iconarchive.com/icons/icons8/ios7/16/Ecommerce-Shopping-Cart-Empty-icon.png 2

Lire comme: "Panier articles: 2"

L'attribut alt existe pour les images car il n'existe aucun moyen de "lire à voix haute" le contenu de l'image. Le texte fourni est donc utilisé à la place. Mais pour le div, il contient déjà du texte et des images. Par conséquent, si vous voulez qu'il soit lu par un lecteur d'écran, vous devez inclure le texte et le texte alternatif dans le contenu du div.

0
rvighne

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

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

Ensuite, dans votre code, vous pouvez simplement ajouter un <span> avec le texte du lecteur d'écran de la manière suivante:

<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/ )

0
Ashwin Ramaswami