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

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

В настоящее время я пытаюсь найти способ сделать флажки доступными для различных типов программ чтения с экрана, используя клавиатуру для навигации по содержимому. На данный момент я использую стандартную программу чтения экрана Windows и 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, назначая роли и веб-арии, но ничего не работает. Поскольку я совершенно новичок в этом, мне бы понравились некоторые «лучшие практические» идеи и советы.

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

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


person yuggmeister    schedule 07.05.2018    source источник


Ответы (3)


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

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

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

person Dennis C    schedule 07.05.2018
comment
К сожалению, я застрял со Struts, и кажется, что мне нужно использовать флажок Struts, чтобы кнопка отправки действительно работала. Кажется, я не могу смешивать кнопку отправки struts со стандартным флажком html (‹input type=checkbox... vs ‹s:checkbox›. - person yuggmeister; 08.05.2018

Ну, это своего рода проблема Chrome.

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

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

person RwkY    schedule 07.05.2018

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

person Léonie Watson    schedule 28.05.2018