Как правильно написать alt-текст
- 13 апреля 2020
Alt
— обязательный атрибут тега <img>
. Это альтернативное описание для изображений, которые не видят пользователи:
- из-за медленного соединения;
- из-за неправильного пути или имени файла в атрибуте
src
; - так как пользуются скринридерами.
Перед тем, как перейти к примерам, разберёмся с необходимостью альтернативного текста в разных ситуациях.
Когда alt-текст нужен
У любого изображения, которое иллюстрирует или дополняет текст. Например, для изображений в теге <a>
, если у ссылки нет текстового содержимого.
<a href="/courses">
<img src="keks.jpg" alt="Кекс приглашает на курсы">
</a>
Как правильно писать
- Кратко. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Очень длинные строки он может зачитать как три картинки, хотя это было всего лишь одна длинная строка.
- Чётко. Нужно ответить на вопрос, что именно изображено на картинке? Какую функцию она выполняет?
- Уникально. Не повторяйте текст, который уже есть на странице.
- Не начинайте со слов «картинка» или «изображение».
- Отталкивайтесь от окружающего контента.
- Следуйте правилам языка, на котором составляется описание: пунктуация, орфография.
Примеры использования
Картинка

<img src="ml.jpg" alt="Динозавры">
Так можно описать, если в статье есть текст, который рассказывает о фотографии.
Если текста нет, например, у нас галерея изображений, тогда нужно описать картинку более детально:
<img src="ml.jpg" alt="Два динозавра в национальном парке Анза-Боррего на фоне звёздного неба. Один большой, другой маленький">
Ссылка
<a href="/blog">
<img src="blog.jpg" alt="Перейти на главную страницу блога">
</a>
Начинать текст с «ссылка» не нужно, роль уточнения играет сам тег <a>
.
Диаграмма

<img src="chart.png" alt="Диаграмма с результатами опроса о том, что мешает пользователям на удалёнке">
Если текста со статистикой нет, то придётся всю статистику вынести в alt
:
<img src="chart.png" alt="Еда — 10%, соседи — 15% ...">
Картинка с текстом

Просто переносим текст в alt
:
<img src="courses.png" alt="HTML Academy Бесплатные онлайн-курсы...">
Figure и figcaption

Всё равно пишем нормальный alt
, так как в figcaption
обычно маленькое описание:
<figure>
<img src="image.jpg" alt="Рабочее место Тани">
<figcaption>Таня ушла на разминку</figcaption>
<figure>
Когда alt-текст не нужен
Когда картинка декоративная и не имеет смысла.
- Аватарка: имя пользователя и так у нас уже есть.
- Превью к статье: у нас уже есть заголовок, и этого будет достаточно.
- Иконки в кнопке.
Как не стоит писать
Если картинка оформительская и не требует alt
, то не нужно писать туда пробел или его аналоги.
Плохие примеры:
<img src="image.png" alt=" ">
<img src="image.png" alt=" ">
Если так делать, то скринридеры, либо начнут говорить, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).
Что будет, если забыть про alt-текст
Основных проблем две: пользователи ничего не увидят, а скринридеры могут прочитать неправильно или не то. Например, NVDA ничего не скажет, JAWS скажет «Графическое изображение без описания», а VoiceOver скажет название файла.
Но иногда бывают картинки, которым не добавляют alt
. Например, это поиск «рыжий кот», и в поисковой выдаче показываются тысячи рыжих котов. Смысла указывать alt
нет.
Чаще всего в такой ситуации вообще удаляют alt
:
<img src="orange-cat-1.jpg">
Но в этом случае некоторые скринридеры начнут читать src
, что ещё хуже. Поэтому лучше оставлять пустой alt
. Из двух зол выбирают наименьшее.
<img src="orange-cat-2.jpg" alt="">
Искусственный интеллект и alt
ИИ в социальных сетях неплохо справляется с генерацией текстов для изображений. Наглядные примеры — в соцсетях или гугл-картинках с отключенными изображениями.

Если посмотреть сейчас на автоматическую генерацию текстов, то там всегда присутствует доля предположения — «на изображении может находиться 1 человек».

С абстрактными картинками всё ещё хуже, так как ИИ вообще не понимает, что происходит.
Литература
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport
.
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport
, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
- 18 сентября 2023

Атрибут class в HTML на примерах
Атрибут class
используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
<!-- Один класс -->
<div class="container">
<!-- ... -->
</div>
<!-- Несколько классов -->
<div class="container special-box">
<!-- ... -->
</div>
- 14 сентября 2023

В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: <blockquote>
, <cite>
и <q>
. Давайте разберёмся в их различиях.
- 12 сентября 2023

Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023

Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023

Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1>
до <h6>
. Каждый уровень заголовка имеет свой семантический вес, где <h1>
имеет наибольший вес, а <h6>
— наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023

Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG
IH�aV
PLTE�������0�
IDAcZ�d���� �W=
S�3�o;���]P
���IEND�B`�~
Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
<svg width="20">
<rect fill="#fc0"
width="20"
height="20"/>
<line stroke="black"
x1="0" y1="0"
x2="20" y2="20"/>
</svg>
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023

Как создавать адаптивные изображения. Атрибут srcset
Адаптивные изображения автоматически изменяют свой размер, чтобы соответствовать экрану пользователя, что улучшает вид страницы и ускоряет загрузку.
Давайте рассмотрим несколько способов создания адаптивных изображений.
🎓 В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.
- 25 мая 2023

В чём разница между <p> и <br>
Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.
- 24 мая 2023

Как сделать таблицу в HTML
<table>
— один из основных элементов HTML, который используют для отображения данных (текста, изображения или другого элемента) в ячейках на странице. Таблица состоит из строк и столбцов.
Основные теги, используемые при создании таблицы:
<table>
— определяет начало и конец таблицы. Всё содержимое таблицы должно находиться между<table></table>
.<thead>
— определяет заголовок таблицы. Заголовок может содержать одну или несколько строк, в которых могут использоваться теги<th>
для определения заголовков столбцов.<tbody>
— определяет тело таблицы. Тело содержит одну или несколько строк, в которых могут использоваться теги<td>
для определения содержимого ячеек.<tfoot>
— определяет нижний колонтитул таблицы. Колонтитул может содержать одну или несколько строк, в которых могут использоваться теги<td>
для определения содержимого ячеек.<tr>
— определяет строку таблицы. Каждая строка должна находиться между тегами<tbody>
,<thead>
или<tfoot>
.<th>
— определяет заголовок столбца или строки таблицы. Используется внутри тегов<thead>
и<tr>
.<td>
— определяет содержимое ячейки таблицы. Используется внутри тегов<tbody>
,<tfoot>
и<tr>
.<caption>
— определяет заголовок таблицы, который будет размещен над таблицей. Используется внутри тега<table>
.
- 16 мая 2023