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

Часто передо мной стоит задача использовать материальные иконки и превратить их в интерактивные кнопки. Например, может быть значок, при нажатии на который отображается текст и он вращается. При повторном нажатии он возвращается в исходное положение, и текст исчезает.

<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

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

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

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


button html css wcag
person Dog    schedule 12.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно будет изменить несколько вещей:

  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>
person Andy Hoffman    schedule 12.02.2019