可访问的输入元素 | 基础知识
**TL;DR：**无论组件有多小，在实施时务必考虑各种不同的用户及其能力。乍一看，复选框等输入元素似乎很容易修复 - 但为了确保它们可访问，仍需考虑一些事项。
本系列将讨论不同类型的输入元素以及如何使它们更易于访问，从基础开始：使用正确的输入类型并关联标签。
我们来看看。
选择正确的输入类型
在 HTML 中使用输入元素时，我们希望确保始终为相应元素设置正确的输入类型。默认输入类型是文本，可能适用于多种情况，但尽可能具体有助于您的用户 - 并附带一系列固有功能。`` 例如定义一个数字输入字段，在手机上打开数字键盘而不是键盘，并且您可以使用最小数字和最大数字来限制范围。`` 屏蔽相应的输入，从而保护用户的隐私。根据浏览器的不同，`` 打开日期选择器，...等等。通过选择正确的输入类型，我们可以让自己的生活更轻松，能够使用 HTML 中的某些继承功能，同时改善用户体验。
确保始终有一个与输入元素关联的标签
无论您使用哪种类型的输入，请确保将标签与输入字段关联。通常，这可以通过 ` ` 元素和 for 属性来完成。
aria-label 与 aria-labelledby
如果无法使用视觉标签，或者无法通过上述方式将其与输入元素关联，也可以使用 aria-labels 来识别表单控件。如果您对 ARIA 有一点了解，您可能知道，如果可能的话，首选方案是尽可能不使用 aria - 然而，在现实生活中，这当然并不总是可行的。
aria 标签
当不存在可见的文本标签时，可以使用 aria-label，例如，当使用没有任何文本的图标按钮时。
aria-labelledby
当使用另一个元素作为标记输入的参考时，aria-labelledby 就派上用场了。
Add Delivery Address
尽可能尝试使用语义 HTML 为输入元素提供可访问的名称。只有当您确定在这种特定情况下无法做到这一点时，才恢复使用 aria 属性。
一旦我们掌握了这些基础知识，例如使用语义结构、添加正确的输入类型和关联标签，我们就可以仔细研究使我们的输入元素更易于访问的其他方面，例如禁用的输入元素、焦点样式和颜色对比以及预期的键盘导航。
**资源：**