Блог

Главная - Вопросы по программированию - Элементы должны использовать только разрешенные атрибуты ARIA

Элементы должны использовать только разрешенные атрибуты ARIA

#accessibility #axedevtools

Вопрос:

Какой подходящий атрибут ARIA следует использовать для тега привязки без href?

     <a class="no-underline h-100" aria-label="Fund Balance" id="card0">
    ......
    </a>

Это помечается при работе с axe DevTools, но w3.org предполагает, что я смогу использовать любые атрибуты aria.

Глобальные атрибуты aria-* и любые атрибуты aria -*, применимые к разрешенным ролям.

https://www.w3.org/TR/html-aria/#docconformance

Любая помощь в этом будет весьма признательна.

Спасибо.

Комментарии:

1. Зачем вы используете <a> , если у него нет href ? Я предполагаю, что с очень небольшим количеством информации, которую вы здесь предоставляете, это <a> принципиально не подходящий элемент для использования. Если вы приведете больше контекста, мы, безусловно, сможем сказать вам, что может быть хорошей заменой. Помните, что первое правило АРИИ-не используйте ее, если вам действительно этого не нужно.

2. Пожалуйста, обратите внимание, что, согласно MDN, привязка без href атрибута не имеет неявной роли (это означает, что она не получает значения role "link" . Кроме того, из связанного проекта W3C ARIA : «Если нажатие на ссылку запускает действие, но не изменяет фокус браузера или расположение страницы, авторам рекомендуется рассмотреть возможность использования button роли вместо link роли». Короче говоря, <button/> в этом случае может быть лучше использовать элемент a…

3. Технически, axe ошибается. Как отметил @AlexanderNied, an <a> без an href не играет никакой роли. Это все равно, что иметь <span> . A <span> разрешено иметь aria-label (хотя это, скорее всего, будет проигнорировано, см. Третий последний пункт на w3.org/TR/using-aria/#label-support ). Таким образом, an <a> без an href разрешено иметь an aria-label , но это может быть проигнорировано, как <span> и . Если вы хотите заткнуть топор, вы можете добавить role="link" в свой <a> . (Вам, вероятно tabindex="0" , тоже нужно добавить, если вы хотите, чтобы пользователь переходил по вашей ссылке.)

4. В реальном мире примером использования <a> без href будет список ссылок, который включает «заблокированный» контент, т. Е. вы должны сначала посетить ссылки A и B, прежде чем ссылка C получит свое href значение, тем самым получив роль ссылки. Я понимаю, что нулевая ссылка предпочтительнее, чем использовать disabled или aria-disabled в этом случае, потому что ссылка просто ожидает разблокировки или предоставления доступа, а не фактического отключения. Возможно, это различие слишком мало, чтобы быть важным, но вариант использования достаточно реален.

Ответ №1:

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

Если в теге привязки отсутствует допустимый href атрибут, средство чтения с экрана не интерпретирует его как метку привязки. Он также не включен в порядок вкладок на странице, поэтому он недоступен с клавиатуры.

Если вы хотите, чтобы программа чтения с экрана интерпретировала ваш элемент как тег привязки без использования href, вы можете явно добавить role="link" , а также прекратить использование вкладки tabindex="0" . Но, как отмечали другие, неясно, почему вы хотите использовать тег привязки, если он ни на что не ссылается — возможно, вам следует рассмотреть возможность использования другого элемента.

В противном случае просто добавьте допустимый href атрибут, например, href="#" который сделает ссылку видимой для читателей экрана и сделает клавиатуру ссылки доступной.

Метки: