En HTML, comment puis-je avoir le texte qui n'est accessible que pour les lecteurs d'écran (c'est à dire pour les aveugles)?

J'ai un site qui a coloré les divisions avec des nombres, par exemple, un bloc rouge avec le numéro 2 à l'intérieur. La couleur est importante pour la compréhension. Un utilisateur aveugle m'a envoyé un courriel lui demandant si je pouvais lui faire dire "2 rouge" pour son lecteur d'écran.

J'ai essayé d'ajouter ce que une alt="2 rouge" mais il a dit que ne pas faire n'importe quoi. Il pense qu'il peut seulement lire les balises alt pour les images.

Est-il une bonne façon de procéder pour les divs?

OriginalL'auteur Some Guy | 2014-09-25

accessibility html

21

Aussi loin que le texte d'alt, vous avez raison, cela ne fonctionne que pour les images.. Mais vous pouvez utiliser aria-label à la place de l'attribut alt pour les non-éléments de l'image comme ceci:

Des Solutions qui fonctionnent

ARIA Étiquettes ★ ★ ★ ★ ★ ★

aria-label (de ne pas être porté avec aria-labeledby) est utilisé pour ajouter hors de l'écran descriptif de contenu d'un élément beaucoup dans la façon dont un alt= attribut ajoute hors de l'écran descriptif de contenu sur les images pour être utilisé lorsque les images ne sont pas affichables.

La différence est, aria-label peut être utilisé sur des éléments de l'image.
```
<div aria-label="test A"><p aria-hidden="true">test B</p></div>

```
L'ajout de la aria-hidden attribut masque le texte interne.

Position + Clip + Effondrement ★ ★ ★ ★
```
.screenreader {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}
```
Le clip est utilisé pour masquer les 1px 1px x élément complètement, sinon il sera encore visible sur l'écran.

Position ★ ★ ★
```
.screenreader {
    position: absolute;
    left:-9999px;
}

<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>
```
Tiret ★
```
.screenreader {
    text-indent: -5000px;
}
```
La réelle valeur de retrait n'est pas important, tant que c'est en dehors de la portée de votre mise en pages. L'exemple de déplacer le contenu vers la gauche 5000 pixels.

Cette solution ne fonctionne que pour plein de blocs de texte. Il ne marche pas bien sur des ancres ou des formes, ou de droite à gauche de langues, ou spécifiques inline-texte mélangés avec d'autres textes.

Ne fonctionnera pas

~~visibility: hidden; et/ou display:none;~~

Ces styles masquer le texte de tous les utilisateurs. Le texte est retiré du flux visuel de la page et est ignoré par les lecteurs d'écran. Ne pas utiliser ce CSS si vous voulez que le contenu soit lu par un lecteur d'écran. Mais NE l'utiliser pour le contenu que vous ne voulez pas lu par les lecteurs d'écran.

~~width:0px;height:0px~~

Comme ci-dessus, parce qu'un élément sans la hauteur ou la largeur est retiré du flux de la page, la plupart des lecteurs d'écran d'ignorer ce contenu. HTML la largeur et la hauteur peuvent donner le même résultat. Ne pas de la taille du contenu à 0 pixels si vous voulez que le contenu soit lu par un lecteur d'écran.

Plus loin:
- WebAIM Centre pour Personnes Handicapées
- Les crocs d'un Lecteur d'Écran de l'Émulateur pour Mozilla
visibility:hidden ou display:none de travail pour pas un seul lecteur d'écran (sauf si vous désactivez CSS). Ils sont les 2 techniques fiables pour masquer le contenu de tout le monde, utilisateur de lecteur d'écran ou non.
Merci pour la correction, j'ai mis à jour la réponse réfléchie.
La personne m'a dit que aria-label ne fonctionne pas avec son lecteur, même si la spec dit qu'il devrait...
aria-label ne fonctionne pas avec les Mâchoires lorsque j'attache de l'attribut à une norme div, ni aria-labeledby, quelqu'un a compris pourquoi? Je suis en utilisant ce avec FF et IE
aria-label est uniquement autorisée sur quelque chose avec un rôle explicite, donc je ne comprends pas comment le "meilleur" exemple fonctionne.

OriginalL'auteur davidcondrey
2

Sauf mention contraire dans la accepté de répondre à au moins Chromevox¹ et NVDA² à lire également les éléments avec style display:none ou visibility: hidden attributs CSS si aria-hidden=false est réglé. Cependant, actuellement, seulement en Chrome (65), pas dans Firefox ou Edge (selon mes tests).

(Actuellement, malheureusement, seulement en Chrome) il est aussi possible de faire quelque chose comme ceci:
```
<h1 aria-hidden="false" style="display: none;">Heading only for Screen Readers</h1>
<h1 aria-hidden="false" style="visibility: hidden;">Second Heading only for Screen Readers</h1>
<h1 aria-hidden="true">Heading only for Screen</h1>
```
où Chromevox et NVDA lire la première et la deuxième position.
Voir aussi ceci: https://jsfiddle.net/4y3g6zr8/6/

Si tous les navigateurs se mettent d'accord sur ce comportement, il serait une bien meilleure solution que de tous les CSS astuces proposées dans les autres solutions.

^{1_{Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn}}
^{2_{NVDA https://www.nvaccess.org/}}

Merci, exactement ce que je cherchais. Il serait bon d'avoir un tableau d'ensemble de ce qui prévaut dans le navigateur/lecteur d'écran combinaison et aussi ce qui devrait l'emporter à partir d'une perspective normative.

OriginalL'auteur klues
1

Sur la question dans le titre: Aucun, il n'existe aucun moyen (en HTML ou autre) à un texte qui n'est accessible que pour les lecteurs d'écran. Ce que vous ne pourriez le faire, comme à l'aide d'un img élément non vide alt attribut et un manque ou dysfunct src attribut " ou à l'aide de CSS pour cacher quelque chose de visuellement, sera disponible pour tout logiciel qui se soucie de le lire (et peut-être inaccessible aux lecteurs d'écran, pour une raison ou une autre).

D'autre part, si vous avez réellement utiliser, par exemple,
```
<div class=foo>2 <img alt=red></div>
```
alors la plupart des lecteurs d'écran lira comme suit: “rouge”, mais il en sera de bien se comporter normal navigateurs, de sorte que l'effet n'est pas limité aux lecteurs d'écran.

Ce que vous devez faire pour l'accessibilité est une question différente et dépend du contexte et de l'objectif de l'utilisation de la couleur rouge. Notez que même lorsque le navigateur affiche une boîte rouge, l'utilisateur peut ne pas le voir comme un rouge, en raison de la couleur de la cécité; en particulier, s'il est pertinent d'établir une distinction entre le rouge et le vert, beaucoup de gens ne parviennent pas à le faire.

Il y a peut être une solution simple dans un cas particulier, ou il pourrait être un problème délicat avec pas de bonne solution. Pour les remarques générales et les diverses techniques, voir le document Comment faire pour Rencontrer des WCAG 2.0: Utilisation de la couleur.

Salut, est-ce toujours la solution de rechange en 2016? Je suis aussi essayer de savoir si il existe un moyen d'avoir l'adresse d'une chaîne lu par le lecteur d'écran qui est attaché à la div

OriginalL'auteur Jukka K. Korpela

Vous pouvez mettre un visuel élément masqué à l'intérieur:

<div>
    <span class="visually_hidden">2 red</span>
</div>

"Visuellement cacher", vous pouvez emprunter la façon dont HTML5 boilerplate:

.visually_hidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}

OriginalL'auteur kinakuta

Vous devez vous connecter pour publier un commentaire.

Des Solutions qui fonctionnent

ARIA Étiquettes ★ ★ ★ ★ ★ ★

Position + Clip + Effondrement ★ ★ ★ ★

Position ★ ★ ★

Tiret ★

Ne fonctionnera pas

visibility: hidden; et/ou display:none;

width:0px;height:0px

Plus loin: