我的网站上有一个表单,为了显示用户需要输入的内容,我使用了占位符。但是,屏幕阅读器不会阅读该文本。
我不想为表单中的每个输入添加标签,因为这不符合所需的视觉效果。
在不更改页面样式的情况下仍然创建此功能的最佳解决方案是什么? 我愿意接受建议。
最佳答案
第一个选项:插入一个引用输入字段的隐藏标签。它在屏幕上不可见,但屏幕阅读器可以访问并向用户阅读其内容:
<p>
<label class="class-to-hide" for="search">Enter search term</label>
<input type="text" id="search" name="search" />
</p>
但是,请确保引用是完整的(即 for
== id
),否则标签属于哪个元素仍然不清楚。
第二个选项:使用 WAI-ARIA 属性来定义仅对屏幕阅读器可用的标签。这样就不需要用隐藏元素来混淆代码。
<input type="text" aria-label="Enter search term" name="search" />
其他建议:placeholder
通常对于视障用户来说不是一个好的选择。在大多数浏览器中,占位符文本以浅灰色打印且对比度较低,这使得视力不佳的用户难以阅读。
此外,一旦您在输入字段中输入文本,占位符就会消失。如果您不能真正看到该站点,这也使它变得困难,并且可能导致误解。最好改用屏幕阅读器的描述性标签。
关于html - 无需更改布局即可访问占位符文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67899431/