Доступность веб‑страницы

7 рекомендаций

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

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

Кому важна доступность интерфейса:

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

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

Ниже – пополняемый список рекомендаций HTML‑CSS‑верстальщику, желающему обеспечить максимальную доступность страницы.

Грамотная и логичная структура разметки

Пишите правильный и семантичный HTML: используйте HTML5‑теги, размещайте важный контент выше по коду. К примеру, главный контент статьи должен быть по коду выше сайдбара со второстепенным контентом или рекламой.

Используйте подходящие теги: кнопка должна быть кнопкой, ссылка – ссылкой, список – списком, заголовок – заголовком, таблица – таблицей и т. д. Не пишите теги ссылок без атрибута href .

Не пишите ссылки и кнопки без текстовых узлов. Если невозможно сделать кнопку с текстовым узлом, попробуйте использовать атрибут aria-label для пояснения функционала кнопки.

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

Если никак не получается сделать некий интерактивный элемент тегом, имеющим интерактивность по умолчанию (кнопка, сделанная div вместо button ), используйте для таких элементов tabindex="0" (это позволит «включить» такой кривой элемент в поток переключения фокуса) и подходящую ARIA-роль (см. ниже).

Используйте хорошо читаемый текст

Позаботьтесь, чтобы текст был набран достаточно контрастным цветом и достаточным размером шрифта.

Пользуйтесь атрибутом lang

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

Всегда заполняйте атрибут alt для изображений

Важно максимально коротко и понятно описать содержимое картинки. Архиважно, если картинка – единственное содержимое ссылки.

Делайте состояние :focus заметным

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

Используйте ARIA. Хотя бы роли

WAI‑ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) – технологический стандарт W3C для предоставления возможности полноценного использования Интернета людьми с физическими ограничениями. Спецификация.

Спецификация довольно обширная, но использовать можно лишь основные элементы.

<!-- Главный заголовок сайта или внутренний заголовок страницы -->
<header role="banner">...</header>

<!-- Навигация по сайту или по странице -->
<nav role="navigation"><ul>...</ul></nav>

<!-- Основной контент -->
<main role="main">
  <!-- Важная срочная информация -->
  <div role="alert"></div>
  <!-- Большой раздел страницы -->
  <section role="region"></section>
  <!-- Самостоятельный элемент страницы -->
  <article role="article"></article>
  <!-- Очень странная «кнопка» -->
  <div role="button">button</div>
</main>

<!-- Второстепенный контент или информационный блок -->
<aside role="complementary">
  <!-- Поиск по сайту -->
  <form role="search">...</form>
</aside>

<!-- Какая то обобщающая информация -->
<footer role="contentinfo">...</footer>

Не извращайтесь

  • Не позиционируйте над интерактивным элементом блок с нулевой непрозрачностью для перехвата на нем кликов.
  • Если у некого элемента есть отслеживание клика, должно быть и отслеживание нажатий клавиатуры.
  • Не используйте opacity: 0; для сокрытия элементов.

Полезные ссылки

Понравилась статья? Ставьте лайк, делитесь в соц. сетях или купите мне кофе.