标签内的语义输入错误消息答案

【问题标题】：Semantic input error message inside label标签内的语义输入错误消息
【发布时间】：2017-10-09 22:51:45
【问题描述】：

我正在使用<label> 包装输入，以便其成功和错误消息可以显示在其标签内以进行关联。你认为这个场景最符合语义的标记是什么？

<label>
  <b>Username</b>
  <input>
  <strong>Username already taken :(</strong>
</label>

对于错误，strong 合适吗？还是span 更好？ role=status 合适吗？

【问题讨论】：

（不是答案）您可以为标签的文本使用跨度（它已经在标签中）并且 strong/span/em/i/b 不会改变当前屏幕阅读器的任何内容：它将被阅读（尽管其中一个元素可能具有比其他元素更好的语义，但 SR 必须应对 HTML 标记的当前状态，这远非语义^^）

【解决方案1】：

The WCAG provides an example 同时使用aria-invalid 和aria-describedby 属性显示错误。

在您的示例中，代码为：

<label>
  <b>Username</b>
  <input aria-invalid="true" aria-describedby="error">
  <strong id="error">Username already taken :(</strong>
</label>

strong 是合适的，因为它似乎是一个重要的通知。 alert 角色（而不是status）更适合应用于#error 元素according to the W3C。

【讨论】：

谢谢 =) 在<label> 中使用[aria-describedby] 会破坏正常的标签语义吗？根据阅读，我想知道[aria-invalid] 与strong 在label 中的组合是否足够。
@ryanve aria-describedby 不会影响与使用 aria-labelledby 不同的正常标签语义。但是，strong 在label 中的事实可能具有将其内容添加到标签文本的效果。在使用aria-describedby 时，将strong 标签放在label 标签之外可能是相关的，因为它会区分标签（label 或aria-labelledby）和描述（aria-describedby）。
深入挖掘后发现还有一个更具体的aria-errormessage属性w3.org/TR/wai-aria/states_and_properties#aria-errormessage
@ryanve 没有辅助技术的支持
谢谢！超越w3c.github.io/using-aria 是否有任何地方以类似于node.green 或caniuse 的格式获得ARIA 的兼容性覆盖？那里只有caniuse.com/#search=aria

【解决方案2】：

使用强标签是合适的。

强标签表示某事更重要，密码不正确很重要，因为它会阻止用户继续。

【讨论】：

【解决方案3】：

从技术上讲，这两个元素都可用于创建您正在寻找的适当的错误消息（使用适当的 css）。在我看来，最符合语义的是使用 Strong 标签，纯粹是因为我想强调密码不正确的重要性，而不需要在 css 中使用 font-weight:bold;。

此外，由于涉及到可访问性问题，Strong 标签更适合屏幕阅读器，从而使其更易于访问。

总的来说，我认为在这种情况下使用<strong>over <span> 更快、更容易、更好。

【讨论】：

【解决方案4】：

强是好的，因为“用户名已被占用”是一个严肃的通知，而不是一个随意的通知。

【讨论】：

【解决方案5】：

我建议保留它的强标签并且还利用 CSS 红色将其显示为错误。

【讨论】：