Пусть программа чтения с экрана произнесет все тексты в DIV

Question

У меня есть div, как указано ниже.Я хочу, чтобы каждый текст в div произносился как вкладка пользователя в этом div.В этом случае, когда пользователь вкладывает во внешний div, программа чтения с экрана читает item.X и item.Y (элемент является переменной).

<div tabindex="0">
    <div>{{item.X}}</div>
    <div>{{item.Y}}</div>
 </div> 

Я пытался дать это div a role="link", и оно читает все, но это div не ссылка, поэтому я не думаю, что это правильный подход.

<div tabindex="0" role="link">
    <div>{{item.X}}</div>
    <div>{{item.Y}}</div>
 </div> 

Я также попытался сделать следующее, но, похоже, aria-label не работает с угловой интерполяцией.

<div tabindex="0" role="link" aria-label="{{item.X}}">
    <div>{{item.X}}</div>
    <div>{{item.Y}}</div>
 </div>  

Как правильно достичь моей цели?

Answer 1

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

Во-первых, у вас есть <div tabindex="0">, который позволяет перемещать фокус клавиатуры на этот элемент, но этот элемент некажется, ничего не делать.Это не интерактивный элемент.В спецификации html есть предупреждение для tabindex.

Авторы должны делать элементы фокусируемыми, только если они действуют как интерактивные элементы управления или виджеты

Если ваш

что-то делает (возможно, у вас есть обработчик кликов в javascript), тогда у вас все равно будет проблема, потому что ваш

не имеет никакого семантического значения.Программа чтения с экрана не будет знать цель

.Вот тогда role вступает в игру.Если вы разработали собственную ссылку вместо элемента , а ваша пользовательская ссылка была составлена ​​из элементов

, тогда у вас будет role="link" на вашем

.Цель этой роли не в том, чтобы заставить весь текст быть прочитанным.Цель состоит в том, чтобы донести до вспомогательных технологий (таких как программа чтения с экрана) значение этого объекта.

Что касается использования aria-label, опять же, это зависит от семантикисмысл вашего элемента.aria-label обычно игнорируется на несемантических элементах, таких как

или .См. Спецификацию W3 для "

Практическая поддержка: aria-label, aria-labelledby и aria-описаныby "

В частности, третья последняя буква гласит:

Не используйте aria-label или aria-labelledby для span или div, если ему не назначена роль.

Но опять же, не назначайте случайную роль вашему

просто для того, чтобы заставить ярлык быть прочитанным.

По сути, вы ищете "доступное имя"быть прочитанным. вычисление доступного имени хорошо определено.

См. Шаги 2.F и 2.F.ii относительно «имени из содержимого» и прохождения по дочерним элементам в DOM.Но это опять-таки зависит от роли.

Итак, в вашей ситуации, не зная цели вашего

, сложно дать конкретный совет.