Требуется ли использование пользовательских флажков для использования атрибутов ARIA?

Question

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

<div class="checkbox-overlay">
  <label>
    <input type="checkbox" value="true">
    <input type="hidden" value="false">
    <span class="overlay"></span>
    <span>Checkbox Label</span>
  </label>
</div>

Вот рабочий пример.

Answer 1

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

Однако в вашем примере с jsfiddle есть tabindex="0" на <label>, что может сбить с толку.Это позволит пользователю клавиатуры и пользователю программы чтения с экрана tab на ярлык, но вы не можете выбрать ярлык.

Следующая вкладка перейдет к фактическому флажку (который находится "за" вашим оверлеем), и там они могут нажать пробел , чтобы установить флажок.Но проблема в том, что, поскольку за оверлеем стоит настоящий флажок, пользователь не увидит видимый индикатор фокуса.Это будет закрыто наложением.Возможно, это то, что вы пытались исправить с помощью <label tabindex="0">.Я думаю, что вы можете решить эту проблему, используя стиль :focus-within.