alt Атрибут используется для назначения текстовой альтернативы img. Альтернативный текст используется всякий раз, когда изображение не визуализируется, а также вспомогательными технологиями, такими как программы чтения с экрана. Кроме того, поисковые системы, предлагающие возможности поиска по изображениям, полагаются на altтекст для определения значения изображений. Предоставление alt значения для изображений на самом деле не являются обязательными, это то, что вы обязательно должны сделать, если вы дизайнер, разработчик или веб-мастер. Однако, используя alt правильный атрибут так же важен, как и его использование в первую очередь.
Рекомендации по правильному использованию альтернативного текста
При правильном использовании текстовые альтернативы для визуальных элементов означают, что пользователи, которые не могут просматривать изображения, могут использовать все функциональные возможности веб-сайта. Однако, когда текстовые альтернативы используются неправильно, они могут создать путаницу. Следуйте этим простым правилам , чтобы предоставить посетителям вашего сайта наилучшие впечатления.
Всегда указывайте альтернативный текст
Может показаться излишним говорить об этом, но вы всегда должны добавлять altотносится к каждому изображению, которое вы используете на веб-странице. Даже в некоторых особых случаях, когда текст не предоставляется, altатрибут должен по-прежнему присутствовать и оставаться пустым.
Помогите программам чтения с экрана пропустить эстетические изображения
Когда программа чтения с экрана встречает изображение без altатрибут, он просто скажет посетителю веб-сайта «изображение». Это заставляет посетителя задаться вопросом, какую информацию они могут пропустить. Однако, если атрибут альтернативного текста присутствует, но оставлен пустым, например alt="", средство чтения с экрана понимает, что изображение следует полностью пропустить. Используйте эти знания, чтобы сообщить вспомогательным технологиям, таким как программы чтения с экрана, какие изображения следует просто пропустить. Если у вас есть изображения, предназначенные исключительно для дизайнерских или эстетических целей (например, изображение, используемое для отображения горизонтальной полосы), укажите пустой атрибут альтернативного текста, чтобы вспомогательные технологии знали, что они должны полностью игнорировать изображение.
Дублируйте сообщение, передаваемое изображением
Какую информацию несет изображение? Инкапсулируйте эту информацию в краткое заявление и используйте его в качестве текстовой альтернативы. Точка altтекст должен передавать посетителю, который не может видеть изображение, то же самое значение, что и само изображение, чтобы посетитель мог его видеть. В случаях, когда изображение содержит текстовую информацию, просто укажите тот же текст, что и на изображении. altтекст.
Сообщите посетителям, куда идут связанные изображения
Изображения часто используются в качестве ссылок на другие веб-сайты. Это может быть случай, когда вы используете изображения кнопок для ссылок, или вы можете просто связать изображение в статье с источником изображения. Если вы связываете изображения с другими веб-сайтами, используйте альтернативный текст изображения, чтобы сообщить пользователям, куда ведет ссылка.
Особые случаи
Следуя приведенным выше рекомендациям, вы будете предлагать лучшие текстовые альтернативы, чем многие обычные веб-сайты. Хотя эти рекомендации охватывают подавляющее большинство потребностей в альтернативном тексте, есть несколько особых случаев, о которых вам следует знать.
Используйте 125 символов или меньше
Многие вспомогательные технологии обрабатывают текст фрагментами по 125 символов. Улучшите работу пользователей программ чтения с экрана, ограничив альтернативный текст 125 символами. Если вы не можете обрезать altтекст до 125 символов, предоставьте расширенное описание на отдельной странице и ссылку на него. Например, если у вас есть изображение диаграммы, которое нельзя обобщить менее чем в 125 символов, назначьте изображению краткий альтернативный текст, например «диаграмма чего-то удивительного» (но на самом деле сообщите посетителю, какая удивительная вещь показана на картинке). диаграмму). Есть два разных способа дополнить краткий альтернативный текст расширенным описанием, которое содержит гораздо больше деталей:
- Сразу под изображением вставьте ссылку, которая говорит что-то вроде Расширенное описание Awesome Diagram и ссылку на отдельную страницу с расширенным описанием.
- Сразу под изображением или рядом с ним добавьте заглавную букву D и ссылку на расширенное описание на отдельной странице. Эта ссылка называется D-Link , и несколько экспертов по доступности выступают за ее использование, но мы предпочитаем и рекомендуем метод, описанный выше.
Другим способом предоставления расширенного описания в прошлом было использование longdescатрибут. Однако вы должны знать, что это устарело в HTML5 и больше не является хорошим способом предоставления расширенного описания. Пропускать longdescи используйте один из двух методов, описанных выше, чтобы предоставить расширенное описание сложного изображения.
Предоставьте краткое описание изображений, которые уже были описаны
Будут случаи, когда вы будете использовать изображение и описывать его в тексте абзаца на странице. Например, вы можете опубликовать фотографию с недавней рыбалки и включить в текст абзаца на странице описание изображения, которое будет выглядеть примерно так: «Я отлично провел время на рыбалке в прошлые выходные и поймал 7-фунтового окуня, который вы смотрите на картинке!» В таком случае по-прежнему важно предоставить текстовую альтернативу изображению, но используемый текст может быть очень коротким. В случае нашего примера с рыбалкой хорошо altтекст может выглядеть примерно так: alt="weekend fishing trip".
Очки, чтобы помнить
Надлежащее использование altатрибут можно резюмировать четырьмя ключевыми моментами:
- Всегда используйте al tатрибут, даже если вы оставите его пустым.
- Сделайте альтернативный текст кратким.
- Дублируйте информацию, переданную изображением.
- Сообщите посетителям, куда идут связанные изображения.
Теперь вы знаете, как важно предоставить текстовую альтернативу каждому изображению на вашем сайте. Более того, вы знаете, как правильно использовать альтернативный текст, чтобы он был максимально эффективным.