“缺少表单标签”上的 Web 可访问性失败答案

【问题标题】：Web Accessibility failing on "Missing form label"“缺少表单标签”上的 Web 可访问性失败
【发布时间】：2016-07-01 18:07:35
【问题描述】：

作为网络可访问性练习的一部分，我们的网站因缺少一些表单标签而被选中

文本区域是我们不希望有可见标签的元素（该站点是使用 jQuery 的 ASP.NET MVC/Razor）

@Html.TextAreaFor(x => x.UserInput.FeedbackContent)

正确的做法是在这个场景中创建一个对应的LabelFor并隐藏它吗？

@Html.LabelFor(x => x.UserInput.FeedbackContent, new {@class = 'hidden'})

或者在 TextAreaFor 中是否有创建隐藏标签的方法？

非常感谢

【问题讨论】：

【解决方案1】：

正确的做法是在这个场景中创建一个对应的LabelFor并隐藏它吗？

如果您通过display: none 或visibility: hidden 隐藏它，则不会，因为它们会make screenreaders ignore it as well。

有 CSS 技巧可以用来仅在视觉上隐藏它，但可以考虑在文本区域本身上使用aria-label 属性。在 HTML 中，这将是：

<textarea ... aria-label="Label for the text area" ...>

我不使用 Asp.Net-MVC，但我相信你会这样做：

@Html.TextAreaFor(x => x.UserInput.FeedbackContent, new Dictionary<string, object>(){{"aria-label", "Label for the text area"}});

【讨论】：

非常感谢 - 所以对 ASP MVC/Razor 不太熟悉，我将如何通过 @Html.TextAreaFor 设置该属性？会不会是新的{@attribute = "aria_label = 'Label for the text area'"}
@Mike：嘿，我只是在研究它并将其添加到答案中（见上文，您可能需要点击刷新）。我基于this answer 一个不相关的属性。