В запутанном мире веб-приложений ARIA может помочь улучшить доступность и простоту использования ваших творений. HTML не может обрабатывать многие типы отношений между элементами на странице, но ARIA идеально подходит для почти любого вида настройки, которую вы можете придумать. Давайте посмотрим, что такое ARIA, как она может применяться к вашему веб-приложению, и несколько быстрых рецептов, которые вы можете использовать для своих собственных сайтов.
Основы арии
ARIA, также называемая WAI-ARIA, выступает за Инициативу доступности веб-приложений — Доступные многофункциональные интернет-приложения. Эта инициатива, обновленная W3C, направлена на то, чтобы предоставить разработчикам новый набор схем и атрибутов, чтобы сделать их творения более доступными. Он специально предназначен для покрытия пробелов, оставленных HTML. Если вы не знакомы с тем, что он уже делает, вы должны взглянуть на наш учебник по ARIA . Вас также могут заинтересовать наши материалы о ARIA для домашней страницы и ARIA для электронной коммерции .
Вкратце, у ARIA есть три основных особенности, на которых мы сосредоточимся:
- Создание отношений вне ассоциации родитель-потомок: HTML допускает только отношения между родительскими и дочерними элементами, но ассоциации, которые мы хотим определить, не всегда вкладываются друг в друга. ARIA позволяет нам определять отношения элементов вне этого ограничения.
- Определение расширенных элементов управления и интерактивности: HTML охватывает многие базовые элементы пользовательского интерфейса, но существует множество более сложных элементов управления, используемых в Интернете, которые трудно определить вне их визуального компонента. Ария помогает с этим.
- Предоставление доступа к атрибутам обновления «живой» области: атрибут
aria-liveпредоставляет средства чтения с экрана и другие устройства для прослушивания при изменении содержимого на странице. Это упрощает обмен информацией при изменении содержимого на экране.
ARIA и веб-приложения
Ранее мы рассматривали добавление ARIA к общим элементам страниц электронной коммерции и домашних страниц сайта. Однако в случае веб-приложений каждое из них резко отличается от предыдущего. Формы и функции меняются между каждым приложением, и часто даже между версиями одного и того же приложения. Из-за этого мы будем рассматривать наши реализации здесь как рецепты в кулинарной книге, а не как конверсию страницы.
Когда речь идет о веб-приложениях, намерение пользователя сложнее различить в обобщенном смысле. С электронной коммерцией, независимо от того, на каком сайте вы находитесь, вполне вероятно, что посетители хотят приобрести продукт или услугу. Веб-приложения служат различным целям, поэтому вместо этого мы сосредоточимся на создании детализированных элементов управления, которые доступны и удобны для пользователя.
Давайте рассмотрим некоторые из этих типов управления.
Управление живыми обновлениями с помощью кнопок
Первый элемент управления, который мы собираемся рассмотреть, это отображаемое значение, обновляемое нажатием кнопки. Эти типы элементов управления обычно видны, когда элемент отображает количество, которое можно регулировать кнопками, помеченными « + » и « — », но может принимать различные формы, например кнопки со стрелками, которые позволяют циклически переключаться между предварительно определенными состояниями.
Стандартная реализация может оставить некоторые пробелы в понимании для пользователя. Неясно, на какие элементы влияют кнопки, как они влияют на них и когда изменяется значение элемента.
Ниже мы будем использовать ARIA для создания соединения между кнопками и элементом отображения значений с помощью атрибута aria-controls . Затем мы проясним использование кнопок с помощью aria-label и HTML <label> . Наконец, мы будем использовать роль alert aria и атрибут aria-live чтобы наш пользователь знал, когда обновляется значение.
Давайте посмотрим, как выглядит этот код:
|
01
02
03
04
05
06
07
08
09
10
11
|
<form action=»»>
<fieldset>
<legend>Adjust Quantity</legend>
<div>
<label for=»qty-element»>Current Quantity</label>
<input type=»text» role=»alert» aria-live=»assertive» value=»0″ id=»qty-element» />
<button type=»button» aria-label=’Add to Quantity’ aria-controls=»qty-element»>+</button>
<button type=»button» aria-label=’Subtract from Quantity’ title=»subtract 10″ aria-controls=»qty-element»>=</button>
</div>
</fieldset>
</form>
|
ARIA всплывающие окна и всплывающие подсказки
При оснащении сайта ARIA обычно используется «прогрессивная доступность». Идея этого термина заключается в том, что перевод сайта или веб-приложения из его базовой формы в полностью доступный является сложной задачей. Чтобы справиться с этим способом, который все еще делает движение вперед, вы можете реализовывать новые функции постепенно и итеративно.
Для всплывающей подсказки с соответствующим всплывающим или модальным значением это означает, что мы можем разбить проблему на два этапа, развернув каждый из них, как можем. В этом случае всплывающая подсказка — это обычное изображение небольшого вопросительного знака, который открывает дополнительную информацию при наведении курсора.
Чтобы пользователи знали, что изображение знака вопроса на самом деле является всплывающей подсказкой, мы определили его с помощью соответствующей роли, например:
|
1
|
<img src=»question-mark.jpg» role=’tooltip’ />
|
Однако есть несколько проблем с этой реализацией. Пользователи могут все еще не знать, что при наведении на всплывающую подсказку появляется всплывающее окно с дополнительной информацией. Вот как мы можем добавить это в наш код:
|
1
2
3
4
5
|
<img src=»question-mark.jpg» role=’tooltip’ aria-haspopup=’true’ aria-controls=’tooltip-popup’ />
<div id=’tooltip-popup’ aria-hidden=’true’>
Tooltip text
</div>
|
Доступные подсказки ввода
Вместо всплывающей подсказки для веб-приложения также характерно использование форм, где каждый ввод имеет свою собственную связанную подсказку.
Без дополнительной разметки ARIA может быть трудно определить, какие всплывающие подсказки применяются к какому вводу для пользователя. Отсутствие этого отношения может сделать ваш вспомогательный текст бесполезным в некоторых случаях.
Чтобы исправить это, мы обернем наши подсказки в их собственные элементы. Каждый из них может быть вложен рядом со связанным входом, установить свои отношения с ARIA, а затем может быть запущен с помощью JavaScript (или просто CSS, если вы хитры).
Вот как это может выглядеть:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<form action=»»>
<fieldset>
<legend>User Login</legend>
<div>
<input type=»text» id=»user» aria-describedby=»user-tip» />
<label for=»user»>Your Username</label>
<div role=»tooltip» id=»user-tip»>Tooltip about their username</div>
</div>
<div>
<input type=»password» id=»password» aria-describedby=»password-tip» />
<label for=»password»>Your Username</label>
<div role=»tooltip» id=»password-tip»>Tooltip about their password</div>
</div>
</fieldset>
</form>
|
Оповещения о состоянии
«Наш сервис в настоящее время недоступен», «Ваша учетная запись приостановлена», и соответствующие оповещения о состоянии обычно используются в веб-приложениях и отображают важную информацию для пользователей. Без ARIA они могут быть погружены в информацию на странице и вызвать множество проблем.
Используя роль alert ARIA и атрибут aria-live , мы можем быть уверены, что наши пользователи быстро узнают о любых проблемах после их появления на странице.
Мы можем настроить этот тип оповещения о состоянии следующим образом:
|
1
2
3
|
<div id=»system-status» role=»alert» aria-live=»assertive»>
<p>The system is offline!</p>
</div>
|
Создание панели инструментов
Наконец, давайте рассмотрим еще один общий элемент управления, используемый в веб-приложениях: панель инструментов. Для наших целей мы будем размечать панель инструментов, которая работает следующим образом: наше веб-приложение отображает большой объем данных, ориентированных в виде таблицы. Над этой таблицей наша панель инструментов имеет несколько кнопок, которые позволяют пользователям сортировать таблицу различными способами. Эти кнопки включают классические параметры сортировки, такие как от А до Я и от Я до А.
Относительно, они оставляют некоторые проблемы, касающиеся доступности. Во-первых, не ясно, влияют ли эти кнопки на таблицу — мы решим это с помощью атрибута aria-controls . Также не ясно, что кнопки связаны друг с другом, что может быть полезной информацией для наших пользователей. Чтобы определить это, мы будем использовать роль toolbar . Наконец, пользователь не обязательно знает, какая кнопка была нажата последней. Чтобы исправить это, мы будем использовать атрибут aria-pressed .
При использовании атрибута aria-pressed важно отметить, что вам придется обновлять эти элементы, когда пользователь взаимодействует с ними. Это, вероятно, потребует изменения атрибутов через JavaScript или jQuery.
Вот как выглядит наш код панели инструментов:
|
1
2
3
4
5
6
7
8
9
|
<div role=»toolbar» aria-label=»Sorting Toolbs» aria-controls=»data-table»>
<button type=»button» aria-pressed=»false» aria-label=’Sort Alphabetically, A to Z’>A to Z</button>
<button type=»button» aria-pressed=»true» aria-label=’Sort Alphabetically, Z to A’>Z to A</button>
<button type=»button» aria-pressed=»false» aria-label=’Sort Numerically’>Numerical</button>
</div>
<table id=’data-table’>
…
</table>
|
Добавление ARIA в ваши собственные веб-приложения
С этой горсткой новых схем управления и взаимоотношений у вас на пути к тому, чтобы сделать собственное веб-приложение полностью доступным! После того, как вы добавили эти новые разметки, подумайте, как можно применить эти атрибуты к другим частям вашего пользовательского интерфейса, чтобы максимально повысить удобство использования вашего творения.
Есть ли какие-либо атрибуты, роли или другие функции ARIA, о которых вы хотели бы знать? Или, может быть, у вас есть вопросы по поводу ваших собственных реализаций или исправлений для этой статьи? Войдите в контакт, используя раздел комментариев ниже, или пометив kylejspeaker в Twitter!