如何标记WCAG 2.0合规性的按钮？

Question

在争取WCAG 2.0合规性的过程中,我发现了关于按钮正确处理的各种信息,特别是要考虑按钮可访问和兼容的要求.

标记a的适当方法是<button>什么？他们需要具备哪些属性或组合？

我的按钮分为三类:

1. 具有描述其预期操作的文本的按钮.(例如"了解更多"以启动包含更多产品信息的模态)
2. 具有不描述其操作的文本的按钮.(例如"X"或标题为手风琴内容部分的文字)
3. 没有描述其预期操作或其他内容的文本的按钮.(例如,切换旋转木马上下文的图标/图像)

例如,在上面3的简单示例中:http://codepen.io/ga-joe/pen/ggeLeW

是否可以只aria-label为没有文字的按钮添加属性？是name和/或value总是需要？请发送帮助!谢谢!

这些似乎是相关的WCAG指南:

• https://www.w3.org/TR/WCAG20/#text-equiv-all
• https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs
• https://www.w3.org/TR/WCAG20/#ensure-compat-rsv

Answer 1

这些问题总是取决于背景.让我试试一下sans上下文.

1. <button>Learn More</button>只要在上下文中有人会理解他们将会学到更多的东西.通常,按钮前面有一些描述性文本.但是,如果它只是将某人带到另一个页面而不是触发模态,我会使用链接.

2. <button aria-label="Close">&#215;</button>对于关闭按钮(我使用×的字符实体,它比x更对称.再次,如果按钮位于模态的顶部(例如),可能与其标题相邻,那么这可能就足够了.

3. <button aria-label="Image 1">[icon]</button>可以为旋转木马工作.请注意,如果字体未下载,则可能会丢失字体图标.对于IE11和旧版Edge,Windows背景图像将在Windows高对比度模式(WHCM)中消失.这aria-label对WHCM用户无益.可能最好使用图像(甚至是SVG)及其alt属性,这意味着您不需要aria-label.

您不需要name属性.它没有任何用处.

不要使用role="button"属性.该角色自动成为<button>元素的一部分.如果你指定另一个角色,那么你就有一个大问题.

绝对不要使用title属性.这弊大于利.