Следующий пример представляет собой типичное поле формы для сбора имени. У меня есть aria-describeby на входе, ссылающаяся на две разные текстовые области, которые помогают описать функцию ввода.
- Первая ссылка, описанная в aria, - это то, что я назвал «Подсказкой», и в основном это текст атрибута-заполнителя на входе (он же теневой текст, который вы видите в задней части текстового поля). Текстовая область «Подсказка» - это диапазон с классом, который явно скрывает его, но все равно будет прочитан программами чтения с экрана.
- Вторая ссылка, описанная в aria, - это то, что я называю «Справка», это текст информационного пузыря (рядом с меткой вы можете щелкнуть синий значок (i), чтобы получить текст справки).
Моя дилемма! Используя программу чтения с экрана JAWS и пролистывая область поля формы, он читает информационное сообщение. Затем, когда я перехожу к вводу, он читает метку, текст-заполнитель, текст подсказки, который является текстом-заполнителем, который я поместил в диапазон, и наконец, текст справки, который снова является текстом всплывающей подсказки. Мне кажется, что ария, описанная пользователем, не нужна, потому что информация была прочитана дважды!
С другой стороны, если я извлеку арию, описанную пользователем, я также могу вызвать проблемы с тем, что я прочитал в Интернете. Некоторые вспомогательные технологии не читают текст-заполнитель, поэтому я должен иметь его там, чтобы убедиться, что информация прочитана. Информационный пузырь просто помещается рядом с ярлыком, а не его частью (так что связь с «элементом управления / ярлыком» может быть случайно пропущена).
(Пример того, о чем говорилось выше)
<div class="form-group">
<span class="required" aria-required="true"><i title="Required" class="fas fa-asterisk fa-cl" aria-hidden="true"></i><span class="sr-only">Required</span></span>
<label for="Textbox3836">First Name</label>
<span tabindex="0" role="button" class="text-info help-icon" data-balloon-pos="down" data-balloon-length="large" id="Textbox3836_Help_desc" aria-label="Tip: Please enter your legal first name."><i class="fas fa-info-circle fa-lg" aria-hidden="true"></i></span>
<input class="form-control" type="text" id="Textbox3836" name="Textbox3836" maxlength="250" placeholder="Ex: Andrew" data-identifier="Text box" aria-describedby="Textbox3836_Hint_desc Textbox3836_Help_desc">
<span class="sr-only" id="Textbox3836_Hint_desc">Example Andrew</span>
</div>
Вот информационное окно, показывающее
Не забывайте, каких пользователей мне нужно поддерживать, и какие вспомогательные технологии они будут использовать.
- Слепой (продукты для чтения с экрана, такие как JAWS или NVDA)
- Нарушение зрения (продукты, увеличивающие экран, такие как ZoomText или SuperNova)
- Физические нарушения (продукты для голосовой навигации, такие как Dragon Natural Speak)
Дополнительная информация: Что касается информационного пузыря, то раньше это был тег значка с установленным заголовком, но это функция только мыши и не подходит для вспомогательных технологий.
