Заставить программу чтения с экрана читать этикетку при входе в Div

У меня есть div, содержащий несколько элементов динамической формы. Я хочу, чтобы метка была прочитана программами чтения с экрана при вводе div через табуляцию, но сам div (и должен быть) нефокусируемым. Обычно использование атрибута for на метке или атрибута aria-describeby / aria-labeleledby в первом элементе формы допускает такое поведение, но элементы формы изменяются динамически во время загрузки, поэтому первый элемент является неопределенным.

<label/> <%-- This should be read --%>

<div> <%-- When this div is entered during navigation with tabbing --%>
     <dynamic form element 1>
     ...
     <dynamic form element n>
</div>

Кто-нибудь знает способ вызвать такое поведение через WIA-ARIA?

В качестве альтернативы, возможно, есть способ использовать javascript для извлечения первого элемента под div и динамического добавления необходимых атрибутов для / aria?


javascript html wai-aria jaws-screen-reader screen-readers
person GDavies    schedule 25.08.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы хотите сделать страницу доступной, вам, вероятно, следует использовать правильные семантические элементы. Это позволяет программам чтения с экрана и другим вспомогательным технологиям правильно отображать элементы для своих целей. Кажется, что ваш div должен быть элементом формы и использовать набор полей и легенду, а не использовать div для создания формы. Вы всегда должны избегать изобретения велосипеда.

<form method="" action="">
    <fieldset>
        <legend>This will be read when the user tabs to this</legend>
        <dynamic form element 1>
         ...
        <dynamic form element n>
    </fieldset>
</form>

Это избавит вас от необходимости использовать метки ARIA, если у вас нет конкретной информации, которую нужно предоставить только этим пользователям. Использование правильных семантических элементов может иметь большое значение для того, чтобы сделать страницу доступной для вспомогательных технологий. Эта ссылка, как и многие другие, содержит полезную информацию о том, как сделать формы доступными в html: https://www.w3.org/WAI/tutorials/forms/

person A-Dub    schedule 29.06.2017

arrow_upward
0
arrow_downward

Используйте элемент <fieldset> для контейнера вместо простого <div>. Программы чтения с экрана объявят метку набора полей, когда фокус попадет в любое поле внутри него.

person Alex Tokarev    schedule 02.09.2016