html - 无需更改布局即可访问占位符文本

Question

我的网站上有一个表单，为了显示用户需要输入的内容，我使用了占位符。但是，屏幕阅读器不会阅读该文本。

我不想为表单中的每个输入添加标签，因为这不符合所需的视觉效果。

在不更改页面样式的情况下仍然创建此功能的最佳解决方案是什么？我愿意接受建议。

Answer 1

第一个选项:插入一个引用输入字段的隐藏标签。它在屏幕上不可见，但屏幕阅读器可以访问并向用户阅读其内容:

<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 通常对于视障用户来说不是一个好的选择。在大多数浏览器中，占位符文本以浅灰色打印且对比度较低，这使得视力不佳的用户难以阅读。

此外，一旦您在输入字段中输入文本，占位符就会消失。如果您不能真正看到该站点，这也使它变得困难，并且可能导致误解。最好改用屏幕阅读器的描述性标签。