- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
P粉4929595992023-08-23 15:43:06
É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 Chromevox1 et NVDA2 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.
1Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn 2NVDA https://www.nvaccess.org/
P粉5949413012023-08-23 10:57:50
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 :
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.
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.
.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.
.screenreader {
position: absolute;
left:-9999px;
}
<div>星期三<span class="screenreader">，2014年9月24日</span></div>
.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.
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.
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.