От автора: ARIA расшифровывается как «Accessible Rich Internet Applications» и помогает сделать ваш сайт более доступным для людей с ограниченными возможностями, такими как слух или нарушение зрения. Давайте разберемся как мы, разработчики можем облегчить жизнь с помощью этого инструмента.
Один из способов это добавить ARIA в HTML. Вы, скорее всего, уже знакомы с семантическими элементами в HTML типа nav, button или header. Довольно легко понять для чего данные теги будут использоваться. Эти теги придают больше значения контенту страницы, а их комбинацию с ARIA можно использовать в нашей разметке. Но нужно помнить о некоторых вещах.
Роли ARIA
ARIA роли добавляются в разметку как атрибуты. С их помощью задается тип элемента и его назначение. Код ниже задает элемент как баннер:
|
1 |
<header role="banner"> |
Пример ниже, часто размещается в контейнерах, показывает, что в контенте содержится какая-то информация о данных внутри контейнера:
|
1 2 3 |
<div role="contentinfo"> This website was built by Georgie. </div> |
А предупреждение будет выглядеть так:
|
1 2 3 |
<div role="alert"> Please upgrade to the latest version of your browser for the best experience. </div> |
Следующий пример мой любимый, он используется только в том случае, когда элемент нужен только для презентации. Если представить, что кто-то зашел на сайт через какой-либо скрин ридер, подумайте о элементах, которые пользователи не захотят читать. Один пример это когда элемент может содержать в себе только визуальную декорацию чего-либо или он просто пустой с изображением или фоновым цветом.
|
1 |
<span class="frame-corner" role="presentation"></span> |
ARIA атрибуты
Атрибуты ARIA немного отличаются от ролей. Они точно так же добавляются в разметку, но есть ряд ARIA атрибутов, которые можно использовать. Все атрибуты идут с префиксом aria-. Есть два типа атрибутов, состояния и свойства.
Значения состояний связано с изменением результата пользовательского взаимодействия.
Значения свойств почти не меняются.
Пример атрибута состояния ARIA это aria-checked, который используется для определения состояния элементов типа чекбоксов или радио кнопок.
|
1 |
<input type="radio" aria-checked="true"> |
Пример атрибута свойства aria-label. Используется в тех случаях, когда подпись к элементу невидима на странице (просто потому что нет смысла делать ее видимой или так указано в дизайне). Для видимых лейблов используется aria-labelledby. Данный атрибут используется так – значение атрибута должно совпадать с id элемента, на который ссылается лейбл.
|
1 2 |
<label id="address">Address</label> <input type="text" aria-labelledby="address"> |
Можно сделать то же самое с figure.
|
1 2 3 4 |
<figure aria-labelledby="operahouse_1"> <img src="operahousesteps.jpg" alt="The Sydney Opera House"> <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption> </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 элемент не может иметь две роли. Все роли тем или иным образом имеют семантическое значение, и следуя из определения выше, тег не может быть двух типов одного объекта одновременно. Вы можете сделать одновременно кнопку и заголовок? Нет, это будет либо одно, либо другое. Выбирайте роли так, чтобы они наилучшим образом описывали функцию вашего элемента.
Не изменяйте встроенную семантику
К семантическим тегам не нужно применять дополнительный атрибут role, так как он переписывает родную семантику тега. К примеру:
|
1 |
<footer role="button"> |
Второе правило применения ARIA гласит, что если необходимо, то нужно использовать вложенный HTML элемент.
|
1 |
<footer><button>Purchase this e-book</button></footer> |
Используйте как можно больше семантических элементов
Если подумать о задачах того, что вы создаете, то можно понять, какие элементы лучше подойдут вместо div и span. Это приходит со временем. Для практики можно обращаться к what elements are available. Один из моих любимых примеров это blockquote, про который часто забывают. Есть похожие теги, которые выполняют те же задачи:
q – используется для строчный цитат. Прямая цитата кого-то внутри параграфа текста.
cite – используется для цитирования названий творческих работ в тексте, к примеру, стихотворений.
Пример использования двух обоих тегов:
|
1 |
<p>In <cite>The Love Song of J. Alfred Prufock</cite> by T.S. Eliot, the clinical imagery of the line <q>Like a patient etherized upon a table</q> suggests themes of loneliness.</p> |
Существует множество тегов, про которые вы, возможно, и не знаете, среди которых есть и часть новых. Так что убедитесь в том, что вы знаете их возможности!
Атрибут alt
Про данный атрибут очень часто забывают, а он может оказать огромнейшее влияние на доступность разметки, особенно для скрин ридеров. Он появился в HTML2 и описывался так: «Текст, заменяющий изображение, к примеру, из-за ошибок обработки или предпочтений пользователя.»
Из-за ошибок обработки или предпочтений пользователя. Вне зависимости от проблем с загрузкой изображения («ошибки обработки»), у пользователей с нарушенным зрением нет и предпочтений. У них просто от природы проблемы с просмотром изображения. В спецификации ничего не говорится про доступность. Там сказано, что изображений может не загрузиться, как положено, и пользователю предоставляется возможность отключить загрузку изображений вообще. Хотя мы с вами и живем в мире, где в последнее очень сложно поверить, мы все же не знаем, чем на другом конце провода занимается пользователь. Поэтому необходимо предоставить пользователю другие варианты.
Люди часто пишут в теге alt к фотографии с их собакой, играющей в парке «собака», к примеру. Но к сожалению такой текст не отражает визуальное представление изображения для слбовидящих. Пример ниже намного доступнее:
|
1 |
<img src="bobby.jpg" alt="My dog Bobby playing fetch in the park"> |
Обратите внимание, что атрибут alt не выполняет те же задачи, что и figcaption – задача alt предоставить альтернативный текст изображения, а figcaption – подпись к рисунку. Для того же примера можно добавить такую подпись:
|
1 |
<figcaption>Isn’t Bobby cute?</figcaption> |
Пример семантического HTML и ARIA, обращаем внимание на доступность
Если взглянуть на пример, который я показывал выше в статье, то можно заметить, что в примере:
используется семантический HTML для изображения и его подписи
используется подходящий тег cite
добавляется подходящий текст в alt
используется один из атрибутов ARIA, о котором я уже говорил
|
1 2 3 4 |
<figure aria-labelledby="operahouse_1"> <img src="operahousesteps.jpg" alt="The Sydney Opera House"/> <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption> </figure> |
Заключение
ARIA роли и атрибуты могут сильно изменить ваш контент, когда он открывается в скрин ридерах или других вспомогательных технологиях. Так как применение вспомогательных технологий становится распространенным явлением, нам необходимо задуматься о внедрении ARIA в наш код на постоянной основе.
Автор: Georgie Luhur
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
