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

• Главная

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

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

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

Ваш пароль

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

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

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

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

Содержание

Недавно я сделал несколько изменений в 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

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

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

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

0.00 (0%) 0 votes

ЧИТАТЬ ТАКЖЕ:  URL-адреса социальных сетей для удобной ссылки: Facebook, WhatsApp, Twitter, Buffer, Google+, LinkedIn и многое другое

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

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

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

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

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

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

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

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

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

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

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

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

Одна и та же картинка может иметь разное описание в 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 «человек с кучей мыслей прям перед сном».

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

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

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

Все мы знаем, что декоративные изображения обычно используются без описания, хотя такая возможность есть. Для этого можно использовать свойства 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 нужен не для этого.

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

изображений с отсутствующим замещающим текстом

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

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

Почему это важно?

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

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

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

Что проверяет подсказка?

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

Примечание:  Изображения для отслеживания, для которых намеренно выбран размер 1 x 1 пиксель и они «невидимы», не учитываются в этой подсказке.

Примеры, вызывающие эту подсказку

Тег с отсутствующим атрибутом замещающего текста:

Тег с атрибутом пустой атрибут замещающего текста:

  org/image/png" alt="" /> 

Примеры, передающие эту подсказку

Все теги имеют атрибуты alt с текстом:

ИЛИ теги используют WAI -ARIA role=»presentation»:

Почему эта подсказка помечена как «Возможность»?

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

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

Как получить больше данных от Sitebulb?

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

Каждый уникальных URL-адресов изображений включается в этот список только один раз. Для дальнейшего изучения есть 2 варианта:

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

#1 Исследование каждого изображения по очереди

В списке URL столбец «No. URL-адреса, ссылающиеся на ресурс», сообщит вам, сколько уникальных URL-адресов вызывают изображение без использования замещающего текста. Чтобы просмотреть их для заданного URL-адреса изображения, нажмите кнопку Просмотреть в столбце, после чего откроется выдвижная панель со списком URL-адресов. Вы можете изучить их дальше в списке или экспортировать в CSV/Google Таблицы.

#2 Массовый экспорт всех ссылок на изображения

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

Чтобы получить данные, нажмите зеленую кнопку Экспорт данных .

Это позволяет увидеть URL-адрес ссылки (HTML) в первом столбце, а также URL-адрес изображения во втором столбце. По умолчанию данные сортируются по столбцу А, поэтому теоретически вы можете работать с каждой страницей за раз. Однако, если вы повторно отсортируете по столбцу B, вы сможете работать с каждым изображением за раз.

Дополнительная литература

• SEO-оптимизация изображений: оптимизация тегов alt и title
• Три распространенные ошибки доступности для разработчиков: текстовые альтернативы

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

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

• изображение не имеет роли = «презентация»,
• изображение не имеет атрибута aria-hidden,
• изображение не является пикселем-разделителем 1×1,
• изображение не создано рекламой Google код,
• , если изображение находится в ссылке (тег ), оно не имеет действительной метки aria, или
• , что изображение не содержится в допустимой подписи.

Если ни одно из приведенных выше утверждений не соответствует действительности, а тег 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

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

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

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

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

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