辅助功能：更改<button roles="button" aria-pressed="true">图标为子时</button>的图标的最佳解决方案

Question

我需要一个切换按钮，每个状态都有不同的图标。 图标按钮如下所示：

<button type="button" role="button" aria-pressed="false">
    <svg class="icon">...</svg>
    <span>Disabled</span>
</button>

如果我想更改图标 ( <svg> )，从可访问性的角度来看，更好的解决方案是什么？

1. 有一个带有两个svg 图标的按钮，而一个是 display: none 取决于aria-pressed状态

2. 有一个带有一个svg 图标的按钮，该按钮在点击时被替换

3. 别的东西

Answer 1

对此最简单的解决方案是从可访问性的角度完全不依赖 SVG。

因此，对于它们，您将使用aria-hidden="true"和role="presentation" （因为在较旧的屏幕阅读器中，每个支持都可能不稳定）。

正如您可能会说的那样，我建议使用两个图标并用display:none交换它们，或者更好的是为什么不在状态之间进行幻想和转换。

请注意，从可访问性的角度来看（因为我们将它们隐藏在屏幕阅读器中），无论您是使用两个图像还是使用一个图像并用 JavaScript 交换它们都无关紧要，如果图标位于 DOM 中，则维护起来更容易，而不是与在 JavaScript 中使用丑陋的 SVG 标记相比。

您在按钮中已经有一些文字显示“已禁用”，我假设根据按钮状态将更改为“已启用”。

在这个阶段，您需要做的就是添加一些视觉上隐藏的文本（请参阅下面的 CSS 以在视觉上隐藏某些内容，但仍允许屏幕阅读器访问它）解释按钮功能。

因此，如果此按钮要启用深色主题，您将添加一些视觉上隐藏的文本来解释按钮的用途。

将所有这些放在一起，您会得到以下内容：-

<button type="button" role="button" aria-pressed="false">
    <svg class="icon active" aria-hidden="true" role="presentation" focusable="false">...</svg>
    <svg class="icon hidden" aria-hidden="true" role="presentation" focusable="false">...</svg>
    <span class="visually-hidden">Dark Theme </span><span class="state-toggle">Disabled</span>
</button>

视觉隐藏的 CSS

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

您会看到我在<span>添加了一个“state-toggle”类，您将从“禁用”切换到“启用”，只是为了说明这一点，“视觉隐藏”文本永远不会改变。 还要注意“黑暗主题”后面的空格，以确保正确阅读。

我还在两个 SVG 中添加了“活动”和“隐藏”类，显然你最好只拥有一类“活动”或“隐藏”并默认为一个状态，但这是为了演示目的。

另请注意，我向 SVG 添加了focusable="false" ，否则 Internet Explorer 可能会由于错误而使 SVG 成为焦点。

最后一个考虑是aria-pressed也有片状支持，您似乎正在创建一个“切换”（尽管使用不同的图标而不是开关）。

您正在做的事情完全有效并且应该可以工作，但您可以考虑使用复选框。

阅读这篇由 Hayden Pickering 编写的关于实现切换的不同方法的深入文章，因为它提供了许多有关屏幕阅读器行为的见解以及 WAI-ARIA 支持问题/WAI-ARIA 回退的解决方法。