атрибуты aria- * недействительны или написаны с ошибками

Question

Я обычно тестировал доступность веб-сайта, используя Lighthouse в Chrome Audits.

Я наткнулся на это предупреждение:

aria- * атрибуты недействительны или написаны с ошибками.

это неисправный элемент:

<a class="issue-title muted-link" href="#" data-bi-name="issue-expander" aria-role="button" aria-expanded="false" aria-controls="issue-26732-body issue-26732-comments issue-26732-reactions issue-26732-reactions-menu" aria-label="Toggle issue">

Это ссылка на случай, если кому-то будет интересно. Раздел обратной связи для балансировщика нагрузки Azure

Мне кажется, что имена и значения aria- * действительны.

• aria-role = "button" кажется правильным.
• aria-extended = "false" кажется правильным.
• метка арии кажется правильной
• aria-controls = "...", кажется, содержит список идентификаторов, все эти идентификаторы присутствуют в DOM (хотя я не уверен, что если проверка доступности не будет выполнена, если они не присутствуют в DOM и добавляется динамически)

В чем может быть причина этого сбоя?

Answer 1

Правильное написание не aria-role, а role.См. Также атрибут роли ARIA в HTML5.2.

aria-expanded, aria-controls и aria-label верно.

Я допускаю, что сообщение об ошибке могло быть более четким, например, указав, что aria-role недопустимо.