html - 使用图标作为切换按钮时如何正确考虑 WCAG 名称、状态、值和 Angular 色

Question

我经常面临使用 Material 图标并将它们变成交互式按钮的任务。例如，可能有一个图标，单击该图标会显示文本并旋转。再次单击它时，它会旋转回原始位置并且文本消失。

<div onClick={toggleButton()}>
  <i
    role="toggle button"
    aria-pressed="true"
    alt="Toggle text"
    class="material-icons"
  >
    toggle_off
  </i>
  Random text...
</div>

<div onClick={toggleButton()}>
  <i
    role="toggle button"
    aria-pressed="true"
    alt="Toggle text"
    class="material-icons"
  >
    toggle_on
  </i>
</div>

-an if conditional would render either of these divs based on pressed or not pressed 

通常，我会处理此按钮，将 Angular 色、aria-state 和替代文本添加到 Material 图标，并在单击时更改 aria-state。然而，我总觉得我做这件事可能没有达到我应该做的那样有效。

使用作切换按钮的图标之类的东西可访问的正确方法是什么？

(我知道 WCAG(Web 可访问性)的最佳实践是使用按钮组件，但由于 Material 图标的独特性，这是不可能的。)

Answer 1

您需要更改一些内容:

1. role="toggle button" 应该是 role="button"
2. 如果您的默认按钮状态为按下，则以 aria-pressed="true" 开头是可以的。否则，它的初始值应该是false
3. 去掉alt，因为它不属于这里。如果您在图标中包含文本(如示例代码中所示)，则无需替换任何内容。否则，使用 aria-label 并将按钮文本放在那里
4. 添加 tabindex="0" 以便您的图标可以通过键盘访问

事件处理

为了使您的图标表现得像一个真正的按钮，您还需要监听空格键和回车键等键。这些击键应该被视为点击，就像真正的按钮一样。

const el = document.querySelector('my-icon');

el.addEventListener('keypress', handleKeyPress);
el.addEventListener('click', handleClick);

function handleClick() { 
  // Update aria-pressed
}

function handleKeyPress(e) {
  // Handle space-bar and enter key
}

所以，最后，您的切换图标按钮可能看起来像这样:

<i
  role="button"
  aria-pressed="false"
  class="material-icons"
>
  Button text
</i>

或(没有可见的按钮文本):

<i
  role="button"
  aria-pressed="false"
  aria-label="Button text"
  class="material-icons"
></i>