基础 CSS 按钮可访问性

在网站开发中，按钮是最常见的用户交互元素之一。在设计和实现按钮时，我们需要考虑到可访问性，确保所有人都能够使用我们的网站，而不管他们是否视觉上有障碍。

下面是一些基本的 CSS 按钮可访问性技巧，可以帮助您创建可访问性更好的按钮。

使用语义正确的 HTML

按钮最基本的原则是使用正确的 HTML 标记来创建它们。使用 <button> 元素来表示一个按钮：

<button>Click me!</button>

不要使用 <a> 元素、<span> 元素或其他方式来模拟一个按钮。这违反了 HTML 的语义，会给使用助听器的用户带来困惑。

添加 aria-label 属性

除了使用正确的 HTML 元素外，您还需要确保按钮具有适当的文本描述。对于没有任何文本标签的按钮，使用 aria-label 属性来提供一个文本描述。

<button aria-label="Search">🔍</button>

这将使助听器用户能够了解按钮的作用，而没有可见的文本标签。

使用 title 属性

如果您希望为按钮提供附加的上下文信息或提示，可以使用 title 属性：

<button title="Delete this item">Delete</button>

这将为按钮提供一个悬浮文本标签，告诉用户它的作用。

请注意，尽管 title 属性可以为按钮提供额外的上下文信息，但不是所有用户都能够正确地使用它。这是因为某些助听器在读取 title 属性时可能会有一些问题。因此，我们仍然需要提供适当的文本标签。

对焦和激活状态

按钮的可用状态应该通过 CSS 与按钮状态类来标识：

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

对于对焦和激活状态，您可以使用 :focus 和 :active 伪类：

button:focus,
button:active {
  outline: none;
  box-shadow: 0 0 3px 3px rgba(0, 0, 255, 0.6);
}

这些类可以提高按钮的可见性，让用户知道哪个按钮是当前激活的。

相关 ARIA 属性

除了上述技巧之外，您还可以使用其他一些 ARIA 属性来进一步提高按钮的可访问性。

例如，您可以使用 aria-describedby 属性来提供与按钮相关的其他文本（如一个提示或错误消息）：

<button aria-describedby="error-message">Submit</button>
<span id="error-message">Please fill out all fields before submitting.</span>

您还可以使用 aria-haspopup 属性来指示按钮打开的内容是一个下拉菜单或弹出式窗口：

<button aria-haspopup="true">Menu</button>

有关更多 ARIA 属性，请访问 W3C ARIA 规范。

结论

创建可访问性更好的按钮需要一些额外的工作，但这是值得的。通过使用适当的 HTML 元素、正确的文本标签和其他可访问性技术，您可以帮助尽可能多的用户尽可能轻松地使用您的网站。