Простые правила разметки
Перейти к основному содержимому

Доступность

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

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

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

Доступность — это просто

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

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

И всё это просто за счёт использования тегов по назначению.

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

Покажите мне всё

Самые простые примеры:

Если нужно сделать кликабельный элемент, выбирайте ссылку или кнопку. Выбирайте ссылку, если клик уводит на другую страницу, если нет — используйте кнопку. Скринридеры понимают эти элементы как активные, и могут озвучить это для пользователя. Если вместо кнопки используется div или span, скринридер не поймёт, что на него можно нажать.

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

По теме:

Заголовки

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

Выбор уровня заголовка на основе иерархии документа решает сразу две задачи:

  1. Как верстальщику, вам не придётся ломать голову над тегом для заголовка: у соседних элементов уровень заголовков одинаковый, если у родителя заголовок h2, то у дочерних элементов должны быть заголовки h3, и так далее.
  2. Основываясь на заголовках скринридеры строят структуру страницы, по которой можно навигироваться, таким образом пользователи читалок могут сразу выбрать нужный раздел без необходимости читать весь текст — это как быстро найти нужную главу в оглавлении книги.

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

.visuallyhidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

Такого заголовка не будет на странице, но скринридеры прочитают его без труда. Также это решает задачу с тем, что по спецификации у section и article должны быть заголовки: если они не предусмотрены по макету, просто добавьте скрытые.

По теме:

Изображения

У всех img на странице должен быть указан атрибут alt: его могут прочитать скринридеры, его увидят пользователи с отключенными или незагрузившимися картинками.

Если в качестве контентного изображения используется инлайновый SVG, его содержимое можно сделать доступным для скринридеров, добавив role="img" aria-label="Описание картинки".

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

По теме:

Элементы формы

Для разметки формы обязательно используйте соответствующие элементы, например fieldset, legend, label, input и textarea.

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

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

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