I'm using <label> to wrap an input such that its success and error messages can appear inside its label for association. What do you think is the most semantic markup for this scenario?
我正在使用
<label>
<b>Username</b>
<input>
<strong>Username already taken :(</strong>
</label>
For errors is strong appropriate? Or is span better? Is role=status appropriate?
因为错误是很恰当的吗?或者是跨更好?角色=状态合适?
5 个解决方案
#1
6
The WCAG provides an example of error displaying using both aria-invalid and aria-describedby properties.
WCAG提供了一个使用aria-invalid和aria描述的属性显示错误的示例。
In your example, the code would be:
在您的示例中，代码是:
<label>
<b>Username</b>
<input aria-invalid="true" aria-describedby="error">
<strong id="error">Username already taken :(</strong>
</label>
The strong is appropriate as it appears to be an important notice. An alert role (rather than status) would be more appropriate to be applied to the #error element according to the W3C.
强烈的是适当的，因为它似乎是一个重要的注意。一个警告角色(而不是状态)将更适合于根据W3C应用于#error元素。
#2
2
Using a strong tag is appropriate.
使用强标记是合适的。
Strong tags signify something is of bigger importance, and the password being incorrect is important, as it blocks the user from proceeding.
强标记表示某些东西更重要，密码不正确也很重要，因为它阻止用户继续操作。
#3
2
Technically both elements can be used to create the appropriate looking error message that you are looking for (with the proper css). The most semantic, in my opinion would be to use the Strong tag, purely because I would want to stress the importance of a password being incorrect, without needing to use the font-weight:bold;in css.
从技术上讲，这两个元素都可以用来创建您正在查找的适当的错误消息(使用适当的css)。在我看来，最语义化的方法是使用强标记，纯粹是因为我想强调密码不正确的重要性，而不需要使用字体权重:粗体;在css中。
Also since the question of accessibility is involved, the Strong tag is better for screen readers and in turn makes it more accessible.
同样，由于涉及到可访问性问题，因此强标记对于屏幕阅读器更合适，从而使其更易于访问。
Overall, I think its quicker, easier and better to use <strong>over <span> in this scenario.
总的来说，我认为在这个场景中使用 / 会更快、更容易、更好。
#4
2
Strong is good because "Username is already taken" is a serious notice rather than a casual one.
强是好的，因为“用户名已经被占用”是一个严肃的通知，而不是一个偶然的通知。
#5
1
I'd suggest to keep it strong tag and also make use of CSS red color to display it as an error.
我建议保持它的强标签，并使用CSS红色显示它作为一个错误。
#1
6
The WCAG provides an example of error displaying using both aria-invalid and aria-describedby properties.
WCAG提供了一个使用aria-invalid和aria描述的属性显示错误的示例。
In your example, the code would be:
在您的示例中，代码是:
<label>
<b>Username</b>
<input aria-invalid="true" aria-describedby="error">
<strong id="error">Username already taken :(</strong>
</label>
The strong is appropriate as it appears to be an important notice. An alert role (rather than status) would be more appropriate to be applied to the #error element according to the W3C.
强烈的是适当的，因为它似乎是一个重要的注意。一个警告角色(而不是状态)将更适合于根据W3C应用于#error元素。
#2
2
Using a strong tag is appropriate.
使用强标记是合适的。
Strong tags signify something is of bigger importance, and the password being incorrect is important, as it blocks the user from proceeding.
强标记表示某些东西更重要，密码不正确也很重要，因为它阻止用户继续操作。
#3
2
Technically both elements can be used to create the appropriate looking error message that you are looking for (with the proper css). The most semantic, in my opinion would be to use the Strong tag, purely because I would want to stress the importance of a password being incorrect, without needing to use the font-weight:bold;in css.
从技术上讲，这两个元素都可以用来创建您正在查找的适当的错误消息(使用适当的css)。在我看来，最语义化的方法是使用强标记，纯粹是因为我想强调密码不正确的重要性，而不需要使用字体权重:粗体;在css中。
Also since the question of accessibility is involved, the Strong tag is better for screen readers and in turn makes it more accessible.
同样，由于涉及到可访问性问题，因此强标记对于屏幕阅读器更合适，从而使其更易于访问。
Overall, I think its quicker, easier and better to use <strong>over <span> in this scenario.
总的来说，我认为在这个场景中使用 / 会更快、更容易、更好。
#4
2
Strong is good because "Username is already taken" is a serious notice rather than a casual one.
强是好的，因为“用户名已经被占用”是一个严肃的通知，而不是一个偶然的通知。
#5
1
I'd suggest to keep it strong tag and also make use of CSS red color to display it as an error.
我建议保持它的强标签，并使用CSS红色显示它作为一个错误。