我正在寻找一些解决方案来使 可访问，我发现了以下内容：
<label>元素指示它标记的表单字段 引用其 id 属性值：
<label for="fname">它声明，“我是这个控件的标签”。使用
aria-labelledby，表单字段指示哪些元素标签 它通过引用它的 id 属性：
<input aria-labelledby="fnamelabel">表单控件声明，“我 是一个被这个元素标记的控件”。
所以基本上使用 aria-labelledby 或带有 for 属性的 label 标签。
但是，
为了让屏幕阅读器向用户“阅读”描述，而不是使用第二个 HTML 标记，难道我不能简单地在输入中添加一个 aria-label 吗？有什么理由不这样做吗？
【问题讨论】：
标签： html accessibility
A11y 不仅仅意味着它是在屏幕阅读器中阅读的。它还为可以看到的用户定义了标准。
无论如何，您都必须显示用户想要输入的内容。 注意： placeholder 不能替代应该进入字段的内容。
例子：
<input placeholder="name of contact person" value="Sam">
<input placeholder="name of co-worker" value="Tina">如果您运行 sn-p，您能否仅从呈现的输出中分辨出哪个字段包含哪些信息？ （不，你不能）
这就是为什么您需要始终显示输入标签的原因，因此无需省略它。
你也可以这样写 HTML：
<label>
Name
<input type="text">
</label>
【讨论】：
这实际上并不像您想象的那么简单。
@cloned 举了一个很好的例子，说明为什么你应该在输入上方有一个可见的标签，它可以更容易地知道已经填写了什么。
这对于患有焦虑症的人来说尤其重要，因为他们经常会重新检查所有内容。
如果没有标签，他们唯一的选择是删除每个字段并重新输入（多次）以确认他们已正确填写所有内容。
因此，最好的选择是将其包装在<label> 中（如@cloned 建议的那样）或使用<label for="idOfInput"> 作为同样有效的方法（如您在问题中所述）。
那么aria-labelledby 呢？为什么要在<input> 上使用它？
好吧，搜索框是一个被广泛接受的地方，你不能有一个可见的标签。使用 aria-labelledby 是一种为此类输入添加标签的好方法，无需更改已接受的模式。
但它有一个更好的功能，你可以为一个输入添加多个id's。这对于属于分组的一部分或位于表中的输入（如果您有正当理由将它们放在表中）非常有用，因为您可以使用一个标签作为组名，一个作为项目名称，使您的HTML 更干燥（不要重复自己）。
aria-label 而不是aria-labelledby？好问题，主要原因是某些屏幕阅读器中的support for aria-label is still a bit flakey。
Support for aria-labelledby is better，但仍尽可能使用<label>。
尽可能使用<label>，如果标签当前不存在，请更改设计以适应标签，即使您不得不与平面设计师争论标签的美感。
在其他任何地方使用aria-labelledby，因为它的支持比aria-label 稍好。
'WAI-ARIA' 用于添加 HTML 标记无法实现的附加信息。 输入有标签作为语义 HTML 的一部分，所以使用它们！
aria-label 和 aria-describedby 仅用于自定义组件或标记没有本机方式的事物（即页面上的可点击区域）。
WAI-ARIA 应该是最后的手段。
【讨论】：
WCAG Success Criterion 2.5.3: Label in Name 确实需要可见标签
对于带有包含文本或文本图像标签的用户界面组件，名称包含直观呈现的文本。
这可能用于例如通过语音操作界面。
这不能与4.1.2 Name, Role, Value（或其他标准）混淆，后者涉及可访问名称，而不是可见标签。
【讨论】：
标签元素上有一个“for”属性，它应该包含输入的 ID。这就是建立关联的方式（不需要 ARIA 标签）
<label for="demo123">First Name</label>
<input id="demo123" />
如果由于某种原因你没有标签，那么你会使用 aria-label
<input aria-label="First Name" />
这是一个可以提供帮助的工作示例。
<link href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/1.0.4/balloon.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="form-group">
<span class="required" aria-required="true"><i title="Required" class="fas fa-asterisk fa-cl" aria-hidden="true"></i><span class="sr-only">Required</span></span>
<label for="Textbox3836">First Name</label>
<span tabindex="0" role="button" class="text-info help-icon" data-balloon-pos="down" data-balloon-length="large" id="Textbox3836_Help_desc" aria-label="Tip: Please enter your legal first name."><i class="fas fa-info-circle fa-lg" aria-hidden="true"></i></span>
<input class="form-control" type="text" id="Textbox3836" name="Textbox3836" maxlength="250" placeholder="Ex: Andrew" data-identifier="Text box" aria-describedby="Textbox3836_Hint_desc Textbox3836_Help_desc">
<span class="sr-only" id="Textbox3836_Hint_desc">Example Andrew</span>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>看看这篇文章，它可以帮助你了解更多细节。 Accessibility Questions on best practices for aria-describedby and form fields
【讨论】：