Question

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

<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

通常，我处理此按钮时会在材质图标上添加角色，aria-state和alt文本，并在单击时更改aria-state。但是，我总是觉得我可能没有达到应有的效果。

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

（我知道WCAG（网络可访问性）的最佳实践是使用按钮组件，但是由于材质图标的独特性，这是不可能的。）

Answer 1

您需要更改一些内容：

role="toggle button"应该是role="button"
如果按下默认按钮状态，则以aria-pressed="true"开始是可以的。否则，其初始值应为false
摆脱alt，因为它不属于这里。如果要在图标中包含文本（如示例代码中所示），则无需替换任何内容。否则，请使用aria-label并将按钮文字放在此处
添加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>

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

1 个答案:

事件处理