Что: В рамках наших постоянных усилий по повышению доступности нашей документации мы обновили различные тексты привязок, чтобы они лучше описывали целевую страницу.

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

9 января
Переключение ссылок @id на использование хэштегов

Что: заменить все примеры кода структурированных данных, в которых используются ссылки @id на странице, на использование хэштегов. Например, пример клипов в нашей документации по рецептам.

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

Добавление поддержки предложенного возраста в продукт.

Что: добавлена поддержка свойстваuggestedAge в качестве альтернативы предложеннымMaxAge иsuggestedMinAge. Уточнен список возможных значений возрастных диапазонов в нашей документации по структурированным данным о продукте.

Почему: мы хотим, чтобы людям было проще и гибче указывать возрастные диапазоны для продукта. Кроме того, предыдущая формулировка вносила путаницу и не соответствовала документации Merchant Center о возрастных диапазонах товаров.

5 января
Уточнение основного источника фрагментов

Что: в нашей документации о фрагментах уточнено, что основным источником фрагмента является само содержимое страницы.

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

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

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

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

Хороший пример

<p>Технологический институт Мичигана и <a href=”/tour/copper-country/”>Медная страна</a>  почувствуют атмосферу маленького городка. Студенты и члены сообщества говорят, что он в самый раз: не настолько большой, чтобы можно было заблудиться, но и не слишком маленький. Идеальное место, которое можно назвать домом.</p>

Плохой пример

<p>Мичиганский технологический институт и Медная страна создают атмосферу маленького городка. Студенты и члены сообщества говорят, что он в самый раз: не настолько большой, чтобы можно было заблудиться, но и не слишком маленький. Идеальное место, которое можно назвать домом. <a href=”/tour/copper-country/”>Нажмите здесь</a>, чтобы узнать больше.</p>

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

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

Используйте следующие советы, чтобы обеспечить доступность текста ссылки:

Избегайте использования URL-адреса в качестве текста ссылки; особенно если это долго или сложно
URL-адреса могут быть нечитабельными для людей или программ чтения с экрана.
Связывающие фразы делайте как можно короче, сохраняя при этом смысл вне контекста. Это сэкономит время пользователям программ чтения с экрана, поскольку им придется говорить меньше. Например,
«сделать подарок» предпочтительнее «чтобы сделать подарок онлайн, нажмите здесь».
«Свяжитесь с нами» предпочтительнее «вы можете связаться с нами через»
Ссылка хотя бы на одно полное слово. Два слова обычно лучше.
На ссылку, состоящую только из буквы или символа, будет сложно нажать, и она не будет содержать контекста.
Если вам необходимо добавить к ссылке подсказки к действию, поместите их в конце. Например,
«Свяжитесь с нами (открывает всплывающее окно)» означает «Ссылка открывает всплывающее окно: свяжитесь с нами»
Не добавляйте в текст слово «ссылка»
Постарайтесь убедиться, что каждая уникальная ссылка на вашей веб-странице использует уникальный текст ссылки.
Если у вас есть две разные ссылки на списки сотрудников, которые ведут на одну и ту же страницу, это нормально. Если они переходят на разные страницы, это должны быть разные страницы, например «персонал цифровых услуг» и «персонал услуг печати».
Если вы часто используете команду «Читать дальше», представьте, как будет неприятно пользователю программы чтения с экрана снова и снова слышать фразу «Читать дальше» без всякого контекста.
Никогда не добавляйте пустые ссылки, используя href=””
связывая я

маги

Для некоторых веб-страниц может оказаться целесообразным связать изображение с веб-страницей вместо ссылки на текст. В этих случаях программа чтения с экрана прочитает альтернативный текст изображения (тег ALT) как текст ссылки. Тег ALT должен включать как содержание, так и функцию изображения. Если изображение декоративное, то необходима только функция.

Пример декоративного изображения

<p><a href=”/tour/copper-country/”><img src=”my-picture.jpg” alt=”Список сотрудников” /></a></p>

Пример информационного изображения

<p><a href=”/tour/copper-country/”><img src=”my-picture.jpg” alt=”Диаграмма, показывающая 200 дюймов общего количества снега; ссылка на промежуточные итоги за месяц” /></a> </p>

Дополнительные методы программирования

Могут быть случаи, когда вы захотите сохранить общий текст ссылки, например «[подробнее]». В этих случаях вы можете использовать aria-label или aria-labeledby, чтобы предоставить контекст ссылки программам чтения с экрана.

Пример aria-label

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

<p class=”right”><a href=”/tour/copper-country/” aria-label=”Медная страна”>[подробнее]</a></p>

Пример с меткой aria

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

<h2 id=”copper-country”>Медная страна</h2>

<p>Мичиганский технологический институт и Медная страна создают атмосферу маленького городка. Студенты и члены сообщества говорят, что оно самое подходящее: не настолько большое, чтобы можно было заблудиться, но и не слишком маленькое.</p>

<p class=”right”><a href=”/tour/copper-country/” aria-labelledby=”copper-country”>[подробнее]</a></p>

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

Тестирование текста ссылки

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

Узнать больше

Чтобы узнать больше об описательном тексте ссылки:

WebAIM: ссылки и гипертекст
W3C: Цель ссылки (в контексте)
Омни CMS

Чтобы создать ссылку в содержимом вашей веб-страницы, выделите текст или изображение, а затем щелкните значок ссылки на панели инструментов или используйте сочетание клавиш Cmd/Ctrl + K.

Чтобы добавить атрибут aria-label или aria-labeledby, перейдите к исходному коду с помощью панели инструментов.

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

Обновление Google SEO, январь 2024 г.