У изображений на этой странице отсутствует атрибут alt: Отсутствует значение тега ALT в WordPress Gravatar? Как исправить — у тега IMG не определен атрибут ALT

alexxlab

Содержание

Отсутствует значение тега ALT в WordPress Gravatar? Как исправить — у тега IMG не определен атрибут ALT

  • Главная

войти в систему

Добро пожаловат!Войдите в свой аккаунт

Ваше имя пользователя

Ваш пароль

Вы забыли свой пароль?

восстановление пароля

Восстановите свой пароль

Ваш адрес электронной почты

Содержание

  • 1 Давайте начнем:
  • 2 Шаг 1.
  • 3 Шаг 2
  • 4 Шаг 3
  • 5 Шаг 4
  • 6 Шаг 5 Почему эта ошибка?
  • 7 Шаг 6 Как это исправить?
  • 8 Шаг-7 Как проверить?

Недавно я сделал несколько изменений в Crunchify, связанных с поисковой оптимизацией ( SEO ) и улучшением загрузки сайта.

Во время работы с my client На прошлой неделе мы обнаружили, что Bing SEO Report показал довольно много SEO предложений.

Если вам интересно, что all types of suggestions Бинг дает тогда взглянуть на ниже:

  • Заголовок отсутствует в разделе заголовка страницы.
  • Тег не имеет определенного атрибута ALT.
  • Страница содержит несколько заголовков.
  • Предполагаемый размер HTML составляет более 125 КБ и рискует быть не полностью кэшированным.
  • На странице отсутствует метаязыковая информация.
  • Название слишком короткое или слишком длинное.
  • Тег
  • Описание отсутствует в разделе заголовка страницы.
  • Описание слишком длинное или слишком короткое.

В этом уроке мы собираемся обсудить how to fix тег ALT attribute issue , Теги ALT & TITLE для Gravatar Tips

Давайте начнем:

Шаг 1.

  • Перейти к инструменту Bing для веб-мастеров .
  • Я предполагаю, что вы уже added ваш сайт и verified Это.
  • Нажмите на панель инструментов -> Отчеты и данные -> SEO Reports ,

Шаг 2

  • Нажмите на The tag does not have an ALT attribute defined
    ссылка на сайт.

Шаг 3

  • Нажмите на любой из NON-COMPLIANT PAGES.
  • Подождите, пока ваш отчет загрузится. Не нажимайте Analyze кнопка сейчас.
  • Нажмите на Page Source Tab.

Шаг 4

  • Вы могли видеть ошибку в yellow color фон, как вы видите в верхней части этой страницы.

Шаг 5 Почему эта ошибка?

В WordPress по умолчанию Gravatar не добавляет тег ALT при получении изображения с сервера gravatar . Оптимизация сайта для SEO и в целом html5 compliance требует от вас ALT и предпочтительно TITLE теги для всех изображений, отображаемых на сайте, и, следовательно, Bing показывает эту ошибку.

Если у вас есть комментарий к WordPress по умолчанию, вы бы пропустили тег ALT для всего изображения вашего комментатора, и это большая проблема.

Шаг 6 Как это исправить?

Мы могли бы просто исправить отсутствующие значения тегов ALT и TITLE, добавив приведенный ниже код в файл functions. php вашей темы.

functions.php

1

2

3

4

5

6

7

8

9

10

11

функция crunchify_gravatar_alt ( $ crunchifyGravatar ) {

если ( have_comments ( ) ) {

$ alt знак равно get_comment_author ( ) ;

}

еще {

$ alt знак равно get_the_author_meta ( ‘display_name’ ) ;

}

$ crunchifyGravatar знак равно str_replace ( ‘alt = /’ / » , ‘alt = /’ Аватар для ‘ , $ alt , ‘/’ title = / ‘Граватар для’ , $ alt , ‘/’ ‘ , $ crunchifyGravatar ) ;

вернуть $ crunchifyGravatar ;

}

add_filter ( ‘get_avatar’ , ‘crunchify_gravatar_alt’ ) ;

Шаг-7 Как проверить?

  • Теперь очистите кеш сайта, если вы используете плагин WP Super Cache или W3 Total Cache.
  • Перезагрузите страницу.
  • Right click на граватаре и Inspect Элемент HTML.
  • Тебе следует увидеть
    ALT and TITLE     оба значения тега заполнены правильно.

  • Теперь перейдите к инструменту Bing для веб-мастеров и нажмите Analyze кнопка.
  • Вы не должны видеть никаких сообщений об ошибках сейчас.

Отсутствует значение тега ALT в WordPress Gravatar? Как исправить — у тега IMG не определен атрибут ALT — ошибка SEO, сообщаемая Bing для веб-мастеров

0.00 (0%) votes

Предыдущая статьяКак исправить фатальную ошибку: допустимый размер памяти исчерпал ошибку WordPress? Увеличить PHP memory_limit

Следующая статьяИщете управляемый дискурс форум хостинг? DiscourseHosting.com мой фаворит — читать подробный обзор

6 простых правил хорошего alt-текста / Хабр

Давайте поговорим о том, как написать хорошее описание фотографий в атрибуте alt.

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

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

Просто перескажите, что находится на картинке

Есть простой совет, чтобы создать идеальное описание.

Представьте, как вы звоните другу и рассказываете, что видите на изображении. 

Но не переусердствуйте, так как лучше, если описание будет лаконичным.

Разноцветный кот ест корм и облизывается (https://unsplash.com/photos/_FlMYRBExBk)

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

Используйте контекст, в котором находится картинка

Одна и та же картинка может иметь разное описание в alt в зависимости от контекста. Контекст — это то, что окружает иллюстрацию, например, текст статьи, если картинка туда встроена.  

Проще говоря,

Описание зависит от того, на чём сейчас нужно сфокусировать пользователя.

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

Есть несколько правильных ответов:

CSS is awesome. 

Подойдет для статьи о том, как работает CSS (плохо).

Белая кружка с надписью. 

Если ваша статья про кружки и никак не связана с веб-разработкой. 

Бардак на столе разработчика: кружки, переплетенные провода, карточки. 

Если рассказываете про жизнь во время пандемии или регулярную уборку на рабочем столе.

Белый стол. 

Если продаёте столы и считаете, что то, что находится на столе, не имеет никакой разницы. Да хоть тарелка.

Белая кружка с надписью в квадрате «CSS is awesome» стоит на белом столе. Awesome выходит за пределы квадрата. 

Этот вариант подойдет, если вы не понимаете контекста статьи, но нужно поставить какую-то картинку и что-то там написать. Так тоже можно делать.

Главная мысль в этих примерах такая, что вам нужно акцентировать внимание на том, что сейчас более важно для статьи в этом изображении. Чтобы определить «сейчас», нужно понимать, о чём написано в статье рядом с этим изображением. Если в статье рассказывается о том, какие виды кружек бывают, то нужно описать детали кружки на изображении, например «Белая кружка с надписью «CSS is Awesome»». Всё, что есть на фоне, в этом случае не важно.

Не пишите alt, если картинка не несёт смысла

Нет ничего плохого в пустом alt, если изображение не несёт дополнительного смысла. Например, как описать мою аватарку в интерфейсе сайта?

Для контекста: на аватарке нарисована голова человека, который лежит на кровати и не может уснуть от копошащихся мыслей.

<img src="avatar.jpg" alt="Николай Шабалин">

«Николай Шабалин» совсем плохой вариант, так как он полностью дублирует текст справа. Аватарка используется в шапке сайта, поэтому описывать её нет смысла.

Не описывать картинку нормально, но будьте аккуратнее и всегда помните про контекст.

<img src="avatar.jpg" alt="">

Передавайте эмоции через alt

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

Радостный человек лежит в гамаке на закате (https://unsplash.com/photos/Kc4MGyzfOTI)

Эту картинку можно описать «Радостный человек лежит в гамаке на закате». Нужно ли писать здесь, что человек радостный, хотя мы даже не видим его лица? Это не обязательно, но можно так написать, если мы продаём гамаки, хотим дополнить картинку и сказать, насколько хорошо он себя чувствует в нашем удобном гамаке, лёжа в нём на берегу океана.

Про эмоциональное описание для изображений вы можете подробнее узнать в блоге Лео́ни Уотсон. 

Не заигрывайте с декором ради декора

Все мы знаем, что декоративные изображения обычно используются без описания, хотя такая возможность есть. Для этого можно использовать свойства content: «» или, если вы используете изображение в content: url(), то правильно будет написать так:

content: url("path/to/image.jpg" / "Описание декоративного изображения").

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

Не пишите в alt названия файлов или имя фотографа

Я часто смотрю, какое описание заполняют в атрибуте alt, и удивляюсь, насколько фантазия может пойти не туда. Часть заполненный альтернативный текст полностью бесполезен, так как не передаёт смысла изображения.

Какое описание не подойдёт:

  • imgX2 или 7e0273c07fef3b598590d3fdddf7808604f0a191435c2c0c — это просто название или хэш файла с картинкой.

  • название сайта или название статьи — возможно, это проделки для SEO.

  • имя фотографа — тут всё понятно.

Все эти варианты никак не помогут в основной задаче альт-текста — понять, что было на картинке, которая не загрузилась, или при чтении страницы скринридером.

Итого — как написать хороший alt-текст

Просто понятное описание — самое хорошее решение, если оно не слишком длинное. Отсутствие описания — нормально, но должно быть к месту. Эмоциональное описание — тоже хорошо, если вписано в контекст.

А вот шесть правил коротко:

  1. Просто расскажите, что видите на картинке — чем короче, тем лучше.

  2. Используйте контекст, в котором находится картинка — то есть учитывайте, что находится вокруг неё на сайте.

  3. Не пишите alt, если картинка не несёт отдельного смысла — например, аватарка в профиле.

  4. Не стесняйтесь передавать эмоции через alt — если кто-то радуется или грустит, напишите об этом, если уместно.

  5. Не пишите alt у декоративных изображений — например, у иконок.

  6. Не пишите в alt название файла или имя фотографа — alt нужен не для этого.

Экспериментируйте, пробуйте и не бойтесь ошибиться.

что это, зачем нужен и как правильно написать

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

Что такое alt-текст и зачем он нужен

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

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

Альтернативный текст показывает имя автора вместо незагрузившейся картинки

Читайте также:

Подробное руководство по текстовой SEO-оптимизации сайта

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

  • помогает людям с ограниченными возможностями: например, использующим программы чтения с экрана — узнать о содержимом изображения;
  • помогает поисковым роботам понять содержание изображения и контекст.

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

Почему альтернативный текст так важен

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

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

Важность для SEO

Правильная оптимизация alt-текста повышает шансы сайта на высокое ранжирование при поиске изображений в Google. Да, альтернативный текст — фактор ранжирования в этой выдаче.

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

Поисковая выдача Google по запросу “apple watch 6”

Google и другие поисковые системы могут отображать меньше изображений товаров (или не отображать их вообще) с вашего сайта, если вы не оптимизируете alt-текст. Это может привести к потере потенциального трафика и клиентов.

Продвижение сайтов

  • Любой формат сотрудничества: позиции, лиды, трафик.
  • Подбираем запросы, которые приводят реальных покупателей!

Важность для доступности

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

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

Допустим, вы написали руководство по SEO-аудиту, содержащее скриншоты из различных краулинговых инструментов. Не лучше ли описать содержание каждого скриншота вместо краткого «SEO-аудит»? Разберемся на примерах.

Примеры alt-текста

Начнем с хороших примеров. Предположим, что в руководстве по SEO используются скриншоты из таких инструментов, как Google Search Console и Screaming Frog. В этом случае альтернативный текст может выглядеть так:

<img src=”google-search-console-coverage-report.jpg” alt=”Отчет об индексировании в Google Search Console показывает количество проиндексированных и исключенных страниц”>

<img src=”google-search-console.jpg” alt=”Инструмент Google Search Console от Google”>

<img src=”screaming-frog-html-pages.jpg” alt=”Список HTML-страниц в Screaming Frog”>

<img src=”screaming-frog” alt=”Screaming Frog в процессе работы”>

Также стоит подумать над названием файла. Использование описательных названий не является фактором ранжирования, но это хорошая SEO-практика.

Есть немало примеров неправильного заполнения alt-текста, включая чрезмерное количество ключевых слов и спам.

Вот как превратить приведенные выше хорошие примеры в плохие примеры:

<img src=”google-search-console-coverage-report.jpg”alt=”бесплатный seo аудит, дешевый seo аудит, специалист seo аудита, seo аудит, seo аудиты”>

<img src=”google-search-console.jpg” alt=”google seo, seo google, google, seo, google search console seo”>

<img src=”screaming-frog-html-pages.jpg” alt=”seo аудитор, seo аудит, seo аудиты”>

<img src=”screaming-frog” alt=”seo аудит”>

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

Типичные ошибки с альтернативным текстом

Забивание альтернативного текста ключевыми словами не единственная ошибка, которую вы можете совершить. Вот несколько примеров распространенных ошибок в alt-тексте:

  • Невозможность использовать альтернативный текст или использование пустого.
  • Использование одного и того же alt-текста для разных изображений.
  • Использование очень общего alt-текста, который на самом деле не описывает изображение. Например, «собака» к фотографии собаки вместо ее более подробного описания с указанием окраса, породы, что животное делает.
  • Автоматическое использование имени файла в качестве альтернативного текста. Например, googleseachconsole или google–search-console или photo2323. Вряд ли по этому тексту понятно, что изображено на картинке.

Присоединяйтесь к нашему Telegram-каналу!

  • Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
  • Для этого вам необходимо подписаться на наш канал.

Советы по написанию alt-текста

  1. Не вставляйте много ключевых слов в альтернативный текст. Это не поможет ранжированию страницы.
  2. Опишите изображение в деталях, но сделайте это коротко. Избегайте добавления нескольких предложений в альтернативный текст.
  3. Используйте ключевые слова, но вписывайте их естественно. Если ваше ключевое слово не подходит к описанию изображения, не используйте его.
  4. Не используйте текст на изображениях. Его нужно добавлять в виде HTML-кода.
  5. Не пишите «это изображение…». Google и пользователи знают, что это изображение. Просто опишите его содержание.
  6. Убедитесь, что вы можете визуализировать изображения, прочитав альтернативный текст. Это лучшее упражнение, чтобы убедиться, что вы сделали правильную подпись.

Как проверить, что на страницах используется альтернативный текст

Теперь вы знаете, как стоит и не стоит писать альтернативный текст. Но как проверить alt-текст в изображениях сайта? Вы можете проанализировать его несколькими способами.

Нажмите правой кнопкой мыши на изображение и выберите опцию «Просмотреть код» или «Проверить объект» (в зависимости от браузера). В панели Elements или «Элементы» подсветится кусок кода, относящийся к изображению. В нем должен быть атрибут alt.

HTML-код изображения в DevTools

Если вы хотите выполнить массовую проверку, стоит воспользоваться двумя другими способами.

Для браузера Google Chrome установите расширение Web Developer. Затем откройте страницу, изображения на которой вы хотите проверить. Активируйте расширение, перейдите в Images → Display Alt Attributes. Вы увидите содержимое alt-текста всех изображений на данной странице.

Расширение Web Developer отображает alt-текст всех изображений на странице

Чтобы проверить альтернативный текст изображений всего сайта, используйте программы Screaming Frog или Sitebulb. Запустите сканирование сайта и перейдите во вкладку Images.

Читайте также:

SEO анализ конкурентов — подробное руководство

Все мучения не зря

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

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

Продвижение сайта в ТОП-10

  • Оплата по дням нахождения в ТОП
  • Подбираем запросы, которые приводят реальных покупателей!

Как исправить альтернативный текст для изображений?

Если у вас нет надлежащих альтернативных текстов для изображений, которые вы используете на своем веб-сайте, это может стать для вас серьезной проблемой.

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

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

Что такое «Альтернативный текст»?

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

Выглядит это так:

Девушка в куртке

Пока не забегайте вперед. Мы обсудим это подробнее.

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

Две основные причины использования замещающего текста

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

Вот две основные причины использования замещающего текста:

1. Когда вы используете изображения на своем веб-сайте, вы используете их для своих читателей. Однако единственным недостатком использования изображений является то, что поисковые системы их не понимают. И если поисковые системы не могут понять, что такое изображение, они не смогут помочь вам привлечь трафик через поиск изображений.

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

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

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

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

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

Как исправить альтернативный текст для изображений?

Если вы используете какую-либо распространенную систему управления контентом (CMS), например WordPress, вам будет предложено вставить замещающий текст для любого изображения, которое вы загружаете.

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

С другой стороны, если вы используете настраиваемую систему управления контентом, весьма вероятно, что эта опция останется. Обратитесь к разработчику веб-сайта за дополнительной помощью, если вы не можете найти опцию замещающего текста в настраиваемой CMS.

Также помните, что «название изображения» и «альтернативный текст» — это две разные вещи. Большинство людей путают их друг с другом.

Изображение заголовка является дополнительной информацией о нем. В интернет-браузерах, таких как Firefox или Opera, этот заголовок появляется при наведении курсора на изображение. Он используется в основном для чтения людьми.

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

WordPress, например, попросит вас заполнить оба этих поля. В идеале вы должны сделать оба этих поля уникальными и отличными друг от друга.

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

4 вещи, которые нужно помнить об альтернативных текстах

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

1. Альтернативные атрибуты не могут заменить текстовое содержимое

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

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

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

2. Альтернативные атрибуты нужны не только для SEO


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

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

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

3. Оптимизация ключевых слов по-прежнему имеет значение для альтернативного текста

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

При написании альтернативных текстов для изображений помните о следующих двух правилах:

  • Оптимизация ключевых слов важна. Использование основных и релевантных ключевых слов может помочь вам привлечь целевой органический трафик из поисковых систем и поисковых запросов, связанных с изображениями.

  • И точно так же, как любой другой фрагмент текста в Интернете, наполнение ключевыми словами в атрибутах alt может привести к штрафу поисковой системы. Так что включайте ключевые слова естественно, не набивая их просто так.

4. Не для всех изображений требуется замещающий текст

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

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

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

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

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

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

Атрибуты alt для декоративных изображений должны быть такими:

Заключение

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

Отсутствует альтернативный текст на изображении — Equalize Digital

Тип уведомления: Ошибка

Соответствующие уровни соответствия WCAG: A страницы? Читайте ниже, чтобы узнать об этой ошибке, о том, как она влияет на доступность вашего веб-сайта и как ее исправить.

Содержание

Об ошибке отсутствия альтернативного текста

Что такое альтернативный текст?

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

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

Как альтернативный текст добавляется к изображениям в WordPress?

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

 милый корги лежит перед открытым ноутбуком на кровати и счастливо смотрит в камеру

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

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

Чем отсутствующий альтернативный текст отличается от пустого альтернативного текста?

Отсутствие альтернативного текста означает, что ваше изображение вообще не имеет атрибута alt в теге изображения. Это пример изображения в коде, в котором отсутствует цифра 9.0194 alt :

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

Как средство проверки читаемости проверяет отсутствие альтернативного текста?

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

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

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

Влияние на доступность

Почему альтернативный текст важен?

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

Отсутствующие теги alt и специальные возможности

Если тег alt полностью отсутствует в изображении, некоторые программы чтения с экрана попытаются компенсировать отсутствующий альтернативный текст, прочитав имя файла изображения. Как вы можете себе представить, во многих случаях недостаточно полагаться на имя файла для предоставления информации об изображении, потому что многие контент-менеджеры не загружают изображения с осмысленными именами файлов на свои веб-сайты. Нередко можно увидеть веб-сайты с именами файлов изображений, такими как «sidebar.png», «img_54321.jpg» или «shutterstock_123456789»..jpg». Эти имена файлов не предоставляют никакой информации для пользователей вспомогательных технологий, описывающих изображение.

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

Соответствующие критерии успеха WCAG 2.1

1.1.1 Нетекстовый контент — уровень A

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

Как исправить ошибки отсутствия альтернативного текста изображения

Что делать (вкратце)

Чтобы исправить ошибку отсутствия альтернативного текста изображения, вам необходимо добавить к изображению тег alt с соответствующим текстом, описывающим назначение изображения на странице. Если изображение является декоративным, атрибут alt может быть пустым, но тег HTML alt="" все равно должен присутствовать.

Как найти изображения с отсутствующим или пустым замещающим текстом в записи или на странице WordPress

Сначала установите0009 бесплатно Плагин WordPress для проверки доступности.

Для любых страниц или сообщений с ошибкой Image Missing Alternative Text в редакторе WordPress вы можете открыть вкладку сведений в метаокне средства проверки читаемости, а затем развернуть соответствующую ошибку, чтобы просмотреть список изображений (в коде), вызвавших ошибка, которую необходимо отметить.

Исправление отсутствующего замещающего текста

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

Код изображения в этом примере:

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

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

Если изображение имеет альтернативный текст, определенный в WordPress, но ваш веб-сайт не выводит альтернативный текст в интерфейсе вашего веб-сайта, вероятно, ваша тема или плагин требуют исправления кода, чтобы убедиться, что альтернативный текст включен в тег изображения. Мы часто сталкиваемся с такой проблемой в темах WordPress (в равной степени бесплатных и с пользовательским кодом), которые не используют функции WordPress по умолчанию для вывода изображений и выводят их только с их URL-адресом, и в этом случае разработчик должен вручную включать альтернативный текст как Что ж.

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

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

Исправление альтернативных тегов, не отображаемых в WordPress, за 5 минут [без кодирования]

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

Если вы не видите теги alt в своем HTML-коде, повторно вставьте изображение на страницу и очистите кеш вашего сайта. WordPress не может добавить новый тег alt, и вам нужно перезаписать существующий пустой тег вручную. После этого очистите кеш сайта, чтобы убедиться, что вы видите самый свежий контент.

Теперь посмотрим, как именно проявляются эти две ошибки.

Шаг 1. Исправление перезаписанного альтернативного текста

Проблема перезаписи широко распространена на страницах/сообщениях, где вы уже вставили изображение до добавления к нему альтернативного текста. Когда вы это делаете, иногда WordPress имеет тенденцию вставлять пустой альтернативный текст, который вам теперь нужно перезаписать.

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

После вставки изображение без указанного альтернативного текста может получить пустой атрибут «alt» в коде вашей страницы. То же самое может произойти  , если вы обновляете теги alt в медиатеке . WordPress не будет обновлять фактический тег alt  в коде страницы до тех пор, пока вы повторно не вставите изображение страницы    , если вы решите изменить их позже. Чтобы начать работу, просто:

  1. Повторно вставьте изображение на страницу  – чтобы часть HTML-кода обновилась автоматически и добавила тег alt.
  2. Или скопируйте и вставьте замещающий текст из   Медиатека в   Редактор деталей изображения  на конкретное изображение.
  3. Или скопируйте и вставьте тег alt из вашей медиатеки в HTML-код (в текстовом редакторе) на вашей странице.

К сожалению, вам придется делать это вручную во всех трех сценариях, но первый, по крайней мере, для меня, намного быстрее. Кроме того, учтите, что вы редактируете HTML потенциально важной страницы. И первый, и второй методы избавляют вас от потенциального удаления изображений с важных страниц и, таким образом, их поломки.

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

 

Отсюда составить список дел намного проще, и вы сможете выполнить их все, скажем, за один неторопливый день.

Шаг 2. См. Alt-теги путем очистки кеша

Всякий раз, когда вы вносите изменения в WordPress, лучше всего очищать кеш, чтобы быть уверенным, что изменения применяются. Большинство современных сайтов WordPress имеют несколько уровней кэширования, работающих одновременно.  Это здорово и более или менее критически важно для хорошей работы веб-сайта . Однако иногда это может вызывать  досадную проблему, связанную с тем, что содержимое страницы не обновляется  даже после того, как вы сохранили изменения.

Здесь все, что вам нужно сделать, это  очистить кеш на вашем веб-сайте и на вашем локальном компьютере (т. е. на вашем компьютере).

Чтобы очистить кеш вашего веб-сайта:
  1. Перейдите к выбранному плагину кэширования.
  2. Нажмите «Очистить кэш».

Ваш плагин кэширования также обычно отображается в верхней навигационной панели панели инструментов WordPress.

Если вы используете дополнительный уровень кэширования через сеть доставки контента, лучше очистить и его. Наиболее распространенным CDN является Cloudflare, настолько, что он поставляется вместе с некоторыми планами хостинга (например, BlueHost предлагает его по умолчанию). Войдите в свою учетную запись Cloudflare и очистите кэш, как показано ниже.

 

Если вы не помните о создании учетной записи Cloudflare, вы, скорее всего, найдете ее настройки на панели управления, предоставленной вам компанией, предоставляющей хостинг веб-сайтов.

Чтобы очистить кеш с вашего компьютера:

А теперь перейдем к очистке кеша, хранящегося на вашем компьютере, если вы используете Google Chrome:

  • В Windows нажмите CTRL + F5.
  • На Mac нажмите CMD + SHIFT + R

Для тех из вас, кто использует Firefox , ярлыки:

  • Еще раз, в Windows просто нажмите CTRL + F5.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *