在努力实现WCAG 2.0合规性的过程中，我发现了关于按钮正确处理的各种信息，特别是需要考虑按钮的可访问性和合规性。
标记<button>的适当方法是什么？他们需要具备哪些属性或组合？
我的按钮分为三类：
例如，在以下3中的简单示例中：http://codepen.io/ga-joe/pen/ggeLeW
为没有文字的按钮添加aria-label属性是否可以接受？总是需要name和/或value吗？请发送帮助！谢谢！
这些似乎是相关的WCAG指南：
答案 0 :(得分：7)
这些问题总是取决于背景。让我给它一个无用的背景。
<button>Learn More</button>只要在上下文中有人会理解他们将会学到更多内容，就会有所作为。通常，按钮前面有一些描述性文本。但是，如果它只是将某人带到另一个页面而不是触发模态，我会使用链接。
<button aria-label="Close">×</button>关闭按钮（我使用×的字符实体，它比 x 更对称。再次，如果按钮位于模态的顶部（例如），可能与其标题相邻，那么这可能就足够了。
<button aria-label="Image 1">[icon]</button>适用于旋转木马。请注意，如果字体未下载，则可能会丢失字体图标。对于IE11和旧版Edge，Windows背景图像将在Windows高对比度模式（WHCM）中消失。 aria-label无法帮助WHCM用户。可能最好使用图像（甚至是SVG）及其alt属性，这意味着您不需要aria-label。
您不需要name属性。它在这里没什么用处。
不要使用role="button"属性。该角色自动成为<button>元素的一部分。如果你指定另一个角色，那么你就有一个大问题。
绝对不要使用title属性。这弊大于利。
答案 1 :(得分：1)
具有描述其预期操作的文本的按钮。 （例如“了解更多”以启动包含更多产品信息的模式）
即使我们没有谈论链接，您也可以阅读WCAG 2.4.9 Link Purpose (Link Only)的建议。在上下文中可以理解“了解更多”这个文本，但对于需要屏幕放大镜的低视力用户，例如，从按钮文本本身理解动作可能很困难。
例如文本了解更多关于“公交车上的车轮”似乎更合适。
具有不描述其操作的文本的按钮。 （例如“X”或标题为手风琴内容部分的文字）
我在另一篇文章中回答了这个问题： What is aria-label and how should I use it?
您必须同时使用aria-label（对屏幕阅读器很有用）和title属性（对于使用可能需要更多支持的标准浏览器的标准用户）：
<button
aria-label="Back to the page"
title="Close" onclick="myDialog.close()">X</button>
没有描述其预期动作或其他内容的文本的按钮。 （例如，切换旋转木马上下文的图标/图像）
同样的推理可以适用于这一点。但对于盲人来说，将旋转木马向左或向右移动是一种不同的体验，有时是无用的。如果他们可以忽略他们看到的旋转木马，不丢失任何内容，使用键盘或他们的辅助技术导航，那么你就是在做预期的事情。
此外，您必须永远不要忘记accessibility不仅针对盲人用户，还针对儿童，老人，有认知或敏感残疾的人。例如，aria-label永远不足以在需要时帮助那些人。他们没有屏幕阅读器，也没有阅读HTML源代码。
如果用户使用“语音识别软件”（是的，他们不是很多，但让他们改善生活），没有任何可见的文字也会导致困难。