我有一个按钮,上面有可见的文本"Make default",就像下面的按钮
<按钮类型=";按钮";aria标签=";单击以使这张卡成为您的默认卡">设为默认<按钮>
我想使用aria标签(为按钮提供上下文(提供可访问的名称"单击以使其成为您的默认卡"大白鲨屏幕阅读器完美阅读。但是可访问性测试规则(https://www.w3.org/WAI/WCAG21/Techniques/general/G208)失败并出现以下错误:
"严重:元素必须将其可见文本作为其可访问名称"的一部分;
由于可访问名称(aria标签(不包含显示名称("设为默认值"(,因此导致问题。
但我不能将可访问文本更改为包括显示文本(我必须使用可访问文本:"点击以使这张卡成为您的默认卡",因为要求是这样的(
那么,有什么办法可以解决这个问题吗。这样我就可以指定可访问的文本和显示名称,而不会出现上述可访问性问题。
我希望,我已经把问题解释清楚了。
非常感谢。
WCAG标准之所以有这些规则是有原因的。但是使用aria-labelledby
可以找到一个变通方法。在隐藏标签中插入帮助者文本,并将该标签的id
赋予aria-labelledby
。像这样:
<button type="button" aria-labelledby="button_message"> Make Default </button>
<label id="button_message" class="hiddenlabel">Click to make this your default card</label>
标签可能被隐藏
.hiddenlabel {
display: none;
}
注意:可见文本应该匹配或包含在咏叹调标签中。如果再次出现这种情况,您可能会修改可见文本