注意，今天的博文在很大程度上受到w3.org的Labeling Controls教程的启发。
默认情况下，HTML是可访问的。这是真的，但有一个重要的警告，即当你正确地使用语义HTML时，你所构建的东西将是可访问的。在大多数情况下...绝对有一些UI元素可能是一个真正的挑战，你需要将CSS和JavaScript与HTML结合起来，以使其真正具有可访问性。但是，这并不是本文的主题。我们只是在谈论语义化的HTML，它使大多数内置的UI元素（如表单）变得无障碍。现在，有很多方法可以把它搞乱。今天，我将专注于 ，以及如何确保你的表单控件（输入）被正确地标示出来。
在我进入这个话题之前，请允许我快速切入，说一下。请在没有键盘的情况下使用你的表单，看看这是否可行。有很多表格没有鼠标就无法使用，这让我很抓狂。幸运的是，我可以使用鼠标，但世界上有很多人不能。对他们来说，填写你的表格是不可能的。
好吧，那么我们来谈谈标签。
我经常遇到这样的表单控件，它是这样写的：
Username: <input />
对于看得见的用户来说，这看起来很好，但对于盲人用户来说，他们需要使用屏幕阅读器，如果没有标签，用户在关注输入的时候就只能靠自己的猜测来判断输入的内容。
但这不仅仅是把标签文本放在 输入中。所以这是不可能的：
<label id="username">Username</label> <input aria-labelledby="username" />
⚡️ 你可以通过检查输入的labels 属性或标签的control 属性知道输入有一个与之相关的标签。
好的，这里有四种将标签与输入关联起来的方法（按个人喜好排序）。
<label>
Username
<input />
</label>
我喜欢把这种方式看作是标签拥抱输入的方式
<input aria-label="Username" />
这个插件可以正常工作，而且很好，因为它意味着你不需要制作全局唯一的ID（通常在客户端渲染的应用程序中，我会随机生成这些ID），但它不是我的最爱，主要是因为它可能更难按照我想要的方式来设计东西，而且 getByLabelText要求你在做这个的时候提供一个selector 。
我不太喜欢这种方法，因为它去掉了一个可见的标签，这对可访问性有其他影响。
实际上，你也可以使用title 属性，但显然，屏幕阅读器认为这是一个标签是不一致的，所以只要坚持使用上述方法之一。
作为奖励，当你正确地将标签与表单控件联系起来时，表单控件的可点击区域包括标签，这对复选框和使用移动设备的人特别有用。
另一个好处是：你将能够使用 getByLabelText这将使你的测试更接近于你的软件的使用方式，这很好!
你可以在这里阅读更多关于这方面的内容。使用标签元素将文本标签与表单控件联系起来。
我希望这对你有帮助。同样，除了确保你的表单控件有正确的标签外，请你尝试只用键盘来使用你的表单。它们都是非常低的果实，可以使你的表单的可访问性有很大的不同。
祝您好运!💪
