web-dev-qa-db-fra.com

En HTML, comment puis-je avoir du texte accessible uniquement aux lecteurs d'écran (c'est-à-dire aux aveugles)?

J'ai un site Web qui a des divs colorés avec des nombres, par ex. 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 me demandant si je pouvais lui faire dire "2 rouges" pour son lecteur d'écran.

J'ai essayé d'ajouter ceci comme un alt = "2 rouge" mais il a dit que cela ne faisait rien. Il pense qu'il pourrait ne lire que les balises alt pour les images.

Existe-t-il un bon moyen de le faire pour les divs?

htmlaccessibility
24
Some Guy

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

Des solutions qui fonctionnent

Étiquettes ARIA ★ ★ ★ ★ ★ ★ ★

aria-label (À ne pas cibler avec aria-labeledby) Est utilisé pour ajouter du contenu descriptif hors écran à un élément de la même manière qu'un attribut alt= Ajoute du contenu descriptif hors écran à les images à utiliser lorsque les images ne peuvent pas être affichées.

La différence est que aria-label Peut être utilisé sur des éléments non image.

<div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
     result (screenreaders):  test A
     result (regular):        test B
-->

L'ajout de l'attribut aria-hidden Masque le texte interne.

Position + Clip + Réduire ★ ★ ★ ★

.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 complètement l'élément 1px x 1px, sinon il sera toujours visible à l'écran.

Position ★ ★ ★

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

<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>

Retrait ★

.screenreader {
    text-indent: -5000px;
}

La valeur de retrait réelle n'est pas importante tant qu'elle est en dehors de la plage de mise en page de vos pages. L'exemple déplace le contenu vers les 5 000 pixels de gauche.

Cette solution ne fonctionne que pour des blocs de texte complets. Cela ne fonctionnera pas bien sur les ancres ou les formulaires, ou les langues de droite à gauche, ou le texte en ligne spécifique mélangé avec un autre texte.

Ne fonctionnera pas

visibilité: caché; et/ou affichage: aucun;

Ces styles masqueront le texte de tous les utilisateurs. Le texte est supprimé du flux visuel de la page et ignoré par les lecteurs d'écran. N'utilisez pas ce CSS si vous souhaitez que le contenu soit lu par un lecteur d'écran. Mais utilisez-le pour le contenu que vous ne voulez pas lire par les lecteurs d'écran.

largeur: 0px; hauteur: 0px

Comme ci-dessus, un élément sans hauteur ni largeur étant supprimé du flux de la page, la plupart des lecteurs d'écran ignoreront ce contenu. La largeur et la hauteur HTML peuvent donner le même résultat. Ne redimensionnez pas le contenu à 0 pixel si vous souhaitez que le contenu soit lu par un lecteur d'écran.

Plus loin:

42
davidcondrey

EDIT 2020: actuellement display:none ou visibility:hidden semble généralement causer que le contenu n'est pas visible visuellement et pour les lecteurs d'écran (vient d'être testé dans Firefox et Chrome avec NVDA), donc la déclaration ci-dessous n'est pas valide. déplacer du contenu en dehors de l'écran actuellement semble être le seul moyen de fournir du contenu uniquement aux utilisateurs de lecteurs d'écran, voir également ce tableau: http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

Sauf indication contraire dans la réponse acceptée au moins Chromevox 1 et NVDA 2 lire également les éléments avec le style display:none ou visibility: hidden Attributs CSS si aria-hidden=false est défini. Cependant actuellement uniquement dans Chrome (65), pas dans Firefox ou Edge (selon mes tests).

Donc (actuellement malheureusement uniquement dans Chrome), il est également 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 lisent la première et la deuxième rubrique. Voir aussi ceci: https://jsfiddle.net/4y3g6zr8/6/

Si tous les navigateurs étaient d'accord sur ce comportement, ce serait une solution beaucoup plus propre que toutes les astuces CSS proposées dans les autres solutions.

1Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn2NVDA https://www.nvaccess.org/

2
klues

Vous pouvez mettre un élément visuellement caché à l'intérieur:

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

Pour "se cacher visuellement", vous pouvez emprunter comment le passe-partout HTML5 le fait:

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

Concernant la question dans le titre: Non, il n'y a aucun moyen (en HTML ou autre) d'avoir du texte accessible uniquement aux lecteurs d'écran. Quoi que vous fassiez, comme utiliser un élément img avec un attribut alt non vide et un attribut src manquant ou défectueux "ou utiliser CSS pour masquer quelque chose visuellement, sera disponible pour tout logiciel qui se soucie de le lire (et qui peut être inaccessible aux lecteurs d'écran pour une raison ou une autre).

D'un autre côté, si vous utilisez par exemple.

<div class=foo>2 <img alt=red></div>

alors la plupart des lecteurs d'écran le liront comme "deux rouges", mais il en sera de même pour les navigateurs normaux, de sorte que l'effet ne se limite pas aux lecteurs d'écran.

Ce que vous devez faire pour l'accessibilité est un problème différent et dépend du contexte et du but de l'utilisation de la couleur rouge. Notez que même lorsque le navigateur affiche une boîte en rouge, l'utilisateur peut ne pas la voir comme rouge, en raison du daltonisme; en particulier, s'il est pertinent de faire la distinction entre le rouge et le vert, de nombreuses personnes ne le feront pas.

Il pourrait y avoir une solution simple dans un cas spécifique, ou ce pourrait être un problème délicat sans bonne solution. Pour des notes générales et diverses techniques, voir le document Comment rencontrer WCAG 2.0: utilisation de la couleur .

1
Jukka K. Korpela