Как правильно написать alt-текст — журнал «Доктайп»

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="&nbsp;">

Если так делать, то скринридеры, либо начнут говорить, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).

Что будет, если забыть про alt-текст

Основных проблем две: пользователи ничего не увидят, а скринридеры могут прочитать неправильно или не то. Например, NVDA ничего не скажет, JAWS скажет «Графическое изображение без описания», а VoiceOver скажет название файла.

Но иногда бывают картинки, которым не добавляют alt. Например, это поиск «рыжий кот», и в поисковой выдаче показываются тысячи рыжих котов. Смысла указывать alt нет.

Чаще всего в такой ситуации вообще удаляют alt:

<img src="orange-cat-1.jpg">

Но в этом случае некоторые скринридеры начнут читать src, что ещё хуже. Поэтому лучше оставлять пустой 

alt. Из двух зол выбирают наименьшее.

<img src="orange-cat-2.jpg" alt="">

Искусственный интеллект и alt

ИИ в социальных сетях неплохо справляется с генерацией текстов для изображений. Можно ознакомиться в Фейсбуке, Инстаграме или Гугл-картинках.

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

С абстрактными картинками всё ещё хуже, так как ИИ вообще не понимает, что происходит.

Литература

• Рекомендации W3C по alt-текстам (англ.)
• Альтернативный текст в доступности (англ.)
• Использование ИИ для генерации alt-текста на изображениях (англ.)
• Accessibility: Images, «Alt» tags, and the «Out Loud» Experience (англ.)

---

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Селекторы атрибутов в CSS: продвинутая стилизация

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи «Advanced Styling using CSS Attribute Selectors».

CSS — тот самый друг, которого мы, разработчики, и любим, и ненавидим. Одно из его неоспоримых достоинств — возможность выбирать элементы по их атрибутам.

Такие атрибуты как class и id используются довольно часто, поэтому их мы касаться не будем. Вместо этого рассмотрим обращение к элементам по другим атрибутам и их значениям.

Селектор

[атрибут]

Селектор [атрибут] позволяет выбрать элементы с определенным атрибутом. Пример:

img[alt] {
  border: 2px solid yellow;
}

В данном случае мы выбираем исключительно изображения, имеющие атрибут alt. Им мы добавим желтую рамку.

<img src=".  /../../images/dog.png" alt="cute white dog"/> // Выбран, имеет желтую рамку
<img src="./../../images/cat.png"/>// Не выбран, нет рамки

Селектор

[атрибут="значение"]

Селектор [атрибут="значение"] выбирает элементы, содержащие указанный атрибут с конкретным значением.

Строки значений атрибутов по умолчанию регистрозависимы, но это можно изменить, если добавить «i» перед закрывающей квадратной скобкой, как показано ниже:

img[alt="paper"] { //Регистр учитывается
  border: 2px solid yellow;
}
img[alt="PapEr" i] {  //Регистр не учитывается
  border: 2px solid yellow;
}
Указанные селекторы захватят одинаковые элементы.

Пример:

 <img src=". /../../images/paper.png" alt="paper"/> // Выбран, есть желтая рамка

Указанные селекторы выбирают только изображения, имеющие атрибут alt со значением «paper».

Селектор

[атрибут*="значение"]

Этот селектор используется для выборки элементов, указанные атрибуты которых имеют значения, содержащие указанную подстроку (в любом месте).

img[alt*="ter"] {
  border: 2px solid yellow;
}

Пример:

<img src="./../../images/paper.png" alt="alter"/> // Выбран, есть желтая рамка
<img src="./../../images/paper.png" alt="termite"/> // Выбран, есть желтая рамка
<img src=".
 
  ="hat"] {
  border: 2px solid yellow;
}

Пример:

<img src="./../../images/hat.png" alt="hat"/> // Выбран, есть желтая рамка
<img src="./../../images/ronaldo.png" alt="hatrick"/> // Выбран, есть желтая рамка

Селектор

[атрибут|="значение"]

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

 img[alt|="front"] {
  border: 2px solid yellow;
}

Пример:

<img src=". /../../images/linda.png" alt="front-end-developer"/> // Выбран, есть желтая рамка
<img src="./../../images/linda.png" alt="frontend-developer"/> // Не выбран, нет рамки
<img src="./../../images/location.png" alt="front"/> // Выбран, есть желтая рамка

Селектор

[атрибут$="значение"]

Селектор [атрибут$="значение"] используется для выборки элементов, значения атрибутов которых заканчиваются указанной подстрокой. Эта подстрока не обязательно будет отдельным словом.

 img[alt$="tion"] {
  border: 2px solid yellow;
}

Пример:

<img src="./../. ./images/banner.png" alt="education"/> // Выбран, есть желтая рамка
<img src="./../../images/linda.png" alt="hand-lotion"/> // Выбран, есть желтая рамка

Область HTML alt Атрибут

❮ Тег HTML

Пример

Используйте атрибут alt, чтобы указать альтернативный текст для каждой области на карте изображения:

Попробуйте сами »

---

Определение и использование

Атрибут alt определяет альтернативный текст для области, если изображение не может быть отображен.

Атрибут alt предоставляет альтернативную информацию для изображения, если пользователь по какой-то причине не могу его просмотреть (из-за медленного соединения, ошибка в src атрибут, или если пользователь использует программу чтения с экрана).

Атрибут alt требуется, если присутствует атрибут href .

---

Поддержка браузера

Атрибут
альтернативный	Да	Да	Да	Да	Да

---

Синтаксис

Значения атрибутов

Значение	Описание
текст	Указывает альтернативный текст для области, если изображение не может быть отображено

---

❮ Тег HTML

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

900 90 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

CSS может помочь улучшить ваш HTML⁉ — Эпизод 1: атрибуты alt

CSS, при правильном использовании, может сделать ваш HTML лучше!

В этой мини-серии я буду использовать CSS для принудительного использования правильных элементов HTML, необходимых атрибутов для доступности и т. д. в нашем HTML.

Есть два аспекта.

Во-первых, мы структурируем наш CSS так, что использование неправильного элемента или атрибутов невозможно, и стили не будут работать, если ваш HTML неправильный!

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

В качестве простого введения в эту концепцию мы воспользуемся вторым методом (таблица стилей проверки ошибок при разработке) и рассмотрим, как мы можем использовать CSS, чтобы гарантировать, что мы всегда помним наши атрибуты alt (но также допускаем декоративные изображения там, где атрибуты alt должны быть). оставить пустым!)

1. Определение отсутствующих атрибутов alt.

В качестве первого шага мы собираемся использовать две вещи.

Сначала нам нужно идентифицировать все изображения, в которых полностью отсутствует атрибут alt .

 изображение: не ([альт])
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Фактически это означает:

• img — Выбрать все изображения
• :not( — Если не применимо следующее
• [alt] — атрибута нет (атрибут обозначается квадратными скобками [] ) с именем alt (бит в квадратных скобках — это атрибут, который мы выбираем).

Теперь давайте применим стиль к любым изображениям ( img ), у которых нет ( :not ) атрибута ( [имя атрибута] ) alt .

Другая проблема, которую нам нужно выявить, это когда атрибут alt присутствует, но кто-то не заполнил его.

 img[alt=""]
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Фактически это означает:

• img — Выбрать все изображения
• [] — с атрибутом
• альт — альт атрибут
• ="" — не заполняется (пусто).

В последней части также будут обнаружены атрибуты alt, которые являются нулевыми, поэтому они будут соответствовать alt и alt="" .

Пример

Система управления контентом (CMS) по умолчанию

В приведенном выше примере вы могли заметить проблему.

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

например.

С нашим текущим решением они пройдут наш тест, хотя этот замещающий текст совершенно бесполезен!

Теперь вам придется настроить это для вашей CMS, но принцип прост:

 img[alt="Alt Text"]
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Мы просто ищем любой элемент img , который имеет точный альтернативный текст «Alt Text» (который вы бы заменили выводом вашей CMS по умолчанию).

А как же декоративные изображения?

Хотя наша пустая проверка альтернативного текста может быть хорошим началом, мы иногда хотим оставить атрибут alt пустым специально .

Добавляя пустой атрибут alt, мы сигнализируем вспомогательным технологиям, таким как программа чтения с экрана, что «это изображение является декоративным и не должно объявляться».

Итак, как мы можем идентифицировать эти изображения в нашем HTML?

Введите

роль = "нет представления"

Если вы новичок в HTML, возможно, вы еще не знаете о WAI-ARIA.

WAI-ARIA — это способ, с помощью которого мы можем предоставить вспомогательным технологиям дополнительную информацию, чтобы сделать страницу более понятной.

Ярким примером может служить программа чтения с экрана. Это часть программного обеспечения, которое преобразует ваш HTML в вывод (обычно произносимый текст), чтобы кто-то, кто слеп (например), все еще мог использовать ваш веб-сайт.

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

Но, как я упоминал ранее, иногда у нас есть изображение, которое не добавляет ценности странице (например, фоновое изображение), о котором мы не хотим объявлять.

В то время как пустой атрибут alt гарантирует, что он не будет объявлен, я считаю хорошей практикой добавить role="presentation" к img , чтобы гарантировать, что изображение не будет объявлено.

Поясню немного: многие элементы имеют семантическое значение (элемент объявляется как изображение, элемент

объявляется как раздел, поэтому разные части страницы составляют смысла для программ чтения с экрана и т. д.).

role="presentation" сообщает вспомогательным технологиям: «Эй, этот элемент не имеет семантического значения или значения, обращайтесь с ним как с

«, поэтому он не объявляет тип элемента и т. д.

Таким образом, это добавляет дополнительный уровень безопасности, как если бы кто-то случайно добавил некоторый текст в атрибут alt на декоративном изображении, он все равно ничего не объявит (поскольку вы не можете иметь атрибут alt на

по сути).

Кроме того, есть улучшение WAI-ARIA, где вы должны добавить role="none" в будущем вместо role="presentation" , так как гораздо яснее, что вы удаляете семантическую информацию, говоря » none» вместо «презентация» (хотя они делают одно и то же, это синонимы).

К сожалению, поддержка role="none" пока невелика, и мы находимся в точке перехода, поэтому рекомендуется использовать role="presentation none" для максимальной совместимости и будущего подтверждения вашего HTML на момент.

Объединяя все это

Итак, нам нужно решение, которое:

• находит отсутствующие атрибуты alt
• находит пустые атрибуты alt
• находит атрибуты alt с определенным значением (в нашем примере «Alt Text»)
• игнорирует отсутствующие атрибуты alt для элементов с ролью , содержащей комбинацию «презентация» и/или «нет».

Окончательный селектор CSS и пример

Конечный селектор CSS выглядит так:

 img:not([alt]),
img[alt="Альтернативный текст"],
img[alt=""]:нет([роль="нет презентации"]):нет([роль="презентация"])
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Итак, у нас есть первый селектор для проверки существования атрибута alt на изображении (как всегда должно быть, даже если он нулевой или пустой!).

Затем у нас есть вторая проверка (разделенная запятой для обозначения нового селектора) для нашего вывода CMS, чтобы напомнить нам изменить его.

Затем у нас есть третья проверка, которая выберет что-нибудь с пустым атрибутом alt, при условии, что у него нет роли «представление» или роль «отсутствие представления».

Обратите внимание, что это по-прежнему не будет работать на role="none" , так как поддержка невелика, и role="none Presentation" , так как на самом деле это не возвращается к презентации и не будет работать в вспомогательных технологиях, которые не поддерживаются. поддержка роль="нет" .

Это именно то, что нам нужно!

Пример

В следующем CodePen я настроил несколько тестов с ожидаемыми состояниями над ними. Как видите, наш селектор работает так, как ожидалось! эй!

Можем ли мы пойти дальше?

Да, конечно можем!

Мы также можем обнаружить плохие практики с фактическим содержанием атрибутов alt!

Что я имею в виду?

Что ж, если вы пишете альтернативные описания, которые начинаются со слов «изображение» или «изображение», они бесполезны и могут сильно раздражать пользователей вспомогательных технологий (помните, что они уже знают, что это изображение, потому что мы использовали цифру 9).= ) текст «Изображение» ( «Изображение» ).

Однако здесь есть проблема!

Если бы у нас было «изображение», оно не совпало бы, поскольку селекторы чувствительны к регистру по умолчанию, а «Изображение» не совпадает с «изображением» в отношении селектора!.

К счастью, у нас есть еще одна хитрость в рукаве!

Мы можем добавить «i» к нашему селектору атрибутов, чтобы сделать его нечувствительным к регистру (обратите внимание на пробел перед буквой i!)!

Таким образом, наш окончательный селектор становится: 9=»картинка» я] Войти в полноэкранный режимВыйти из полноэкранного режима

И теперь мы можем выделять любые элементы с плохими атрибутами alt! (очевидно, примеров плохой фразировки больше, чем приведенных здесь!)

Последний пример

Вот последний пример, в котором мы добавили еще два теста внизу, которые должны отображаться оранжевым пунктирным контуром из-за альтернативного текста, начинающегося с «изображение» и «изображение».

Проверка других атрибутов!

Если вы еще не слышали о Core Web Vitals, это 3 показателя, используемые Google для оценки качества/скорости вашей страницы.

Один из них называется Суммарное смещение макета .

По сути, он измеряет, насколько сильно страница «прыгает» во время загрузки, что может раздражать пользователей и приводить к непреднамеренным кликам и т. д.

Одной из основных причин смещения макета являются изображения.

Чтобы избежать смещения макета, современные браузеры могут выделять пространство, занимаемое изображением на странице до ее загрузки, при условии, что вы используете соотношение сторон в вашем CSS или присвойте своему изображению атрибут ширины и высоты (что обычно лучше, если у вас несколько форм и размеров изображения).

Итак, чтобы проверить, есть ли у нашего изображения атрибуты ширины и высоты, мы можем использовать:

 img:not([width]),
изображение: не ([высота])
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Это тот же принцип, что и при проверке полностью отсутствующего атрибута alt , который мы делали ранее.

Я бы добавил это как «предупреждение», если вы специально не укажете, что хотите, чтобы все изображения имели атрибуты ширины и высоты в вашем внутреннем руководстве по разработке!

длинное описание

Большое спасибо Альваро за то, что напомнил мне об этом атрибуте, посмотрите их вещи, это здорово!

Поклонник CSS ⊆ Веб-разработчик ⊆ Разработчик программного обеспечения ⊆ Человек (Он/Он)

Проверил вещи Альваро? Отлично, давайте вернемся к этому!

Еще одна вещь, которую мы можем сделать, это проверить наличие устаревших/плохо поддерживаемых атрибутов, таких как longdesc

На этот раз мы хотим сделать обратную нашим предыдущим проверкам отсутствие атрибута (мы хотим увидеть, существует ли он для скиньте ошибку).

Таким образом, мы можем использовать:

 img[longdesc]
 

Войдите в полноэкранный режимВыйдите из полноэкранного режима

и добавьте предупреждение (поскольку longdesc не причинит никакого вреда, если у вас уже есть хорошее описание alt ).

Заключение

Эта таблица стилей является полезным способом применения передовых методов работы с изображениями.

Как и все, не без недостатков.

Не работает, например, для людей с нарушениями зрения.

Тем не менее, это хорошо, как часть вашего набора инструментов для разработки, если у вас нет нарушений зрения и вам нужен быстрый и грязный способ увидеть, запомнили ли вы свои альтернативные атрибуты / сделали их правильно!

В следующей части этой серии мы рассмотрим использование CSS, чтобы убедиться, что плохие привычки HTML не сохраняются (например, использование

), сделав так, чтобы только правильный элемент позволял стилизовать.