Нужен ли ярлык aria для базовых (всех) тегов ссылок?

Question

Попытка выяснить, почему аудит Lighthouse пометил кучу моих ссылок как сбойные elements have discernible names

<h3>
  <a href="https://..." class="custom classes here">My New Post Title</a>
</h3>

Мой вопрос: все ли ссылки нужны aria-labels, потому что я подумал, что это нормальноссылка текст внутри ссылки это то, что требуется?

Или что-то еще происходит со структурой моей разметки?Еще один помеченный элемент:

<a class="custom classes" href="https://...">
  <div class="custom classes" style="background-image: url('https://...');"></div>
  <div class="article-thumbnails-small__title">Post Title</div>
</a>

Для этого я понимаю, что у a нет текста, поэтому aria-label должен идти в div с фактическим названием поста, правильно?

решено Я смотрел не на тот элемент ... Хорошего дня.

Answer 1

Атрибут aria-label в ссылках (элементы a с атрибутом href) следует использовать только в том случае, если по какой-либо причине невозможно или нежелательно использовать воспринимаемый текст ссылки.(Это включает в себя атрибут alt в ссылках на изображения.) Если у вас обычный текст ссылки, вам не следует использовать атрибут aria-label, поскольку этот атрибут переопределит текст ссылки.См. шаг F альтернативного вычисления текста в документе Доступное имя и описание Вычисление 1.1: элементу a присуща роль, которая позволяет вычислять его имя из его содержимого (т.е. текст ссылки и / или атрибут alt для img в ссылке).Однако этот шаг выполняется только в том случае, если в элементе ссылки есть атрибут no aria-label (см. step C .

См. Также Принцип 2:ARIA может и скрывать, и улучшать, создавая силу и опасность в WAI-ARIA Authoring Practices 1.1, которая указывает, что ARIA иногда переопределяет исходную семантику или контент, приводя в качестве примера aria-label.

Так что, если Lighthouse помечает ссылки с воспринимаемым текстом ссылки и без атрибута aria-label, должно быть что-то еще, например CSS, который скрывает элементы.

Answer 2

Оба ваших примера хороши и не должны быть помечены.Что-то еще должно происходить.Является ли код, который вы опубликовали, именно тем, что тестировалось?

Атрибуты ARIA следует использовать с осторожностью и использовать их только тогда, когда собственная разметка недостаточна.Для ссылок, как вы сказали, если между <a>...</a> есть какой-либо текст, то это «различимый текст».

Если ссылка не имеет прямого текста, но если есть дочерний элемент, то вы 'также хорошо, как ваш второй пример.У <a> нет текста, но у второй <div> есть «Заголовок сообщения».Все дочерние элементы <a> учитываются при поиске «различимого текста».Когда я вкладываю на эту ссылку, я слышу "Заголовок сообщения, ссылка" из программы чтения с экрана.

Однако CSS может повлиять на это.Если ваш class="article-thumbnails-small__title" на втором <div> имеет display:none или visibility:hidden, то этот текст будет не различимым, потому что он скрыт.

Если класс имеет width/height:0px, тогда это может также не быть различимым.Иногда элементы размером 0 считаются скрытыми.

Если ваша ссылка не имеет текста, но имеет вложенный <img>, если на изображении есть текст alt, то все в порядке.

Хорошо:

<a href="foo.html">
  <img src="foo.jpg" alt="foo">
</a>

Нет различимого текста:

<a href="foo.html">
  <img src="foo.jpg">
</a>