Использование семантического HTML и ARIA

Давайте рассмотрим преимущества использования семантического HTML и ARIA. А также разберемся, почему следует начать с семантического HTML и почему ARIA следует применять только после него.

Начинаем с чистого текста

Тег <body> включает основной контент, который посетитель видит на веб-странице. Если контент размещается внутри body без дополнительных тегов, браузер не сможет распознать разные типы текстовой разметки. К примеру, абзацы и заголовки.

<body>A Study of ButterfliesButterflies are little bugs with cute wings.Butterfly HabitatsButterflies 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>

Это лучше. Сейчас каждый фрагмент текста выводится в браузере в отдельной строке.

Использование семантического HTML и ARIA

Но структура содержимого по-прежнему не упорядочена. Так как заголовки и абзацы заключены в теги 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 и ARIA

Иные преимущества использования семантического HTML:

  • Применение CSS для добавления собственных стилей.
  • Поисковые системы смогут правильно индексировать содержимое.
  • Ридеры RSS могут анализировать и стилизовать элементы соответствующим образом.
  • Программы чтения с экрана могут должным образом описывать элементы для посетителя.

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

Дополнительные преимущества семантического HTML

В дополнение к перечисленным преимуществам, некоторые браузеры добавляют полезные улучшения в семантический HTML.

Например, специальное поле ввода для ввода номера мобильного(<input type=»tel»>) предлагает посетителю телефонную числовую панель.

Использование семантического HTML и ARIA

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

Использование семантического HTML и ARIA

Страница «О себе», просматриваемая в режиме чтения 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 может предоставить посетителям больше контекста. Но его необходимо использовать с осторожностью.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *