可访问的输入元素 |基础知识

tl;dr:无论组件有多小，始终确保在实现时考虑各种不同的用户及其能力。乍一看，诸如复选框之类的输入元素似乎是一个简单的解决方案 - 但为了确保它们可访问，仍然需要考虑一些事情。

本系列将解决不同类型的输入元素以及如何使它们更易于访问，从基础知识开始：使用正确的输入类型并关联标签。

我们来看看吧。

选择正确的输入类型

在 html 中使用输入元素时，我们希望确保始终为相应元素设置正确的输入类型。默认输入类型是文本，可以在多种情况下使用，但尽可能具体可以帮助所有您的用户 - 并且附带一系列固有功能。例如，<input type="number"> 定义了一个数字输入字段，在手机上打开数字键盘而不是键盘，您可以使用最小和最大数字来限制范围。 <input type="password"> 屏蔽相应的输入，从而保护用户的隐私。根据浏览器的不同， <input type="date"> 打开日期选择器，...等等。通过选择正确的输入类型，我们可以让自己的生活变得更轻松，能够使用 html 中的某些继承功能，同时提高用户体验。

确保始终有一个与您的输入元素关联的标签

无论您使用什么类型的输入，请确保将标签与输入字段相关联。通常，这可以使用 <label> 元素和 for 属性来完成。

<label for="firstname">first name:</label>
<input type="text" name="firstname" id="firstname">

aria-label 与 aria-labelledby

在视觉标签不是一个选项或无法以上述方式与输入元素关联的情况下，aria-labels 也可以用于标识表单控件。如果您对 aria 有一点熟悉，您可能会意识到，如果可能的话，首选的选择是尽可能在没有 aria 的情况下工作 - 然而，当然，在现实生活中，这并不总是可行。

咏叹调标签

当不存在可见文本标签时，可以使用 aria-label，例如，当使用没有任何文本的图标按钮时。

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

40

查看详情

<button aria-label="search"><img src="search-icon.svg" alt=""></button>

咏叹调标记者

当另一个元素用作标记输入的参考时，aria-labelledby 会派上用场。

<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true">
<h2 id="dialog1_label">Add Delivery Address</h2>
</div>

只要有可能，请尝试使用语义 html 为您的输入元素提供可访问的名称。仅当您确定在这种特定情况下不可能时，才恢复使用 aria 属性。

一旦我们掌握了这些基础知识，例如使用语义结构、添加正确的输入类型和关联标签，我们就可以仔细研究使输入元素更易于访问的其他方面，例如禁用的输入元素，焦点样式和颜色对比以及预期的键盘导航。

资源：

• w3schools：html 输入类型
• 标签控件 - w3
• a11y collective - aria-label 与 aria-labelledby

以上就是可访问的输入元素 |基础知识的详细内容，更多请关注php中文网其它相关文章！