Alt-тег в ссылке HTML: корректность использования

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

Нет, для тегов <a> предназначен атрибут title, который предоставляет дополнительную информацию о ссылке. Атрибут alt используется исключительно внутри тегов <img> для создания текстовой альтернативы изображениям. Посмотрите на пример ниже:

<a href="http://example.com" title="Перейти на сайт Example">
  <img src="link-image.png" alt="Логотип Example">
</a>

В двух словах, alt предназначен для изображений, а title — для ссылок.

Более глубокий взгляд: разбор соответствующих атрибутов

Атрибуты в HTML выполняют различные функции, подобно организмам в океане. Давайте подробнее рассмотрим этот вопрос:

Атрибут title для описания ссылок

Атрибут title служит для предоставления дополнительной информации о цели ссылки, когда текст ссылки сам по себе не передаёт полного контекста:

<a href="https://www.example.com/report.pdf" title="Скачать отчет за первый квартал">
  Квартальные отчеты // Какой именно квартал? А, понял, вот где ты, `title`! 😅
</a>

Подробнее об этом расскажет наш спикер на видео

Атрибут aria-label для придания скрытого смысла

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

<a href="https://twitter.com/example" aria-label="Следите за нами в Twitter">
  <img src="twitter-icon.png" alt="Twitter">
</a> // Твит-твит, а вот и кнопка для Твиттера! 🐦

Атрибут rel для определения отношений между ресурсами

rel задаёт взаимосвязь между текущей страницей и ресурсом, на который ведёт ссылка. Это информация о типе связи, а не о её текстовом описании:

<a href="https://example.com" rel="author">Джон Доу</a> // Вероятно, она принадлежит господину Доу?

В HTML5.1 был вновь введен атрибут rev, который обозначает обратные отношения, но он также не предназначен для описания.

Важность доступности

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

Визуализация

Представьте элементы интернета, как если бы они были реальными объектами:

⚓️ – Якорь, удерживающий корабль на месте.
🔗 – HTML-якорь, перемещающий вас из одной точки в другую.

🏷️ – Тег `alt` описывает содержание товара.

Как сочетаются 'alt' и якорь? 🤔

🏷️🔗 – Такое сочетание напоминает бирку на якоре — ведь корабль еще не отплыл от пристани!

Тег alt строго предназначен для изображений (<img>), и использовать его вместе с якорями (<a>) нежелательно.

Правильное использование `alt`: <img src="boat.jpg" alt="Лодка">
Ошибка: <a href="dock.html" alt="Ссылка на пристань">Пристань</a> // ⚠️ Внимание! Тег 'alt' приземлился не на том месте! ⚠️

Не заблудитесь в океане HTML-тегов! Соблюдайте стандарты!

Расширение горизонтов доступности и удобства использования

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

Осторожное использование title

Атрибут title может быть полезен, но следует помнить:

• Четкий текст ссылки: всегда лучший выбор.
• Контекст: позвольте вашим ссылкам самим сообщать, куда они ведут.

Улучшение ссылок с помощью ARIA

Если текст ссылки не передает достаточно информации, на помощь придут aria-label или aria-labelledby.

• aria-label предоставляет текстовую метку, позволяя элементу самоописаться.
• aria-labelledby указывает на другой элемент, который представляет текущий.

Проверка на валидность

Проверьте ваш HTML на корректность:

• W3C Markup Validator: Убедитесь, что ваш "корабль" готов к плаванию.
• WebAIM's WAVE Tool: Отыщет любые проблемы доступности, словно всевидящий радар.

Постоянное изучение нововведений в HTML

Сфера HTML постоянно эволюционирует. Держите в закладках страницу "Текущий статус HTML" W3C, чтобы быть в курсе последних тенденций и спецификаций.

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

1. HTML Стандарт — Актуальная информация по спецификации элемента <a>.
2. Обучение работе с изображениями от Веб Доступности (WAI) | W3C — Пошаговые рекомендации для создания текстовых альтернатив для изображений.
3. <a>: Элемент Якорь – HTML: Язык разметки гипертекста | MDN — Подробная информация о элементе <a> от MDN.
4. ARIA: роль img – Доступность | MDN — Информационный ресурс по ролям доступности для изображений в интернете.
5. WebAIM: Альтернативный текст — Узнайте, как создавать качественные текстовые альтернативы для изображений.
6. Чек-лист – Проект A11Y — Детальный список проверок доступности вашего сайта.
7. H37: Использование атрибутов alt на элементах img | Техники WCAG 2.0 — Разъяснение использования атрибута 'alt' в WCAG 2.0.