Comment fournir du texte accessible en HTML aux utilisateurs de lecteurs d'écran ?

Question

J'ai un site Web qui contient des divs colorés avec des chiffres, par exemple un bloc rouge avec le chiffre 2 à l'intérieur. La couleur est importante pour la compréhension. Un utilisateur aveugle m'a envoyé un e-mail et m'a demandé si je pouvais faire lire "2 rouges" sur un lecteur d'écran.

J'ai essayé de l'ajouter sous la forme alt="2 red" mais il a dit que cela ne faisait rien. Il pensait que cela pourrait simplement lire la balise alt de l'image.

Existe-t-il un bon moyen de procéder, qui fonctionne avec les éléments div ?

Answer 1

ÉDITION 2020 : Actuellement, display:none 或 visibility:hidden semble généralement rendre le contenu invisible à la fois visuellement et avec les lecteurs d'écran (testé avec NVDA dans Firefox et Chrome), donc la déclaration ci-dessous n'est pas valide. Actuellement, déplacer le contenu hors de l'écran semble être le seul moyen de proposer du contenu aux utilisateurs de lecteurs d'écran. Voir également le tableau suivant : http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

---

Sauf indication contraire dans la réponse acceptée, au moins Chromevox¹ et NVDA² liront également les éléments avec l'attribut display:none 或 visibility:hidden CSS 属性的元素，如果设置了 aria-hidden=false CSS si aria-hidden=false est défini. Cependant, cela n'existe actuellement que dans Chrome (65) et non dans Firefox ou Edge (d'après mes tests).

Donc (actuellement possible uniquement dans Chrome), vous pouvez également faire ceci :

<h1 aria-hidden="false" style="display: none;">仅供屏幕阅读器使用的标题</h1>
<h1 aria-hidden="false" style="visibility: hidden;">仅供屏幕阅读器使用的第二个标题</h1>
<h1 aria-hidden="true">仅供屏幕使用的标题</h1>

Où Chromevox et NVDA liront les premier et deuxième en-têtes. Voir aussi : https://jsfiddle.net/4y3g6zr8/6/

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

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

Answer 2

Concernant le texte alt, vous avez raison, il ne fonctionne qu'avec des images. Mais vous pouvez utiliser aria-label pour remplacer l'attribut alt des éléments non-image, comme ceci :

Solution efficace

Tag ARIA ★ ★ ★ ★ ★ ★

L'attribut

aria-label（不要与aria-labelledby混淆，后者从另一个元素的文本中提取可访问名称）用于为元素添加屏幕外描述性内容，类似于alt= ajoute un contenu descriptif hors écran à l'image et est utilisé lorsque l'image ne peut pas être affichée.

La différence avec

est que aria-label peut être utilisé sur des éléments non-image.

<div aria-label="测试A"><p aria-hidden="true">测试B</p></div>
<!--
     结果（屏幕阅读器）：测试A
     结果（常规）：测试B
-->

Ajoutez l'attribut aria-hidden pour masquer le texte intérieur.

Position + Recadrage + Pliage ★ ★ ★ ★

.screenreader {
    position: absolute !important; /* 脱离文档流 */
    height: 1px; width: 1px; /* 几乎折叠 */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* 仅IE 7+支持不带逗号的clip */
    clip: rect(1px, 1px, 1px, 1px); /* 其他所有浏览器 */
}

Crop est utilisé pour masquer complètement un élément de 1px x 1px qui serait autrement toujours visible à l'écran.

Positionnement ★ ★ ★

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

<div>星期三<span class="screenreader">，2014年9月24日</span></div>

Retrait ★

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

La valeur réelle de l'indentation n'a pas d'importance tant qu'elle dépasse la portée de la mise en page. L'exemple déplace le contenu de 5 000 pixels vers la gauche.

Cette solution ne fonctionne que pour des blocs de texte complets. Cela ne fonctionne pas bien avec les ancres, les formulaires, le langage écrit de droite à gauche ou le texte en ligne spécifique mélangé à d'autres textes.

Ne fonctionne pas

visibilité : masquée et/ou affichage : aucune ;

Ces styles masqueront le texte, le rendant invisible pour tous les utilisateurs. Le texte est supprimé du flux visuel de la page et ignoré par les lecteurs d'écran. Si vous souhaitez que le contenu soit lu par des lecteurs d'écran, n'utilisez pas ce CSS. Utilisez-le cependant si vous souhaitez que le contenu soit illisible par les lecteurs d’écran.

largeur:0px;hauteur:0px

Comme ci-dessus, puisque les éléments sans hauteur ni largeur sont supprimés du flux de la page, la plupart des lecteurs d'écran ignoreront ce contenu. La largeur et la hauteur HTML peuvent produire le même résultat. Si vous souhaitez que le contenu soit lu par des lecteurs d'écran, ne définissez pas la taille du contenu sur 0 pixel.

Plus d'informations :

• Centre pour personnes handicapéesWebAIM
• Émulateur de lecteur d'écran Fangs Mozilla