我正在寻找一些解决方案来制作<表单/>可访问，我发现了以下内容：
<label>元素指示其标记的表单字段引用其id属性值：
<label for="fname">它声明，"我是这个控件的标签"。对于
aria-labelledby，表单字段指示哪些元素标签通过引用其id属性：
<input aria-labelledby="fnamelabel">表单控件声明，"I是由该元素标记的控件"。
所以基本上使用由标记的aria或带有for属性的label标记。
但是，
与其有第二个HTML标签，让屏幕阅读器向用户"读取"描述，我是否可以简单地在输入上有一个咏叹调标签？有什么理由不这样做吗？
A11y不仅仅意味着它是在读屏器中读取的。它还为可以查看的用户定义了标准。
无论如何，您都必须显示用户想要输入的内容注意：placeholder不能替代字段中应包含的内容。
示例：
<input placeholder="name of contact person" value="Sam">
<input placeholder="name of co-worker" value="Tina">如果你运行这个片段，你能单独从渲染的输出中判断出哪个字段包含哪些信息吗？(不，你不能(
这就是为什么你需要总是显示输入的标签，所以没有必要省略它
你也可以这样写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呢
好问题，主要原因是对aria-label的支持在一些屏幕阅读器中仍然有点古怪。
对aria-labelledby的支持更好，但仍然可以在任何可能的地方使用<label>。
tl；dr
在任何地方都可以使用<label>，如果标签目前不在，即使你不得不与平面设计师就标签的美观性进行争论，也可以更改设计以适应标签。
在其他任何地方都使用aria-labelledby，因为它比aria-label具有更好的支持。
顶部提示
"WAI-ARIA"用于添加HTML标记无法实现的附加信息。输入有标签作为语义HTML的一部分，所以请使用它们！
aria-label和aria-describedby只用于自定义组件或标记没有本地方式的东西(即页面上的可点击区域(。
WAI-ARIA应该是最后的手段。
WCAG成功标准2.5.3：名称中的标签需要可见标签
对于带有包含文本或文本图像的标签的用户界面组件，名称包含可视化显示的文本。
例如，这可能用于通过语音操作接口。
这不能与4.1.2名称、角色、价值(或其他标准(相混淆，后者涉及可访问的名称，而不是可见的标签。
标签元素上有一个"for"属性，应该包含输入的Id。这就是关联的方式(不需要ARIA标记(
<label for="demo123">First Name</label>
<input id="demo123" />
如果出于某种原因，你不能有一个标签，那么你会使用咏叹调标签
<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>看看这篇文章，它可能会对更精细的点有所帮助。描述的aria和表单字段的最佳实践的可访问性问题