Как обойти предупреждение об уникальном значении атрибута id в инструменте ax

Question

У меня есть веб-страница, разработанная с использованием угловых. На странице у меня есть таблица, которая заполняется контроллером в цикле, в зависимости от значения конкретной ячейки, я встраиваю всплывающую подсказку, используя ng-include для этой ячейки. Может случиться, что всплывающая подсказка может быть включена в несколько строк в таблице, в этом случае инструмент ax будет жаловаться на нарушение уникального идентификатора атрибута для этой подсказки. Есть ли предлагаемый способ справиться с этим делом.

например. вставив простой пример. Допустим, у меня есть метод getValues ​​(), который возвращает список значений, который может быть строкой или числом, и всплывающая подсказка должна быть связана со значениями, чтобы предположить, что они являются числами или строками.

[1, "test", 2, "test2"] -> вывод будет похож на 1 (подсказка для числа) test (подсказка для строки) 2 (подсказка для числа) test2 (подсказка для строки)

<ul ng-controller="Ctrl">
    <li ng-repeat="value in values">
        {{value}} 
        <span ng-show="isNumber(value)" aria-labelledby="number-tooltip">
            <div ng-include="number-tooltip.ng">
            </div>
        </span>
        <span ng-show="isString(value)" aria-labelledby="string-tooltip">
            <div ng-include="string-tooltip.ng">
            </div>
        </span>
    </li>
</ul>

файлы всплывающей подсказки

<div id="number-tooltip" role="tooltip">
    This is a number
</div>


<div id="string-tooltip" role="tooltip">
    This is a string
</div>

Answer 1

Да, вы должны создать уникальный идентификатор... период.

Нет, Angular не делает этого изначально... https://github.com/angular/angular/issues/5145

Нет, вы не можете просто добавить индекс цикла. Каждый раз, когда цикл обновляется или вызывается в другом месте, он снова начинается с индекса 0. Вы должны добавить еще один накопительный параметр, чтобы убедиться, что он уникален на 100%... как правило, это достигается с помощью счетчика var, который подсчитывает каждый раз, когда открывается цикл. {{ counterVar + $index }}. Есть угловые плагины для этого, проверьте npm.

Нет, вопрос, который вы задаете, не является вашей самой большой проблемой. Вы решаете проблему соответствия доступности, не принимая во внимание фактическое использование вашего приложения людьми с программами чтения с экрана и надлежащей архитектурой кода, чтобы избежать снежного кома.

Реализация уникальных идентификаторов для aria-labeleledby - это флажок в истории QA или автоматизированный инструмент, с помощью которого вы проверяете свой код. Это не гарантирует, что ваш продукт может использоваться людьми с программами чтения с экрана.

Анти-шаблон это...

У меня есть код только один раз, но так как я использую ng-include для вставки файла всплывающей подсказки в нескольких местах, дерево dom получает несколько экземпляров одного и того же html с повторением данного идентификатора. - Ану 5 октября в 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.