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

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

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

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

（我知道 WCAG（Web 可访问性）的最佳做法是使用按钮组件，但由于 material 图标的独特性，这是不可能的。）

Answer 1

您需要更改一些内容：

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

事件处理

为了使您的图标表现得像一个真正的按钮，您还需要监听 space 栏之类的键并输入键。这些击键应该被视为点击，就像真正的按钮一样。

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>

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

How to properly account for WCAG name, state, value, and role when using an icon as a toggle button

html

css

button

wcag

事件处理