Добавляет материал про атрибут alt

html/alt/index.md

@@ -0,0 +1,73 @@
+---
+title: "`alt`"
+description: "Для чего нужны альтернативные описания к картинкам и какую роль играют для доступности и поисковой оптимизации."
+authors:
+  - anastasiayarosh
+related:
+  - a11y/how-to-describe-pictures
+  - html/global-attrs
+  - html/img
+tags:
+  - article
+---
+
+## Кратко
+
+`alt` — это один из атрибутов тега `<img>` в HTML. Он передаёт текстовую информацию о картинке в случае, когда она не отображается на сайте. Например, у пользователя нестабильное интернет-соединение или отображение картинок отключено в браузере.
+
+Не стоит путать `alt` с названием файла. По сути, это альтернативное текстовое описание содержания изображения, отсюда название `alt` – сокращение от «alternative». Этот текст также обеспечивает постоянную доступность веб-контента для слабовидящих пользователей.
+
+Подробнее про `alt` для доступности найдёте по [ссылке](https://www.w3.org/TR/html52/semantics-embedded-content.html#alt-text) или на этом [ресурсе](https://webaim.org/techniques/alttext/).
+
+## Правила заполнения `alt`
+
+– В атрибут `alt` добавляют текстовый эквивалент того, что изображено на фотографии. Описание должно совпадать с содержимым самой картинки. Отвечайте на вопрос, что именно изображено на картинке и какую функцию она выполняет.
+– Длина текста не должна быть меньше 3–4 слов и не больше 250 символов с пробелами. Оптимальный вариант – 5-6 слов. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Он может зачитать их как три картинки, хотя это было всего лишь одна длинная строка.
+– Можно использовать ключевые слова из тега `<h1>` или `title` страницы в том случае, если они похожи по смыслу.
+– Не используйте в тексте большое количество ключевых слов: поисковики посчитают это спамом и могут исключить из выдачи не только само изображение, но и всю страницу, на которой оно размещено.
+– Не повторяйте текст, который уже есть на странице.
+- Не начинайте описание со слов «картинка» или «изображение».
+- Отталкивайтесь от окружающего контента.
+- Следуйте правилам языка, на котором составляется описание: пунктуация, орфография.
+– Старайтесь передать эмоции и контекст, в котором находится изображение. Подробнее про передачу эмоций через атрибут `alt` можно почитать [по ссылке в блоге](https://tink.uk/text-descriptions-emotion-rich-images/).
+
+## Пустой `alt`
+
+Нет ничего плохого в пустом `alt`, если у изображения нет смыслового значения. Пропустить `alt` можно в нескольких случаях:
+
+- аватарка — имя пользователя и так у нас уже есть;
+- превью к статье — у нас уже есть заголовок, и этого будет достаточно;
+- иконки в кнопке — у нас есть роль кнопки.
+
+## Как не стоит писать пустой `alt`
+
+Если картинка оформительская и не требует `alt`, не нужно писать туда пробел, неразрывный пробел или другие знаки. Из-за этого скринридеры либо озвучат, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).
+
+Плохие примеры:
+
+```html
+<img src="image.png" alt=" ">
+<img src="image.png" alt="&nbsp;">
+```
+
+Хороший пример:
+
+```html
+<img src="img.png" alt="">
+```
+
+## Что будет, если пропустить `alt`
+
+Основных проблем две: пользователи ничего не увидят, если картинка сломалась или не подгрузилась, а скринридеры вообще не расскажут об изображении или объявят одну роль. Например, NVDA ничего не скажет, JAWS — «Графическое изображение без описания», а VoiceOver — название файла.
+
+## `alt` для SEO
+
+_SEO (Search Engine Optimization, поисковая оптимизация)_ — это развитие и продвижение сайта для его попадания на первые строчки в результатах выдачи поисковых систем (SERPs) по выбранным запросам. Основная цель SEO — увеличение посещаемости сайта и роста доходов компании за счёт этого.
+
+`alt` у картинок способствует привлечению трафика. Благодаря альтернативному описанию изображений, поисковые системы получают информацию о размещённой на страницах сайта графике. Так что `alt` полезен для оптимизации, и с ним активно работают поисковые роботы. Именно по этой причине правильно заполненный `alt` не только повышает релевантность сайта, но и позволяет быстрее найти его через поиск по изображениям.
+
+Если не заполнить `alt`, не произойдёт ничего страшного, однако можете лишиться дополнительного рейтинга и трафика, и, как следствие, потерять несколько позиций в поисковой выдачи.
+
+В содержимом `alt` нет места словам вроде «стоимость», «оформить», «купить» и похожим словам. Исключение — само изображение не лишает выбора (например, если это меню ресторана). При этом хорошо, если альтернативное описание содержит ключевое слово. Однако не переусердствуйте: переспам может навредить ресурсу.
+
+На всех страницах должны быть уникальные `alt`. Если у всех картинок будет одинаковое описание, страница может потерять позиции в поиске.

html/index.md

@@ -93,6 +93,7 @@ groups:
   - name: 'Картинки'
     items:
       - img
+      - alt
       - figure-figcaption
       - picture
       - source