html - 我可以删除屏幕阅读器提示并保留占位符文本吗
问题描述
我正在与 google chrome 屏幕阅读器一起进行调查。我注意到占位符值呈现为“提示,输入您的姓名”。
所以屏幕阅读器说。“输入您的姓名并提示输入您的姓名”
屏幕阅读器已经在阅读标签,所以我的问题是,这个占位符提示似乎是多余的。我可以在保留占位符文本的同时删除屏幕阅读器提示吗?
<fieldset class="about">
<legend>About you</legend>
<label id="name-label" for="name">Enter your name</label>
<input id="name" name="name" type="text" placeholder="enter your name">
<label id="email-label" for="email">Email</label>
<input id="email" name="email" type="email" placeholder="Enter your email">
<label id="age-label" for="number">Age</label>
<input id="number" name="number" type="number min="10" max="100" placeholder="Age">
</fieldset>
我尝试在屏幕阅读器选项上使用 display: none ,但随后输入无法聚焦。还有其他选择吗?
<form id="survey-form">
<fieldset class="Enter your name">
<legend>Enter Your name</legend>
<label id="name-vis" for="name-vis"></label>
<input id="name-vis" name="name" type="text" placeholder="enter your name" aria-hidden="true">
<label id="name-read" for="name-read">Enter your name</label>
<input id="name-read" name="name" type="text">
</fieldset>
</form>
谢谢你的帮助
解决方案
该特定屏幕阅读器(chromevox)正在添加“提示”一词。JAWS、NVDA 和 VoiceOver 都没有说“提示”。
确保您了解“可访问的名称”和“可访问的描述”之间的区别。我在这两个答案中谈到了这两个概念:
该placeholder
属性在“可访问名称计算”中用于计算“可访问描述”。正如我在前两个答案中所指出的,屏幕阅读器将宣布元素的“可访问名称”,然后是“可访问描述”。使用 chromevox,听起来好像正在添加“带提示”,即使它不是您元素的一部分。我不会试图摆弄屏幕阅读器如何宣布事情。
但是回到您的原始代码,我发现占位符与标签的文本相同有点奇怪。重复文本如何帮助用户?占位符的规范说:
“占位符属性表示旨在帮助用户输入数据的简短提示(单词或短语)”
有趣的是,规范说占位符是一个“提示”,而 chromevox 在宣布它时会注入“带有提示”。
推荐阅读
- r - R数据框的值在错误的列中
- python - .gitlab-ci Django 中的 mysql 服务
- cplex - 如何从 CPLEX OPL 导出最佳后处理可行解决方案
- java - 在 android studio 中创建图像映射视图
- image - SSRS 表达式打开特定报告
- r - 如何提取出现最大值的矩阵的特定行和列
- nftables - nftables netdev 和 inet 钩子之间的区别
- python - Python:来自 csv-list 的值
- assembly - 在这个 MIPS 汇编程序中传递到标签是如何工作的?
- c# - Outlook for Office365 在发送前向用户显示消息