SEO и доступность: улучшите свой UX

Важность наличия доступного веб-сайта

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

Согласно Разделу III Закона об американцах с ограниченными возможностями (ADA), предприятия должны обеспечивать «полное и равное пользование» своими товарами, услугами, привилегиями и преимуществами. Министерство юстиции США интерпретирует это как включающее услуги, предлагаемые в Интернете.

Растет риск судебных исков против компаний, сайты которых не соответствуют требованиям ADA. В 2022 году в федеральном суде США было подано 3255 исков о доступности веб-сайтов Раздела III ADA, что больше, чем 814 дел в 2017 году.

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

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

Отраслевые стандарты доступности веб-сайтов изложены в Руководстве по доступности веб-контента (WCAG), опубликованном Консорциумом World Wide Web (W3C). SEO-маркетологи могут использовать это руководство для решения технических вопросов, таких как цветовой контраст, замещающий текст изображения и навигация, создавая равный онлайн-опыт для всех, независимо от способностей.

Является ли доступность фактором ранжирования?

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

Многие функции доступности связаны с SEO, например карты сайта XML и HTML, читаемость, субтитры к видео и основные веб-показатели. Чем больше элементов вы сможете удовлетворить, тем выше будет рейтинг вашего сайта.

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

Способы интеграции доступности и SEO

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

Дизайн веб-сайтов и UX

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

Улучшите дизайн сайта:

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

XML и HTML-карты сайта

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

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

Навигация

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

Чтобы оптимизировать архитектуру вашего сайта:

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

Панировочные сухари

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

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

Для эффективной навигации по хлебным крошкам:

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

Заголовки страниц

Заголовки страниц отражают цель или содержание веб-страницы. Они часто появляются как:

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

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

Чтобы оптимизировать тег заголовка для SEO доступности, создайте полезный заголовок страницы, который:

• Точно описывает страницу.
• Естественно, включает ваше целевое ключевое слово.
• Длина от 50 до 60 символов.
• Заставляет пользователей переходить по ссылке.

Заголовки

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

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

Чтобы оптимизировать заголовки для SEO-доступности:

• Используйте правильные HTML-теги, чтобы вспомогательные технологии могли их прочитать.
• Убедитесь, что каждый заголовок точно описывает содержание раздела.
• Встраивайте уровни заголовков в разделы по порядку, поэтому не переходите от H3 к H5.

Альтернативный текст

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

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

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

Метаданные

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

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

Эффективные метаописания:

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

Мобильное удобство

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

Чтобы ваш сайт был оптимизирован для мобильных устройств:

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

Субтитры к видео и стенограммы

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

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

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

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

Текст привязки

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

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

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

Читабельность

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

Вы можете улучшить читабельность для SEO и доступность следующим образом:

• Группировка контента по частям с четкими заголовками, чтобы информацию было легко найти.
• Устранение многословия и выбор простого и убедительного языка.
• Использование активного залога для более прямого стиля письма.
• Использование нумерованных или маркированных списков для сканирования.
• Пишу для читателей и избегаю перенасыщения ключевыми словами.

Инструменты тестирования доступности

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

доступСканирование

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

Проверка доступности

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

Инструмент оценки доступности веб-сайтов (WAVE)

Этот инструмент, разработанный WebAIM, проверяет веб-страницы на наличие проблем с доступностью в соответствии с рекомендациями WCAG 2.1. Вы можете перейти непосредственно на веб-сайт WAVE и ввести URL-адрес, чтобы увидеть визуализацию ошибок. Этот инструмент накладывает значки на вашу веб-страницу, чтобы показать вам, где находятся проблемы. WAVE также доступен в виде расширения для браузера, поэтому вы можете тестировать его непосредственно в Chrome, Firefox и Edge.

Получите помощь в объединении SEO и доступности уже сегодня

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