可访问性：当图标为子时更改 <button roles="button" aria-pressed="true"> 图标的最佳解决方案答案

【问题标题】：Accessibility: Best solution to change the icon of an <button roles="button" aria-pressed="true"> when icon is child可访问性：当图标为子时更改 <button roles="button" aria-pressed="true"> 图标的最佳解决方案
【发布时间】：2020-03-16 14:39:01
【问题描述】：

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

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

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

有一个带有两个 svg 图标的按钮，一个是显示：无，取决于aria-pressed 状态
拥有一个带有一个 svg 图标的按钮，该图标在点击时被替换
别的东西

【问题讨论】：

单击按钮后，我假设您正在页面上执行某些操作。如果是这种情况，您可能需要宣布页面上的某些内容已更改或关注更改的元素，如果是这种情况，我认为您对按钮的操作并不重要，因为当用户向后导航，无论通过什么方式，按钮都会改变。这个时候我比较担心按钮里面的文字
我理解你的第一句话。我更多地参考了最终的问题，因为在 dom 中同时存在两个
我不明白为什么图标会成为问题，因为一次只会出现一个。按钮的文本需要描述按钮的用途，“点击我”并没有真正说明什么，但我知道这可能只是占位符。对于您的按钮，您可以使用描述性文本或 aria 标签来告诉用户它的用途
您的 SVG 图标是否包含有关此按钮功能的任何文本信息？如果没有，他们可能应该首先获得role="presentation"。

标签： javascript html accessibility togglebutton wai-aria

【解决方案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> 添加了一个“状态切换”类，您将从“禁用”切换到“启用”只是为了清楚起见，“视觉隐藏”文本永远不会改变。还要注意“深色主题”后面的空格，以确保正确阅读。

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

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

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

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

阅读由 Hayden Pickering 撰写的 in-depth article on different ways to implement toggles，因为它提供了有关屏幕阅读器行为的大量见解以及 WAI-ARIA 支持问题/WAI-ARIA 回退的解决方法。

【讨论】：