可访问性测试失败:元素的可见文本必须作为其可访问名称的一部分



我有一个按钮,上面有可见的文本"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;
}

注意:可见文本应该匹配或包含在咏叹调标签中。如果再次出现这种情况,您可能会修改可见文本

最新更新