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

html/alt/index.md

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

html/index.md

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