Что такое альтернативный текст? Как использовать элемент страницы для изображений
- Альтернативный текст является важным элементом дизайна веб-страницы. Это краткое текстовое описание изображения на странице.
- Замещающий текст используется инструментами специальных возможностей для чтения вслух описаний изображений для слепых или слабовидящих посетителей, а также поисковыми системами для лучшего ранжирования веб-страницы.
- Вы можете увидеть замещающий текст на любой веб-странице, проверив HTML-код страницы.
Альтернативный текст — это компонент дизайна веб-страницы. В частности, это фраза или предложение, описывающее изображение на странице.
В современном дизайне веб-страниц замещающий текст не отображается для большинства пользователей, однако он считается неотъемлемой частью хорошего веб-дизайна, и каждое изображение на странице должно иметь связанный с ним замещающий текст.
Назначение замещающего текста
Альтернативный текст служит двум основным целям. Он используется инструментами специальных возможностей чтения с экрана для чтения вслух описаний изображений для слепых, слабовидящих пользователей или тех, кому нужна дополнительная помощь при просмотре контента на странице. Хороший альтернативный текст необходим этим пользователям, чтобы им было удобно работать с веб-страницей.
Он также используется Google и другими поисковыми системами для понимания содержания изображения, что позволяет повысить рейтинг веб-страницы в результатах поиска.
Как добавить замещающий текст к изображению и увидеть его в HTML
Добавление замещающего текста зависит от веб-дизайна или системы управления контентом, используемой для создания веб-страницы. Как правило, инструмент предоставляет поле для ввода замещающего текста при загрузке изображения на веб-страницу. В большинстве случаев вы также можете впоследствии отредактировать загруженное изображение, добавив или изменив замещающий текст.
Вы можете добавить замещающий текст к любому изображению с помощью инструмента веб-дизайна или управления контентом, такого как WordPress.
Затем этот альтернативный текст кодируется на странице в HTML. Вы можете увидеть это в любом веб-браузере, используя функцию «Проверить». Например, в Chrome щелкните правой кнопкой мыши изображение на веб-странице и выберите «Проверить» в раскрывающемся меню. В Firefox щелкните правой кнопкой мыши и выберите «Проверить элемент». В обоих случаях вы должны увидеть окно с HTML-кодом страницы. Для изображения вы должны увидеть HTML-тег с надписью «alt=», за которым следует описание замещающего текста.
Вы можете использовать инструмент Inspect в браузере, таком как Chrome, чтобы увидеть замещающий текст, связанный с изображением на веб-странице.
Лучшие практики альтернативного текста
У экспертов по поисковой оптимизации (SEO) есть много рекомендаций по дизайну веб-страницы и элементам веб-страницы, таким как замещающий текст. Вы можете пройти целые курсы по этой теме. Но в целом, есть несколько основных рекомендаций относительно замещающего текста. Вот несколько общих рекомендаций по формированию хорошего альтернативного текста:
- Рекомендации по длине время от времени меняются, но в настоящее время замещающий текст не должен превышать 100 символов, включая пробелы.
- Опишите изображение четко, точно и лаконично.
- Не начинайте замещающий текст фразой вроде «Изображение…» или «Фото…». Просто опишите, что изображено на изображении.
- Не «набивайте» альтернативный текст ключевыми словами, относящимися к веб-странице, но будьте как можно более конкретными. В этом помогает как слепой, так и слабовидящий посетитель, а также Google.