Как правильно учитывать имя, состояние, значение и роль WCAG при использовании значка в качестве кнопки переключения

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 

Обычно я обрабатываю эту кнопку, добавляя роль, состояние арии и текст alt к значку материала и изменяя состояние арии при нажатии.Однако я всегда чувствую, что могу делать это не так эффективно, как следовало бы.

Как правильно сделать значок, используемый в качестве кнопки переключения, доступным?

(я знаю, что для WCAG (доступность в Интернете) рекомендуется использовать компонент кнопки, ноиз-за уникальной природы значков материалов это невозможно.)

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>