Как эффективно работать с ARIA в HTML5

Как эффективно работать с ARIA в HTML5

От автора: ARIA расшифровывается как «Accessible Rich Internet Applications» и помогает сделать ваш сайт более доступным для людей с ограниченными возможностями, такими как слух или нарушение зрения. Давайте разберемся как мы, разработчики можем облегчить жизнь с помощью этого инструмента.

Один из способов это добавить ARIA в HTML. Вы, скорее всего, уже знакомы с семантическими элементами в HTML типа nav, button или header. Довольно легко понять для чего данные теги будут использоваться. Эти теги придают больше значения контенту страницы, а их комбинацию с ARIA можно использовать в нашей разметке. Но нужно помнить о некоторых вещах.

Роли ARIA

ARIA роли добавляются в разметку как атрибуты. С их помощью задается тип элемента и его назначение. Код ниже задает элемент как баннер:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Пример ниже, часто размещается в контейнерах, показывает, что в контенте содержится какая-то информация о данных внутри контейнера:

А предупреждение будет выглядеть так:

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

ARIA атрибуты

Атрибуты ARIA немного отличаются от ролей. Они точно так же добавляются в разметку, но есть ряд ARIA атрибутов, которые можно использовать. Все атрибуты идут с префиксом aria-. Есть два типа атрибутов, состояния и свойства.

Значения состояний связано с изменением результата пользовательского взаимодействия.

Значения свойств почти не меняются.

Пример атрибута состояния ARIA это aria-checked, который используется для определения состояния элементов типа чекбоксов или радио кнопок.

Пример атрибута свойства aria-label. Используется в тех случаях, когда подпись к элементу невидима на странице (просто потому что нет смысла делать ее видимой или так указано в дизайне). Для видимых лейблов используется aria-labelledby. Данный атрибут используется так – значение атрибута должно совпадать с id элемента, на который ссылается лейбл.

Можно сделать то же самое с figure.

На W3C можно подробно прочитать о поддерживаемых состояниях и свойствах.

Правила ARIA

Перед тем, как совсем увлечься, помните, что мы не добавляем ARIA во все элементы по нескольким причинам.

Используйте семантические HTML элементы везде где возможно

Неявная семантика ARIA по умолчанию относится к семантике, которая применяется к элементу браузером. Такие теги как nav, article и button имеют неявные ARIA состояния role=»navigation», role=»article» и role=»button» соответственно. До появления семантики в HTML было нормально использовать элементы типа <div class=»main-navigation» role=»navigation»>. Сейчас же мы можем заменить обычный div на nav, и больше не нужно добавлять атрибут role=»navigation», так как он уже неявно указан. Проверить, нужен ли конкретному тегу ARIA атрибут или нет, можно в W3C таблице.

У одного тега только одна роль

Один тег не должен содержать несколько ARIA ролей. Определение role: «Основной индикатор типа. Данная семантическая ассоциация позволяет инструментам представлять и поддерживать взаимодействие с объектом таким образом, чтобы взаимодействие соответствовало ожиданию пользователя от работы с другими объектами данного типа.»

HTML элемент не может иметь две роли. Все роли тем или иным образом имеют семантическое значение, и следуя из определения выше, тег не может быть двух типов одного объекта одновременно. Вы можете сделать одновременно кнопку и заголовок? Нет, это будет либо одно, либо другое. Выбирайте роли так, чтобы они наилучшим образом описывали функцию вашего элемента.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Не изменяйте встроенную семантику

К семантическим тегам не нужно применять дополнительный атрибут role, так как он переписывает родную семантику тега. К примеру:

Второе правило применения ARIA гласит, что если необходимо, то нужно использовать вложенный HTML элемент.

Используйте как можно больше семантических элементов

Если подумать о задачах того, что вы создаете, то можно понять, какие элементы лучше подойдут вместо div и span. Это приходит со временем. Для практики можно обращаться к what elements are available. Один из моих любимых примеров это blockquote, про который часто забывают. Есть похожие теги, которые выполняют те же задачи:

q – используется для строчный цитат. Прямая цитата кого-то внутри параграфа текста.

cite – используется для цитирования названий творческих работ в тексте, к примеру, стихотворений.

Пример использования двух обоих тегов:

Существует множество тегов, про которые вы, возможно, и не знаете, среди которых есть и часть новых. Так что убедитесь в том, что вы знаете их возможности!

Атрибут alt

Про данный атрибут очень часто забывают, а он может оказать огромнейшее влияние на доступность разметки, особенно для скрин ридеров. Он появился в HTML2 и описывался так: «Текст, заменяющий изображение, к примеру, из-за ошибок обработки или предпочтений пользователя.»

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

Люди часто пишут в теге alt к фотографии с их собакой, играющей в парке «собака», к примеру. Но к сожалению такой текст не отражает визуальное представление изображения для слбовидящих. Пример ниже намного доступнее:

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

Пример семантического HTML и ARIA, обращаем внимание на доступность

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

используется семантический HTML для изображения и его подписи

используется подходящий тег cite

добавляется подходящий текст в alt

используется один из атрибутов ARIA, о котором я уже говорил

Заключение

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

Автор: Georgie Luhur

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree