Возможность чтения с экрана для флажков в разных браузерах

Question

Я работаю над сайтом, который должен быть доступен почти каждому.

В настоящее время я пытаюсь найти способ сделать флажки доступными для различных типов программ чтения с экрана, используя клавиатуру для навигации по содержимому. В настоящее время я использую как стандартный Windows Screenreader, так и NVDA (см. https://www.nvaccess.org/).. Я пробовал разные решения, которые нашел в Интернете, но я все еще застрял, и мне хотелось бы получить несколько советов и трикс о том, как для реализации такого рода функций. Следует отметить, что он должен работать для разных типов браузеров (в идеале Microsoft Edge, Google Chrome и Internet Explorer).

Идеальный сценарий будет выглядеть примерно так:

1: перейдите к checkbox (или снимите флажки), используя клавишу табуляции.

2: программа чтения с экрана сообщает мне, что это checkbox, его текущее состояние (проверено, не проверено) и его метка.

3: пробел снимает галочку и проверяет мой checkbox, информируя меня о моих действиях.

Вот два разных фрагмента кода, которые я пробовал, но они работают только в Microsoft Edge и Internet Explorer:

<fieldset id="accept">
<legend> My legend </legend>
<input type ="checkbox" id ="chbox" name ="check_1">
<label for "chbox">This is my checkbox></label>
</fieldset>

И это когда я использую тег Struts checkbox.

<span class="">
<s:checkbox 
    label="someLabel"                   
    name="someName" id="accept" />
</span>

Они работают, как и ожидалось, в Microsoft Edge и Internet Explorer, но всякий раз, когда я использую Google Chrome, программы чтения с экрана испытывают трудности с определением моего контента. Сценарий у меня:

1: Я вкладываю вкладку в свой Checkbox, программы чтения с экрана говорят "Tab".

2: я использую клавишу пробела, чтобы снять флажок, средства чтения с экрана сказать "Космос". (Это все еще снимает мой флажок, хотя)

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

Любая помощь приветствуется,

Заранее спасибо.

Answer 1

Ну, это вроде Chrome Issue.

Отметьте это , поскольку вы не единственный.

Я не знаю никакого решения для этого, я столкнулся с этим несколько лет назад, к счастью, мне просто нужно было сделать это в A / AA.

Answer 2

Стоит отметить, что Narrator не поддерживает сторонние (не Microsoft) браузеры.

Answer 3

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

Относительно этого флажка в последних рекомендациях ARIA указывается использовать структуру DOM <label><input>Text</label> сверх <label for>.

Или используйте aria-label на флажке. Но второй способ менее рекомендуется из-за отличной поддержки от браузера / программы чтения с экрана. В некоторых плохих случаях они могут игнорировать или читать дубликаты другим способом, чтобы прочитать строку.