Google объясняет замещающий текст для логотипов и кнопок

В подкасте Google Search Off the Record Лиззи Сассман из Google и Джон Мюллер обсуждают лучший способ обработки замещающего текста для логотипов и кнопок на основе изображений.

Существуют рекомендации по добавлению атрибутов alt к логотипам и кнопкам.

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

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

Добавление замещающего текста к функциональным изображениям

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

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

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

«Лиззи Сассман:
…Уровень заботы, с которым мы тратим на визуальный актив, мы также должны вкладывать тот же уровень энергии в слова, которые описывают этот актив. Что я думаю, это здорово.

Другая категория изображений — это функциональная вещь, которая иногда может быть кнопкой.

Как будто это графика, которая тоже как-то функционирует.

Так должен ли альтернативный текст сообщать мне, что должно произойти?

Если вы нажмете на это, то это приведет вас сюда?

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

А вы функцию описываете, или вроде тоже было, не знаю… как стрелочка?

А также, имеет ли это значение для SEO?

Джон Мюллер:
Ага. Я думаю…

Лиззи Сассман:
Это может быть как логотип.

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

Но для SEO люди не будут искать кнопку оформления заказа или что-то в этом роде».

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

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

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

Лиззи продолжила дискуссию:

«Лиззи Сассман:
…Но, может быть, для логотипа или чего-то вроде логотипа. Когда вы нажимаете на нее, вы попадаете на домашнюю страницу или что-то в этом роде.

Но это также: «О, это логотип».

Значит, вы говорите: «Это логотип Центра поиска Google».

Джон Мюллер:
Конечно.

Лиззи Сассман:
Или как то, что было бы описательным текстом.

На логотипе изображен Googlebot, но самое важное, что нужно знать об изображении, это то, что это логотип?

Или как выглядит логотип?

Я предполагаю, что с этого ракурса люди, вероятно, ищут логотип.

Джон Мюллер:
Ага.

Лиззи Сассман:

Может быть, какой логотип у компании X?

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

Для чего вы хотите, чтобы вас нашли?

Лиззи Сассман:
Да, но это самый важный вопрос, я думаю, потому что тогда это как бы рулит…

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

Правильное использование замещающего текста в логотипах и кнопках

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

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

Консорциум World Wide Web (W3C), официальный орган по разработке стандартов HTML, публикует разъяснения о том, как обращаться с логотипами.

Ссылка на главную страницу логотипа

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

W3C использует этот пример кода:

<a href="
<img src=" alt="W3C home">
</a>

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

Пример альтернативного текста, предоставленный W3C, просто говорит: «W3C home», но при желании он может быть более описательным.

Логотип и текст Ссылка на главную страницу

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

Другими словами, нет двух ссылок, таких как одна ссылка для логотипа и одна ссылка для текста, это всего лишь одна ссылка для логотипа и текста вместе.

В этом случае, поскольку текст описывает функцию ссылки, повторение функции ссылки логотипа было бы повторением.

Поэтому в этом случае лучше всего использовать нулевой замещающий текст.

Это пример, который предоставляет W3C:

<a href="
<img src=" alt=""> W3C Home
</a>

Обратите внимание, как кодируется атрибут alt для изображения:

img src=" alt=""

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

Причина, по которой нулевой замещающий текст хорош, заключается в том, что есть текст, описывающий функцию ссылки:

Главная страница W3C

Замещающий текст для ссылки на значок

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

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

Лучше всего описать, что делает изображение (инициировать электронное письмо или распечатать веб-страницу).

W3C использует пример значка принтера со следующим кодом и замещающим текстом:

<a href="
<img src="print.png" alt="Print this page">
</a>

Как видите, значок в виде принтера имеет слова «Распечатать эту страницу» в качестве альтернативного текста. Он говорит, что делает значок. Это полезно.

Альтернативный текст для кнопки

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

W3C использует пример окна поиска с увеличительным стеклом для кнопки отправки.

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

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

Это пример кода, который W3C показывает в качестве примера:

<input type="image" src=" alt="Search">

Как видите, альтернативный текст кнопки поиска — это слово «Поиск», которое описывает функцию кнопки.

Альтернативный текст для кнопок и логотипов

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

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

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

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

Так что в конечном счете полезно использовать лучшие практики доступности.

---

Цитаты

Узнайте больше о специальных возможностях кнопок и логотипов на W3C.

Функциональные изображения

Объединение смежных изображений и текстовых ссылок для одного и того же ресурса

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

Слушайте подкаст Search Off the Record на отметке 15:57:

Избранное изображение Shutterstock/Evgeny Atamanenko