Введение §

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

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

Это важно по двум причинам:

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

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

Ссылки и кнопки §

Если нужно сделать кликабельный элемент, выбирайте#ссылка или#кнопка.

Выбирайте ссылку, если клик уводит на другую страницу, если нет — используйте кнопку.

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

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

По теме: §

• Доклад Вадима Макеева «Жми сюда!»
• Доклад Leonie Watson «Introduction to accessibility mechanics»

Заголовки  §

Теги#заголовок 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 должны быть заголовки: если они не предусмотрены по макету, просто добавьте скрытые.

По теме: §

• Валидатор разметки, для отображения структуры заголовков включите галку «outline»
• Генератор HTML-дерева — построит дерево документа и структуру заголовков

Изображения §

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

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

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

По теме: §

• Web Accessibility Tutorials: Images Concepts
• Статья Ire Aderinokun «Alternative Text and Images», перевод
• Статья «Логотип не отвечает или временно недоступен»

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

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

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

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

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

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

Стандарты доступности: §

Ссылка на источник: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-visual-presentation

Атрибут hidden §

Ссылка на источник:  https://dev-gang.ru/article/skrytie-elementov-v-vebe-3zoi5nbzxo/

Рекомендации §

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

• Оптимизация сайта под все основные браузеры;
• Указать язык документа ;
• Прятать контент с помощью атрибута hidden;
• Иногда полезнее добавить пустой атрибут alt для картинки;
• Если нужна кнопка, используй элемент <button>.
• Преимущества:
  • Возможность фокусировки;
  • Кликабельность (мышкой или клавиатурой);
  • Экранные читалки идентифицируют их как кнопки!
  • Важно структурировать разметку при помощи заголовков;
  • Использование ориентиров помогает людям передвигаться по вашему сайту
    (main, headerиfooter` и др.)
  • fieldset отлично подходит для группировки элементов формы и придания им большего контекста