Опубликовано автор в категориях Верстальщику.

Web-Accessibility symbols on the black background

На сегодняшний день широко используемым паттерном в разработке интерфейсов веб сайтов является размещение логотипа в хедере сайта. Как-правило, в 99% процентах случаев использования такого паттерна логотип будет ссылкой ведущей на главную (домашнюю) страницу сайта. Но еще более широко используем паттерном является размещение в хедере, в паре с логотипом навигации по сайту. И этот паттерн весьма неоднозначное решение в плане доступности, в частности для скринридеров. Об этом и хотелось бы поговорить.

Проблема

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

Доступный логотип

С точки зрения представления контента логотип является изображением, то есть не текстовым контентом, который согласно требованиям WCAG 2 должен иметь текстовые альтернативы. И наиболее правильным способом выразиться логотип, в случае, если мы хотим чтобы он был замечен устройствами для считывания с экрана является добавление к тегу <img> атрибута <alt> с кратким описанием логотипа.

<img class="site-logo" src="logo.png" alt="The company/site logo" />

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

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

Доступный логотип-ссылка

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

то большинство скрин-ридеров  (JAWS, NVDA, VoiceOver) скажет что это ссылка, картинка с описанием из альта и даже прочитают текст расширенного описания картинки. Но в таком случае пользователю становится абсолютно непонятным куда ведет эта ссылка.

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

...
<a href="/" class="logo_link" title="Go to the home page">
  <img width="100" src="me.jpg" alt="Site logo" aria-describedby="logo-description" class="logo__img" />
</a>
...

Но, в случае если картинка имеет альтернативное описание, текст атрибута тайтл будет игнорирован распространенными скрин-ридерами (JAWS, NVDA, VoiceOver). То есть пользователь так и не услышит, что ссылка ведет на главную страницу.

Побороть это поведение позволяет атрибут «aria-label». Если мы добавил этот атрибут то альтернативное описание картинки будет игнорировано распространенными скрин-ридерами (JAWS, NVDA, VoiceOver) и мы услышим текст атрибута в описании ссылки, и только VoiceOver прочитает и значение атрибута и альтернативное описание картинки:

...
<a href="/" class="logo_link" aria-label="Go to the home page">
  <img width="100" src="me.jpg" alt="Site logo" aria-describedby="logo-description" class="logo__img" />
</a>
...

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

...
<a href="/" class="logo_link" title="Go to the home page">
  <img width="100" src="me.jpg" alt="" aria-describedby="logo-description" class="logo__img" />
</a>
...

Здесь все распространенные скрин-ридеры (JAWS, NVDA, VoiceOver) прочитают ссылку одинаково (Link Go to the Home Page).

Однако, как в случае использования атрибута «aria-label» так и в случае использования тайтла для ссылки с пустым альтернативным описанием, в большинстве случаев мы теряем описание самого логотипа, то есть для пользователя остается неизвестным, что это лого и скрыто его значение. Детальнее почитать про доступные картинки-ссылки можно здесь: Accessibility: Images, “Alt” tags, and the “Out Loud” Experience.

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

Логотип + навигация

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

Итак, давайте напишем наш код:

<header class="site-header">
  <div class="logo">
    <img width="100" src="me.jpg" alt="Site logo" aria-describedby="logo-description" class="logo__img" />
    <div class="visually-hidden" hidden id="logo-description">
      Some extended text which describes the logo with all meaning.
    </div>
  </div>
  <nav class="main-menu" aria-label="Main menu">
    <ul class="main-menu__nav">
      <li class="main-menu__nav-item">
        <a class="main-menu__nav-link" href="/">Home</a>
      </li>
      <li class="main-menu__nav-item">
        <a class="main-menu__nav-link" href="#about">About</a>
      </li>
      <li class="main-menu__nav-item">
        <a class="main-menu__nav-link" href="#academics">Academics</a>
      </li>
      <li class="main-menu__nav-item">
        <a class="main-menu__nav-link" href="#admissions">Admissions</a>
      </li>
      <li class="main-menu__nav-item">
        <a class="main-menu__nav-link" href="#visitors">Visitors</a>
      </li>
    </ul>
  </nav>
</header>

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

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

Итоги

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

Оставить комментарий

  • (не будет показан)