Использование семантического HTML и ARIA
Давайте рассмотрим преимущества использования семантического HTML и ARIA. А также разберемся, почему стоит начать с семантического HTML и почему ARIA следует применять только после него.
- Начинаем с чистого текста
- Добавление структуры с помощью HTML
- Смысл для связи со стилями
- Введение в семантический HTML
- Дополнительные преимущества семантического HTML
- Когда ARIA повышает доступность контента
- Совместное использование ARIA и JavaScript
- Старайтесь избегать использования ARIA для исправления несемантического HTML
- Заключение
Начинаем с чистого текста
Тег <body> содержит основной контент, который пользователь видит на веб-странице. Если контент размещается внутри body без дополнительных тегов, браузер не сможет распознать различные типы текстовой разметки. Например, абзацы и заголовки.
<body>
A Study of Butterflies
Butterflies are little bugs with cute wings.
Butterfly Habitats
Butterflies live in flower houses and hang out at dank coffeeshops.
</body>Из-за этого:
- Нельзя оформить заголовки отлично от абзацев.
- Поисковым системам труднее интерпретировать контент, поэтому он будет плохо ранжироваться.
- Программы чтения с экрана и другие вспомогательные инструменты не смогут предоставить пользователям контент в понятной для них форме.
Добавление структуры с помощью HTML
Чтобы структурировать контент, можно обернуть строки текста в теги div:
<div>A Study of Butterflies.</div>
<div>Butterflies are little bugs with cute wings.</div>
<div>Butterfly Habitats</div>
<div>Butterflies live in flower houses and hang out at dank coffeeshops.</div>Это немного лучше. Теперь каждый фрагмент текста отображается в браузере в отдельной строке.
Но структура контента по-прежнему не упорядочена. Потому что заголовки и абзацы заключены в теги div, которые сами по себе бессмысленны.
Смысл для связи со стилями
Мы могли бы стилизовать div с помощью CSS. Это позволит нам улучшить внешний вид, чтобы сформировать смысл, контекст и иерархию контента.
Мы могли бы задать каждому блоку div идентификатор или имя класса, чтобы иметь больше контроля над стилями:
<div class="heading1">A Study of Butterflies</div>
<div class="paragraph">Butterflies are little bugs with cute wings.</div>
<div class="heading2">Butterfly Habitats</div>
<div class="paragraph">Butterflies live in flower houses and hang out at dank coffeeshops.</div>Теперь мы можем выбирать различные элементы и стилизовать их с помощью CSS:
.heading1 { /* здесь стили */ }
.paragraph { /* здесь стили */ }
.heading2 { /* здесь стили */ }Хотя этот подход немного лучше. Но он передает структуру текста только для пользователей с хорошим зрением. Зато он не имеет смысла для поисковых систем, читателей RSS и программ чтения с экрана.
Введение в семантический HTML
HTML предоставляет множество элементов, предназначенных для структурирования текста. В том числе для заголовков и абзацев. Поэтому лучше использовать предопределенные элементы HTML.
<h1>A Study of Butterflies</h1>
<p>Butterflies are little bugs with cute wings.</p>
<h2>Butterfly Habitats</h2>
<p>Butterflies live in flower houses and hang out at dank coffeeshops.</p>Намного лучше! При таком семантическом HTML-коде контент будет наследовать стили по умолчанию из браузера. Мы даже можем использовать другие семантические элементы HTML. Например, тег <b>, который выделят текст жирным шрифтом.
Другие преимущества использования семантического HTML:
- Применение CSS для добавления собственных стилей.
- Поисковые системы смогут правильно индексировать контент.
- Ридеры RSS могут анализировать и стилизовать элементы соответствующим образом.
- Программы чтения с экрана могут должным образом описывать элементы для пользователя.
Семантический HTML основан на стандартах. Это означает, что любой процессор HTML в будущем сможет понять его и правильно представить пользователям.
Дополнительные преимущества семантического HTML
В дополнение к перечисленным преимуществам, некоторые браузеры добавляют полезные улучшения в семантический HTML.
Например, специальное поле для ввода номера мобильного (<input type="tel">) предоставляет пользователю телефонную числовую панель.
Другие браузеры позволяют переключаться на упрощенный вид страницы. Без семантического HTML в режиме чтения мы получили бы что-то похожее на однострочный текст.
Страница «О себе», просматриваемая в режиме чтения Safari: несемантический HTML (слева) и семантический HTML (справа).
Когда ARIA повышает доступность контента
ARIA - это стандарт W3, который делает интерфейсы более доступными для людей с ограниченными возможностями.
Сообщения об ошибках являются хорошим примером. Если пользователь оставляет обязательное поле формы пустым, HTML-код ошибки может выглядеть следующим образом:
<label for="first-name">First name</label>
<span>Enter your first name</span>
<input type="text" name="first-name" id="first-name">Хорошо видящий пользователь прочитает сообщение, которое отобразится над полем. Но программа чтения с экрана не распознает ошибку, поскольку сообщение не связано с полем.
ARIA может помочь связать выводимую ошибку с полем ввода:
<label for="first-name">First name</label>
<span id="first-name-error">Enter your first name</span>
<input type="text" name="first-name" id="first-name" aria-describedby="first-name-error">Теперь сообщение об ошибке объявляется, когда поле ввода выделено фокусом.
Совместное использование ARIA и JavaScript
Следование стандарту ARIA наиболее полезно в JavaScript. Он используется для создания сложных динамичных взаимодействий: скрытие, отображение и изменение элементов без перезагрузки веб-страницы.
Переключающиеся меню, аккордеоны, вкладки, автозаполнения, сортировки таблиц, загрузки контента и сохранения. Подобные функции интерфейсов часто мешают пользователям программ чтения с экрана.
Для примера возьмем кнопку, которая при нажатии отображает скрытое содержимое. В исходном состоянии зрячий пользователь первоначально увидит кнопку, а при нажатии кнопки - содержимое.
Пользователь со слабым зрением полагается на голосовые сигналы при навигации по интерфейсу. Но когда программа чтения с экрана дойдет до кнопки, она не может сказать, просматривается ли в данный момент контент и нужно ли его читать.
К кнопке можно добавить атрибут aria-expanded, и JavaScript будет переключать значение с true (контент отображается) на false (контент скрыт). Это поможет слабовидящим людям правильно прочитать текст.
<button aria-expanded="false">Toggle content</button>
<div hidden>Some content</div>Старайтесь избегать использования ARIA для исправления несемантического HTML
Атрибуты ARIA могут использоваться для того, чтобы сделать несемантический HTML более доступным для слабовидящих пользователей. Например, разработчик, который пытается создать собственный чек-бокс для нескольких браузеров, может решить использовать div и немного JavaScript для эмуляции.
Можно сделать так, чтобы идентификатор div выступал в качестве чекбокса для пользователей программ чтения с экрана:
<div role="checkbox"></div>Также нужно использовать атрибут aria-checked, чтобы указать, установлен ли флажок:
<div role="checkbox" aria-checked="false"></div>Но этого недостаточно, чтобы заставить div вести себя как чекбокс. Потому что div не может быть выделен фокусом ввода с помощью клавиатуры, как <input type="checkbox">. Можно сделать его фокусируемым, добавив tabindex="0":
<div role="checkbox" aria-checked="false" tabindex="0"></div>Но даже в этом случае поведение не будет идентичным. Настоящий чекбокс отправляет свое значение как часть данных формы. При использовании div без JavaScript значение не будет отправляться.
Также пользователи могут установить или снять флажок чекбокса, нажав клавишу «Пробел». А данные формы, к которой принадлежит чекбокс, можно отправить, нажав клавишу «Enter», когда чекбокс выделен фокусом. Но div в роли чекбокса не сможет этого сделать без использования JavaScript.
Данный подход работает только для пользователей, которые используют инструменты, понимающие эти атрибуты ARIA. Этих проблем можно избежать, если использовать семантический HTML:
<input type="checkbox">ARIA полезен в определенных ситуациях. Но нужно начинать с семантического HTML-кода. Вот почему первое правило ARIA - не использовать его.
Заключение
Семантический HTML помогает применять вспомогательные технологии, и поэтому пользователи понимают контент. А когда одного только семантического HTML недостаточно, ARIA может предоставить пользователям больше контекста. Но его нужно использовать с осторожностью.