Используя только стандартный HTML, современные веб-приложения могут блокировать пользователей с необходимостью специальных возможностей.
HTML является преобладающим языком разметки в Интернете, который используется почти 83% существующих веб-сайтов . Хотя за 25 лет с момента его создания произошли некоторые изменения, даже более новые итерации, такие как HTML5 и AMP, оставляют желать лучшего, особенно когда речь идет о доступности. Вот где приходит ARIA. В этом уроке я расскажу о том, что такое ARIA, почему она полезна для вашего сайта, и о нескольких способах ее добавления на ваш сайт.
Что такое Ария?
ARIA, также известная как WAI-ARIA, означает «Доступные многофункциональные интернет-приложения Инициативы веб-доступности». Полный документ с техническими условиями можно найти здесь . Обратите внимание, что документ с полной спецификацией довольно плотный, поэтому неплохо было бы начать с прочтения этого поста и ознакомления с некоторыми другими ресурсами, на которые я ссылаюсь ниже.
Основная цель ARIA — предоставить расширенную семантическую структуру в HTML как аналог синтаксической природы HTML. Другими словами, HTML сообщает браузеру, куда идут вещи, а ARIA — как они взаимодействуют.
Кто несет ответственность за ARIA?
ARIA — это проект, организованный W3C (World Wide Web Consortium). Проект придерживается тех же стандартов обновления и редактирования, что и другие их инициативы. Они также предоставляют GitHub-репозиторий с несколькими тестами, которые вы можете запустить, чтобы убедиться, что ваша страница работает правильно.
Что не так с моей текущей разметкой сайта?
Большинство сайтов, которые имеют структурированный, хорошо продуманный дизайн, работают достаточно хорошо, когда речь идет об адаптивных технологиях (например, средства чтения с экрана). Тем не менее, наличие у пользователя возможности понять, как использовать ваш сайт и простота его использования — это разные вещи. Пользователи со слабым зрением составляют почти 2% населения , и для них разница может означать экономию значительного количества времени и детективной работы при выполнении основных онлайн-задач. Это может быть разницей между предложением посетителям впечатляющего опыта и предоставлением лабиринта для навигации.
Помимо традиционных средств доступности, ARIA находит свой путь к технологиям, которые обеспечивают новые взгляды на стандартное взаимодействие. Растущее число голосовых систем, агрегированный просмотр (например, встраиваемые в автомобиль компьютеры) и другие инновации позволяют использовать ARIA, используя ее расширенные семантические возможности.
Хорошо, но что это делает?
В целом, ARIA соединяет элементы семантически значимым образом. Это дает пользователю дополнительное значение относительно взаимодействия. Вот несколько реальных примеров того, как это можно использовать:
- Связывание не вложенных элементов. В обычном HTML браузер пользователя может видеть только отношения, основанные на родительских / дочерних отношениях. Однако в некоторых ситуациях нам может потребоваться ряд кнопок, параллельных содержимому в иерархии HTML. С помощью ARIA мы можем определить, каким типом контроллера является каждая кнопка, и каким элементом она управляет в другом месте документа.
- Объявление интерактивных элементов: хотя HTML предоставляет несколько элементов для интерактивности, ARIA определяет еще десятки, предоставляя более детальное описание того, что может делать каждый элемент вашей страницы. Кроме того, они могут быть назначены тегам HTML, которые обычно не используются для таких целей, но могут иметь смысл в вашем конкретном случае. Например, вы можете использовать
<li>для ряда флажков, которые вы предпочитаете, чтобы они не состояли из элементов формы. - Уведомления об обновлении области в реальном времени. Еще одна функция, предоставляемая ARIA, — определение области содержимого в реальном времени. Когда область содержимого определяется таким образом, ARIA будет уведомлять пользователя о каждом изменении содержимого в этом элементе. Это может быть полезно, когда пользователи с плохим зрением знают, что на вашей странице что-то изменилось.
Добавление ARIA на ваши веб-страницы
Мы говорили о том, что может сделать ARIA, поэтому теперь давайте рассмотрим некоторые из наиболее распространенных примеров. Мы начнем каждый раздел с краткого изложения цели, которую мы стремимся достичь, а затем пример кода для ее достижения.
Создание альтернативной маркировки с помощью ARIA
Когда дело доходит до альтернативной маркировки, большинство разработчиков знакомы с атрибутом alt обычно используемым в тегах <img> . Этот тег служит важной цели: описание изображения, к которому он прикреплен, для большей доступности (или как обычная тактика SEO, в зависимости от вашей перспективы).
ARIA предоставляет аналогичный атрибут, называемый aria-label который можно прикрепить к любому элементу HTML, улучшая доступность не только для изображений, но и для разделов сайта, элементов управления формой и т. Д. Вот пример того, как это выглядит:
|
01
02
03
04
05
06
07
08
09
10
|
<!— adding alternative labeling to an image (with non-visible text) —>
<img aria-label=»Descriptive image text» src=»#» />
<!— adding alternative labeling to an image (with visible text) —>
<img aria-labelledby=»image-text-desc» src=»#» />
<div id=»image-text-desc»>A text description of the image, visible on the screen</div>
|
Определение специфичных для ARIA элементов пользовательского интерфейса
HTML уже предоставляет ряд элементов для создания веб-страниц, но их основной задачей обычно является общее определение области и представление пользователю структуры сайта. ARIA предоставляет несколько десятков дополнительных элементов, которые в большей степени фокусируются на использовании элемента, таких как таймер, всплывающая подсказка или индикатор выполнения.
Пример использования здесь — подсказка, которую вы можете найти в форме. Есть несколько способов создать его, начиная от ссылки, которая запускает некоторый JavaScript, до элемента, который создает модальный при наведении курсора. Недостатком здесь является то, что, несмотря на то, как это может работать для зрячих пользователей, пользователи со слабым зрением могут даже не знать о существовании подсказки.
Вы можете определить всплывающую подсказку, используя ARIA следующим образом:
|
1
2
3
|
<!— Defining a question mark image as a tooltip UI element —>
<img src=”questionmark.png” role=”tooltip” />
|
Доступные определения ARIA
Чтобы расширить эти элементы пользовательского интерфейса, вот краткий список некоторых наиболее интересных «ролей», которые можно определить. Полный список доступен в указанном документе спецификации.
-
search -
banner -
presentation -
toolbar -
status -
menuitem -
log -
dialog -
link
Установление отношений вне структуры родитель / ребенок
Теперь давайте расширим вопрос, о котором мы говорили ранее: принудительная структура HTML. Хотя отношения родителя и ребенка хороши для принятия решения о порядке упорядочения, они не достигают цели, когда необходимы более значимые связи. Примером этого являются родственные элементы. В некоторых библиотеках добавлена возможность обхода одноуровневых элементов или других форм отношений элементов, но обычно это происходит в JavaScript или другом языке вне разметки.
ARIA дает нам возможность определять эти отношения прямо в разметке, упрощая группирование элементов меню, создание нестандартной навигации и прикрепление элементов управления к областям элементов, которые трудно выполнить в обычном режиме.
Давайте посмотрим, как мы можем использовать это для подключения некоторых элементов управления к области содержимого:
|
1
2
3
4
5
|
<img src=”nextbutton.jpg” role=”button” aria-controls=”tutorial” />
<div id=”tutorial”>
Your tutorial’s content
</div>
|
Этот фрагмент говорит, что изображение nextbutton.jpg — это кнопка, которая является элементом управления для учебного div ниже.
Создание «живых» элементов в ARIA
Последняя особенность ARIA, которую мы рассмотрим здесь, это атрибут aria-live . В то время как большинство других функций ARIA здесь имеют дело с семантическими связями, этот напрямую связан с идеей предоставления пользователям уведомлений об изменениях контента или элементов.
Для многих людей со слабым зрением может быть не сразу понятно, что их взаимодействие с вашим сайтом привело к изменениям в других частях страницы. Это может быть особенно актуально для незначительных изменений, таких как небольшие пятна текста, которые могут изменяться, но остаются относительно одинаковой длины. Используя этот атрибут, каждый раз, когда содержимое изменяется в пределах определенного элемента, ваш пользователь будет уведомлен.
Мы можем добавить этот атрибут к такому элементу:
|
1
2
3
|
<div aria-live=”true”>
Content that updates, ie.
</div>
|
Сделать Интернет лучше для всех пользователей
Учитывая, что немногим более 2% населения США несут какую-либо форму ярлыка со слабым зрением , улучшение доступности вашего сайта может значительно увеличить охват вашего сайта. Для тех, чьи сайты достигают нескольких стран, это число становится еще больше. Помимо доступности, ARIA также обеспечивает возможность использования вашего сайта интерфейсами, не относящимися к браузеру, с поддержкой ряда голосовых устройств.
Внедрение ARIA помогает вашим пользователям и может помочь вашему трафику, так что доберитесь до него!
Я пропустил какие-либо детали, или у вас есть дополнительные вопросы? Оставьте комментарий ниже!
Если вы хотите погрузиться в полную документацию ARIA или попробовать официальный инструмент тестирования, воспользуйтесь ссылками ниже: