Доступность: aria-hidden="true" (скрыть для чтения с экрана) с фокусируемыми элементами (разрешить доступ с клавиатуры)

#accessibility #hidden #wai-aria #focusable

Вопрос:

Я хочу скрыть этот div-переключатель тем от программ чтения с экрана, так как они необходимы для изменения цветов темы. Но это должно быть доступно для пользователей клавиатуры.

Моя проблема в том, что не допускается наличие фокусируемых элементов внутри узла, скрытого aria.

Существует ли обходной путь или наилучшая практика для решения такого рода проблем?

 <div id="theme-switcher" aria-hidden="true">
  <button>Light</button>
  <button>Dark</button>
</div>

1. Вопрос в том, почему вы скрываете переключатель тем от программ чтения с экрана? Не все люди, которые используют программу чтения с экрана, слепы, и возможность переключиться в темный режим может быть полезна тем, кто использует программу чтения с экрана для облегчения понимания. Удалите aria-hidden атрибут. Что касается того , нужно ли вам скрывать содержимое aria-hidden , добавление tabindex="-1" -это решение, так как оно останавливает фокусировку кнопок.

Ответ №1:

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

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

Поэтому вам лучше оставить переключатель цветов как есть, не скрывая его для чтения с экрана.

Ответ №2:

Я думаю, что нашел решение.

Реализовав ссылку «перейти к содержимому», этот и любые другие блоки можно пропустить. Так что нет необходимости добавлять сюда какой-либо скрытый от арии тег.