Как мне сделать свой пользовательский флажок доступным

Question

Я пытаюсь повысить доступность сайта, над которым я работаю.У меня есть пользовательский флажок внутри кнопки, а затем список флажков.Когда я использую программу чтения с экрана, я ожидаю, что программа чтения с экрана сообщит мне, когда флажок снят / помечен.Это работает для всех флажков, кроме одного внутри моей кнопки.Назначение кнопки - пометить / снять все остальные флажки в списке (это делается с помощью JavaScript).Все работает, за исключением того, что программа чтения с экрана ничего не говорит, когда я убираю / отмечаю ее.

Здесь код:

<button id="checkAll" class="btn btn-default checkAll checkAllInit" 
data-target="#everyCheckbox">
<span class="icon icm icm-checkbox_select" role="checkbox"></span>
<span class="text">Unmark all</span></button>

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

Любые предложения приветствуются.

Answer 1

Прежде всего, элемент button не может содержать никакого "интерактивного содержимого" , т.е. никаких других элементов управления формой, audio элементов, video элементов и т. Д.

В идеале, вы должны использовать собственные элементы HTML, то есть элемент form, чтобы обернуть вокруг флажков и кнопок, и элемент input с типом , установленным в checkbox. Вам также необходимо связать метки с флажками . С этими нативными элементами вам не нужны атрибуты WAI-ARIA, такие как role='checkbox' и aria-checked; эти атрибуты WAI-ARIA фактически избыточны (см., например, статью О поясах HTML и скобках ARIA .)

Если у вас есть веские причины для создания пользовательских флажков с использованием комбинации span, CSS и JavaScript, вам потребуется дополнительная разметка, чтобы сделать эти флажки доступными:

• tabindex="O", чтобы убедиться, что пользователи клавиатуры могут достичь флажка,
• role='checkbox', чтобы программы чтения с экрана могли определить, с каким типом элемента они имеют дело,
• aria-checked (со значениями true или false), чтобы программы чтения с экрана могли определить состояние флажка,
• aria-labelledby до ассоциируйте «метку» с флажком .

Как видите, если вы используете пользовательские элементы, в которых HTML содержит нативные элементы, вы создаете для себя много дополнительной работы.

Answer 2

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

<h1>Show checkboxes:</h1>

<form action="/action_page.php">
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
  <input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>
By using this method the checkboxes will be properly accessible by default and also, screen reader will announce the state.
If there are custom checkboxes which are to be made accessible, then please refer:
https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074 

Answer 3

Это недействительный HTML.Вы можете использовать https://validator.w3.org/nu/ для проверки вашего кода.В <button> не может быть вложенных интерактивных компонентов.См. https://www.w3.org/TR/html53/sec-forms.html#the-button-element

Модель контента: Фразирование контента, , но не должно быть никакого потомка интерактивного контента .

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

Если вы не используете нативный <input type='checkbox'>, то вам нужны role='checkbox' и aria-checked.Просто переключите значение aria-checked между true и false в вашем javascript, и программа чтения с экрана объявит об этом.