Да, вы должны создать уникальный идентификатор ... точка.
Нет, Angular не делает этого изначально ... https://github.com/angular/angular/issues/5145
Нет, вы не можете просто добавить циклиндекс.Каждый раз, когда цикл обновляется или вызывается в другом месте, он снова начинается с индекса 0.Вы должны добавить еще один накопительный параметр, чтобы убедиться, что он на 100% уникален ... как правило, это достигается с помощью счетчика var, который подсчитывает каждый раз, когда открывается цикл.{{counterVar + $ index}}.Для этого есть подключаемые модули Angular, проверьте npm.
Нет, вопрос, который вы задаете, не является вашей самой большой проблемой. Вы решаете проблему соответствия Accessibility без учета фактического удобство использования вашего приложения людьми с программами чтения с экрана и правильной архитектурой кода, чтобы избежать снежного кома.
Реализация уникальных идентификаторов для aria-labelbyby - это флажок в вашей истории QA илиавтоматизированный инструмент, с помощью которого вы проверяете свой код.Это не гарантирует, что ваш продукт может использоваться людьми с программами для чтения с экрана.
Анти-паттерн - это ...
У меня есть код только один раз, но так как я используюng-include, чтобы вставить файл всплывающей подсказки в нескольких местах, дерево dom получает несколько экземпляров одного и того же html с повторением данного идентификатора.- Anu Oct 5 at 23: 10
Если я правильно вас понимаю, вы говорите, что у вас есть только один файл на всплывающую подсказку, но вы вводите его снова и снова для каждого экземпляра, где используется всплывающая подсказка.
Программа чтения с экрана собирается читать все.Это означает, что вы должны управлять состоянием каждого элемента, используя атрибут aria-hidden.Что означает, что вам придется кодировать больше вещей.Вам нужно будет рассмотреть обратную совместимость (возможно, использовать отображение: нет вместо aria-hidden) и многое другое.
Пожалуйста, прочитайте: https://accessibility.athena -ict.com / aria / examples / tooltip.shtml
Эта ссылка содержит информацию о том, что вам нужно создать, чтобы получить полезную подсказку для программ чтения с экрана.
Анти-шаблон, который вы используете, по моему мнению, внедряеткомпонент всплывающей подсказки html снова и снова.Даже гид, которого я связал, делает это, но он старый.Это не то, как приложения создаются сегодня, особенно фреймворки в стиле Angular.
Эти платформы созданы для отслеживания и управления значениями DOM и узлов.Они быстро обновляют значения DOM и Interpolating, но это означает, что они должны отслеживать все.
Эти фреймворки разработаны таким образом, чтобы на странице было как можно меньше HTML.Это означает, что они могут тратить больше ресурсов на «наблюдение», готовые визуализировать желаемый вид и заменять HTML-код как можно быстрее, когда что-то должно выглядеть по-другому.
Это не буквальный пример, но представьте, что фреймворкпомещает слушателя в каждый элемент DOM.Имеется ощутимая разница в загрузке ресурсов, просто рендеринг 500 элементов без слушателей, теперь рендеринг 500 элементов и применение 500 слушателей ... спросите разработчика Angular, что происходит, когда вы нажимаете 1k наблюдаемых элементов.
Конечно, это может не относиться кваше приложение.Но вы можете себе представить, как нг, включая каждую подсказку, может быстро выйти из-под контроля.Особенно, если это контролируемый пользователем контент или таблица заполняется без нумерации страниц.
Это долгий способ сказать ... у вас должно быть столько <li>, сколько вы хотите, но должно быть ОДИНКомпонент подсказки.«Состояние» всплывающей подсказки должно управляться через реквизиты, переданные ей любым количеством способов.Вы можете сделать это с данными, но, скорее всего, с его Angular вы должны передать скрытое от арии состояние, уникальный идентификатор, его отображение: состояние и его содержимое (innerHTML) с использованием компонентов Angular.
Кроме того, вам придется проверить и управлять фокусом.В зависимости от того, как настроено средство чтения с экрана или как они его используют, они будут перемещаться с использованием именованных элементов, поэтому возможно, что они пропустят то, что вы хотите прочитать, из-за используемой структуры вложенности.Вы можете управлять этим с помощью атрибутов aria и role, чтобы убедиться, что программа чтения с экрана использует правильные элементы для запуска нужного кода.
т.е.они попадают в ваш <li>, потому что это именованный элемент, он читает «12345», потому что это первое значение узла, которое он находит ... но всплывающая подсказка не сработает, пока вы не достигнете того, в котором находится сама подсказка.Порядок действий должен быть таким, что <li>, который, скорее всего, будет выбран при любой настройке программы чтения с экрана, является aria-labledby, обертывающим подсказку.Та же концепция, что и у <label for="">.
Полный перечень задач в области ролей и управления областями Aria см. - https://www.levelaccess.com/how-not-to-misuse-aria-states-properties-and-roles/
Я собрал фрагмент кода, который будет отображать ваш код, если список содержитнесколько значений.Прочитайте вслух следующий HTML-код, каждый элемент ...
<ul>
<li>
12345
<span aria-labelledby="number-tooltip">
<div>
<div id="number-tooltip" role="tooltip">
This is a number
</div>
</div>
</span>
</li>
<li>
some string
<span aria-labelledby="string-tooltip">
<div>
<div id="string-tooltip" role="tooltip">
This is a string
</div>
</div>
</span>
</li>
<li>
some string
<span aria-labelledby="string-tooltip">
<div>
<div id="string-tooltip" role="tooltip">
This is a string
</div>
</div>
</span>
</li>
<li>
some string
<span aria-labelledby="string-tooltip">
<div>
<div id="string-tooltip" role="tooltip">
This is a string
</div>
</div>
</span>
</li>
<li>
some string
<span aria-labelledby="string-tooltip">
<div>
<div id="string-tooltip" role="tooltip">
This is a string
</div>
</div>
</span>
</li>
</ul>
Не можете пройти через него правильно?Представьте себе, как вы просматривали Интернет.Теперь, благодаря Aria, она намного лучше, но если она не реализована правильно и не протестирована с точки зрения юзабилити, вы можете непреднамеренно обслужить пользователя с таким же опытом.
Все это звучит как большая работа.Это так, но как только вы сделаете это в первый раз, во второй раз это будет намного быстрее.Прочитайте учебное пособие, приведенное выше, и перенесите эти понятия в свои инструментальные подсказки Angular, и вы действительно решите проблему взаимодействия с человеком, а также примете свой контрольный список Aria QA.