javascript - 辅助功能:当图标为子级时更改 图标的最佳解决方案

Question

我需要一个每个州都有不同图标的切换按钮。图标按钮如下所示:

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

如果我想更改图标 ( <svg> )，从辅助功能的 Angular 来看，什么是更好的解决方案？

1. 有一个带有两个 svg 图标的按钮，而一个是显示的:无，具体取决于 aria-pressed状态

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

3. 其他东西

Answer 1

最简单的解决方案是从可访问性的 Angular 来看根本不依赖 SVG。

因此，对于它们两个，您都可以使用 aria-hidden="true"和role="presentation" (因为旧屏幕阅读器对每个版本的支持可能不稳定)。

正如您可能知道的那样，我建议使用两个图标并将它们替换为 display:none在其中一个或另一个上，或者更好的是为什么不花哨并在状态之间进行转换。

请注意，从辅助功能的 Angular 来看(因为我们将它们隐藏在屏幕阅读器中)并不重要，无论您使用两个图像还是使用一个图像并用 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 中添加了“事件”和“隐藏”类，显然您最好只拥有“事件”或“隐藏”类并默认为某种状态，但这是出于演示目的。

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

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

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

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