Добавить описание к атрибуту (для чтения с экрана) без добавления новой метки/элемента

У меня есть элемент: <div id="container-div" role="region"></div>

Когда пользователь нажмет клавишу «R», я хочу, чтобы программа чтения с экрана читала слова

"это регион XXX"

без добавления новой метки или элемента в DOM.

(Очень важно поддерживать чистоту DOM без дополнительных скрытых меток)


javascript html accessibility wai-aria screen-readers
person Megi Ben Nun    schedule 25.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Просто добавьте атрибут aria-label, например:

<div id="container-div" role="region" aria-label="This is an XXX">

Совет: не используйте слово «Регион» в своем описании, так как программы чтения с экрана (по крайней мере, JAWS) добавляют его сами. Таким образом, если вы напишите «Это регион области XXX», программа чтения с экрана скажет «Это регион области области XXX» из-за роли.

person Andre Polykanine    schedule 25.03.2014
comment
Привет, ария-метка «регион» внутри «текстового поля» у меня не работает, предложение? - person Megi Ben Nun; 26.03.2014
comment
Область внутри текстового поля? Как это возможно? :) Не могли бы вы предоставить код, пожалуйста?) - person Andre Polykanine; 26.03.2014
comment
@MenelionElensúlë технически с ARIA вы можете сделать что угодно, если роль определена. Есть ли смысл, нет. ОП, попробуй <textarea aria-label="xxx"> - person Ryan B; 26.03.2014
comment
‹textarea role=region aria-label=текстовая область›‹/textarea›. Хорошо, если мне нужно несколько основных областей на странице, и одна из них — текстовая область. - person Megi Ben Nun; 26.03.2014
comment
Нет нет. Если вы хотите этого, вам нужно обернуть текстовое поле в div. Насколько я знаю, скринридеры не могут обрабатывать элемент формы как отдельную область, в основном это div-подобные элементы. - person Andre Polykanine; 26.03.2014