Решение проблемы «Links do not have discernible name» в Lighthouse

Быстрый ответ

Для решения проблемы в Lighthouse надлейте ссылке понятное текстовое название. Используйте атрибут aria-label для ссылок без текста и используйте атрибут alt для текстового описания, если ссылка представлена изображением.

<!-- Текст ссылки должен быть понятен, как если бы вы разговаривали с другом -->
<a href="https://example.com">Подробнее</a>

<!-- Для изображений-ссылок укажите описание, как если бы вы объясняли его значение -->
<a href="https://example.com"><img src="icon.png" alt="Просмотр профиля"></a>

<!-- Если текста нет, можно использовать aria-label -->
<a href="https://example.com" aria-label="Читать наши блог-посты">Узнать больше</a>

Настройте теги <a>, чтобы они предоставляли понятную и контекстуально подходящую информацию, улучшая пользователям с отклонениями внимания доступ к контенту. Повторно пройдите аудит вашего проекта в Lighthouse после внесения изменений.

Атрибут 'aria-label': Ваш ключ к доступности

Aria-label — это как незаменимый инструмент для улучшения доступности веба, особенно для элементов без видимого текста. Если у вас есть цветные изображения или иконки, которые служат ссылками без сопроводительного текста, этот атрибут будет спасительным решением.

<a href="https://socialnetwork.com/user/profile" aria-label="Просмотреть профиль пользователя">
  <img src="user-icon.svg" alt="" />
</a>

Скринридер произнесет: "Просмотреть профиль пользователя". И таким образом, отсутствие видимого текста уже не является проблемой.

Утончённость скрытого текста

Хотите сохранить чистоту дизайна страницы и одновременно улучшить его доступность? Это реально! Рассмотрите использование скрытого элемента <span> и свойства aria-hidden="true":

<a href="https://example.com">
  <img src="search-icon.svg" aria-hidden="true" />
  <span class="visually-hidden">Поиск</span>
</a>

Установите в CSS свойство "visually-hidden" для этого элемента <span>, чтобы скрыть текст от посетителей сайта, но не от скринридера:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* добавлено для поддержки читалки Orca */
}

Таким образом, ваша страница становится привлекательной и при этом доступной.

Атрибут 'title': недооценённый помощник

Хотя aria-label играет главную роль, атрибут title также может быть отличным помощником, добавляя дополнительные сведения при наведении курсора:

<a href="https://example.com" title="Узнать больше о наших услугах" aria-label="Услуги">
  <img src="services-icon.svg" alt="" />
</a>

Сочетание title и aria-label обеспечивает надежную поддержку браузерных технологий доступности.

Атрибуты для всплывающих окон

Планируете использовать всплывающие элементы или диалоговые окна? Отлично! Используйте атрибуты aria-haspopup="true" и tabindex="0" для улучшения интерактивной доступности:

<a href="#" aria-haspopup="true" tabindex="0" aria-label="Открыть диалог настроек">
  <img src="settings-icon.svg" alt="" />
</a>

Пользователи ожидают интерактивного пользовательского опыта при нажатии на ссылку.

Визуализация: наглядный путеводитель по эмодзи

Воспользуемся эмодзи, чтобы разобраться с замечаниями Lighthouse:

• Markdown

  Скопировать код

  🔳[]

  Неизвестная ссылка вызывает вопрос у Lighthouse. Это похоже на неразмеченный 🎁 — неясно, что внутри.

• Markdown

  Скопировать код

  🔳[ 🖼️ 'Золотые ворота']

  Но с правильной подписью внешний вид ссылки становится понятным, как на 🎁 с ярлыком.

Таким образом, предупреждение Lighthouse: "Ссылка не имеет понятного названия" — это просто напоминание: "Правильно прописывайте названия ваших ссылок". Это похоже на то, как мы маркируем 🎁.

Работа со ссылками, которые используют фоновые изображения

Ссылки, которые используют фоновые изображения, могут выглядеть впечатляюще, но могут принести проблемы. В этом случае aria-label выполнит функцию спасателя:

<a href="https://example.com/discounts" aria-label="Посмотреть товары со скидкой" style="background-image: url('sale-banner.svg'); width: 200px; height: 100px;"></a>

В этом случае, ссылка выглядит великолепно и ясно передает ее назначение — отличное сочетание.

Работа с динамическим контентом

Динамический контент, в частности ссылки, загружаемые с помощью AJAX, также должен быть правильно оформлен и отмечен. Убедитесь, что ваш скрипт обновляет атрибут aria-label или альтернативные тексты (alt), отражая изменения в содержании.

Атрибут 'title': элегантный проводник

Атрибут title нельзя использовать как замену aria-label или визуального текста. Воспринимайте его как дополнение к основному контенту, а не как основу доступности.

Полезные материалы

1. WebAIM: Ссылки и гипертекст – Текст ссылок и внешний вид — Подробное руководство по созданию доступных ссылок.
2. Понимание критерия успеха 2.4.4: Цель ссылки (в контексте) | WAI | W3C — Тщательный анализ стандартов WCAG для определения целей ссылок.
3. <a>: Элемент якоря – HTML: HyperText Markup Language | MDN — Все тонкости о теге <a>.
4. Доступность для всех | web.dev — Руководство по проведению аудитов доступности с помощью Lighthouse.
5. H30: Предоставление текста ссылок, описывающего их цель, для элементов якорей | Техники для WCAG 2.0 — Методы W3C для улучшения восприятия ссылок, делая их содержательными и понятными.
6. Ссылки не имеют описательного текста | Lighthouse | Руководства для разработчиков Chrome — Подробная инструкция, как сделать ссылки уникальными и описательными по рекомендациям Lighthouse.
7. Написание гиперссылок: Заметные, описательные, начинающиеся с ключевого слова — Дополнительные советы по улучшению гиперссылок от Nielsen Norman Group.