Принципы WCAG. Название страницы

  • WCAG
  • HTML
  • Тексты
Опубликовано:

В этом посте из серии про разбор Руководств по доступности веб-контента (Web Content Accessibility Guidelines, коротко WCAG) расскажу про критерий 2.4.2: название страницы.

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

Коротко о критерии

У страницы должно быть название, которое описывает её цель или тему.

Подробнее

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

Конкретно критерий касается атрибута <title> и его содержимого.

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

В критерии несколько конкретных требований к названию страниц:

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

За пределами WCAG есть несколько других хороших практик для названий:

  • Используйте не больше 60 символов. Чем короче название, тем лучше.
  • Не теряет смысл вне контекста страницы.
  • Уникальное и не повторяет полностью названия других страниц.
  • Если используете название сайта, сервиса или компании, перед ними должно идти описание страницы.
  • Не повторяйте много раз одни и те же разделители в одном названии и не используйте их в декоративных целях. Например, несколько тильд (~~~) или плюсов (+++) подряд.
  • Старайтесь придерживаться одинаковых паттернов. Например, если решили использовать длинное тире, используйте его везде.

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

Проще всего повторять в <title> содержимое <h1>, но это тоже не обязательное правило. К примеру, в основном заголовке на странице может быть приветствие, которое лучше не использовать в названии.

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

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

Кому это важно

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

Как избежать барьер

Над названием страниц работают люди, которые создают контент, дизайн или код.

Чтобы выполнить критерий, обязательно используйте тег <title> с содержимым, которое кратко и чётко описывает страницу. Тег размещают внутри <head>.

<!doctype html>
<html lang="nb-NO">
    <head>
        <title>Litteratur – NRK Kultur</title>
    </head>
    <body>
        …
    </body>
</html>

Примеры соответствия критерию

  • Главная страница справочника MDN называется «MDN Web Docs», а отдельная страница про свойство width в разделе CSS — «width - CSS: Cascading Style Sheets | MDN».
  • Главная страница справочника Доки называется «Дока», а отдельная страница про свойство width в разделе CSS — «width — CSS — Дока».

Хороший пример доступного и динамически изменяющегося заголовка — веб-версия Notion. Когда создаёте новую страницу, у неё стандартный <title> «Untitled». Он изменяется после того, как вводите название в поле для основного заголовка страницы. Главное не забывать это делать, если планируете делиться страницей с другими пользователями.

Примеры барьеров

  • На сайте про кофе на главной странице вообще нет <title>.
  • У главной страницы сайта <title> без текстового содержимого.
  • На сайте про разведение лягушек у страниц есть <title> с содержимым, которое их не описывает. Например, «Untitled Page», «Новая страница» и «Страница 2».
  • В интернет-магазине у страниц товаров одинаковое название «Страница товара».

Как тестировать

Критерий обычно тестируют смешанным способом.

  • Откройте нужную страницу.
  • Проверьте, есть ли у неё тег <title> и содержимое в нём.
  • Если тег не пустой, хорошо ли он описывает тему или цель страницы и насколько уникален.

Наличие тега <title> легко проверить любым автоматическим инструментом. Например, Axe, Lighthouse или IBM Equal Access Checker.

Содержимое заголовков лучше проверять руками в браузере. Откройте нужную страницу и наведите курсор на вкладку, если название длинное. Также можно проверять код страницы в инструменте разработчика в удобном вам браузере. Ещё поможет букмарклет Page Title, который выводит название страницы в диалоговом окне.

Что почитать

Другие статьи