我正在尝试开发一个符合 WCAG 标准的网络应用程序,当前为 codesniffer给了我很多:
This element has a role of "button" but does not have a name available to an accessibility API. Valid names are: element content.
来自这个 HTML:
<span unselectable="on" class="k-select" aria-label="abcd" role="button" alt="abcd" title="abcd" value="abcd">
<span class="k-icon k-i-calendar"></span>
</span>
设置alt
、value
、title
和aria-label
似乎没什么用。
我怎样才能使符合 WCAG 的元素带有 role="button"而其中没有文本?
最佳答案
Adam 将其转换为 <button>
是正确的.这是从一开始就最好的方法,也意味着您可以转储 role="button"
.这也意味着您可以免费访问交互(例如,您不必听空格键或回车键)。
与其尝试制作 <button>
本身有易于访问的名称,将其放在图标上。如果您始终如一地这样做,您可以确定该图标始终具有可访问的名称,无论它是否位于按钮或链接之类的控件中。
考虑一下这个 HTML:
<button class="k-select">
<span class="k-icon k-i-calendar">Calendar</span>
</button>
现在你有一个普通的按钮,它还没有用属性来尝试使其可访问。另一方面,该图标现在包含文本,并且成为可访问的名称。
现在应用此 CSS 规则以在视觉上隐藏该文本:
.k-icon {
position: absolute;
top: auto;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap; /* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
}
我通常将它作为一个实用程序类 (.visually-hidden
),以便我可以在任何地方应用它。
FontAwesome talks about an approach similar to this在其网站上以使其图标易于访问。
使用这种方法,您不需要任何 ARIA、任何一次性代码解决方案或任何脚本。这首先适用于您的图标(真正的问题),并且意味着当这些图标用于其他地方(链接、按钮等)时,它们是可访问的。
此外,alt
都不是也不value
对按钮有效。 aria-label
是不必要的。 Definitely avoid title
.
关于html - WCAG 合规性 - 角色为 ="button"且无内容的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44403098/