Создание доступных богатых интернет-приложений (арии) с Javascript

Введение в доступные богатые интернет-приложения

Доступные богатые интернет-приложения (ARIA) - это техническая спецификация, опубликованная Консорциумом Всемирной паутины (W3C), которая устраняет разрыв между динамическими интерфейсами, управляемыми JavaScript, и вспомогательными технологиями, такими как экранные считыватели, дисплеи Брайля и программное обеспечение голосового управления. Без ARIA сложные виджеты, такие как автозаполненные выпадения, панели вкладок, виды деревьев и модальные диалоги, могут стать невидимыми или непонятными для пользователей, которые полагаются на невизуальное взаимодействие. JavaScript - это двигатель, который делает эти интерфейсы динамичными, но он также вводит риск создания недоступных атрибутов, если атрибуты ARIA не управляются правильно. Комбинируя ARIA с тщательно разработанным JavaScript, разработчики могут гарантировать, что каждое изменение состояния, движение фокуса и обновление контента передаются вспомогательным технологиям в режиме реального времени.

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

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

Роль, государства и собственность ARIA

Оригинальное название: Defining the Widget Type

Роль ARIA сообщает вспомогательной технологии, что элемент должен делать. Например, сигнализирует, что элемент представляет собой панель содержимого, связанную с вкладкой. Роли делятся на несколько категорий: роли виджетов (например, , , ), роли структуры документа (например, , , )) и знаковые роли (например, , , . Когда родной элемент HTML уже обеспечивает ту же семантику, лучше использовать родной элемент, а не добавлять роль ARIA. Например, использовать вместо . Однако, когда нет нативного элемента — например, с деревом или комбобоксом — роли ARIA становятся незаменимыми.

Состояние и свойства: динамические атрибуты

ARIA-состояния — это атрибуты, которые изменяются в ответ на взаимодействие пользователя или логику приложения.

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

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

Внедрение ARIA с JavaScript: основные шаблоны

Динамическое управление атрибутами

Наиболее простой задачей ARIA является переключение булевых атрибутов. Для расширяемых меню, виджетов раскрытия и аккордеонных панелей характерен следующий шаблон:

const trigger = document.getElementById('expand-trigger');
const target = document.getElementById('expandable-content');

trigger.addEventListener('click', () => {
 const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
 trigger.setAttribute('aria-expanded', !isExpanded);
 target.hidden = isExpanded;
});

Обратите внимание, что атрибут HTML также переключается. Это гарантирует, что контент действительно удаляется из дерева доступности при коллапсе, а не просто визуально скрыт. Опираясь только на CSS, чтобы скрыть контент, он может быть сфокусирован или читаемым считывателями экрана.

Для более сложных виджетов, таких как панель вкладок, несколько атрибутов должны управляться вместе. Когда выбрана новая вкладка, ранее выбранная вкладка теряет свою , а связанная с ней панель скрыта, в то время как вновь выбранная вкладка получает и ее панель становится видимой. JavaScript также должен обновлять , чтобы управлять фокусом в списке вкладок.

для динамического контента

Когда контент изменяется вне фокуса пользователя (например, появляются обновления ленты новостей или ошибка проверки), экранные читатели не могут объявить об изменении, если регион не помечен . свойство принимает три значения: (по умолчанию), (объявить об отсутствии работы) и (прервать немедленно). Используйте для некритических обновлений и резервируйте для срочных сообщений, таких как оповещения об ошибках.

const liveRegion = document.getElementById('status-messages');
liveRegion.setAttribute('aria-live', 'polite');

function addMessage(text) {
 const p = document.createElement('p');
 p.textContent = text;
 liveRegion.appendChild(p);
}

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

Управление фокусом с помощью JavaScript

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

Пример модального диалога:

function openDialog(dialogElement) {
 dialogElement.removeAttribute('hidden');
 dialogElement.setAttribute('aria-modal', 'true');
 dialogElement.setAttribute('role', 'dialog');
 // Focus the first focusable element inside the dialog
 const firstFocusable = dialogElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
 if (firstFocusable) {
 firstFocusable.focus();
 }
 // Store the previously focused element
 this.lastFocused = document.activeElement;
}

Ловушка фокусировки гарантирует, что нажатие циклов Tab или Shift + Tab только через элементы в диалоге. Это может быть достигнуто путем прослушивания событий выключения клавиш в диалоге и перенаправления фокуса на первого или последнего сфокусированного ребенка, когда это необходимо.

Навигация по клавиатуре и ARIA: Неразрывная пара

Роли и атрибуты ARIA передают только семантику; они не обеспечивают автоматическое взаимодействие с клавиатурой. JavaScript должен реализовать ожидаемое поведение клавиатуры для каждого шаблона виджета. Руководство W3C ARIA Authoring Practices Guide (APG) предоставляет подробные конвенции клавиатуры для общих шаблонов. Например, список вкладок ожидает, что ключ перейдет в и из списка вкладок, в то время как ключи и перемещаются между отдельными вкладками. Комбобокс требует , чтобы открыть ящик списков и , чтобы закрыть его.

Неспособность реализовать поддержку клавиатуры является одним из наиболее распространенных сбоев доступности. Карусель, которая реагирует только на щелчки мыши, список перетаскивания, который работает только с помощью касания, или подсказка, которая появляется только на наведении, полностью исключает пользователей только клавиатуры и считывателя экрана. Обработчики событий JavaScript должны охватывать триггеры как мыши, так и клавиатуры. Например, событие загорается как на щелчке мыши, так и на клавише Enter/Space для нативных интерактивных элементов, таких как . Но если вы используете в качестве кнопки, вы должны вручную прослушивать события и выполнять действие на входе или пространстве.

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

Общие шаблоны ARIA с примерами JavaScript

1.Доступная аккордеон

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

const accordionButtons = document.querySelectorAll('.accordion-button');
accordionButtons.forEach(btn => {
 btn.addEventListener('click', () => {
 const panel = document.getElementById(btn.getAttribute('aria-controls'));
 const expanded = btn.getAttribute('aria-expanded') === 'true';
 btn.setAttribute('aria-expanded', !expanded);
 panel.hidden = expanded;
 });
});

2. Автозаполнение Combobox

Комбобоксы требуют ввода текста (), всплывающего окна списка () и опций (). JavaScript должен управлять и , когда пользователь перемещается с помощью клавиш стрелок. Руководство по комбобоксу MDN обеспечивает тщательную ссылку на реализацию.

3. Модальный диалог

Модальный диалог использует и . При открытии остальная часть страницы должна быть инертной, фокусироваться внутри и применяться к контейнерам-сестрам. Ключ Escape закрывает диалог.

Тестирование реализации ARIA

Тестирование с помощью реальных вспомогательных технологий незаменимо, но автоматизированные инструменты могут рано улавливать многие проблемы. Инструменты разработчика браузера теперь включают панели доступности, которые показывают вычисленное дерево доступности. Расширение браузера axe DevTools обнаруживает нарушения, такие как отсутствие атрибутов ARIA, неправильное использование ролей и ошибки управления фокусом. Кроме того, экранные считыватели, такие как NVDA, JAWS и VoiceOver, предлагают тестовые режимы. Проверяйте каждый переход состояния: открывайте диалог, закройте его, выберите из списка и проверьте, что объявления имеют смысл.

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

Лучшие практики для производства готовых ARIA с JavaScript

Обычные подводные камни, чтобы избежать

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

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

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

Заключение

Создание доступных богатых интернет-приложений с JavaScript и ARIA является одновременно технической дисциплиной и приверженностью инклюзивному дизайну. ARIA обеспечивает семантические леса, которые превращают общие HTML-контейнеры в узнаваемые виджеты, в то время как JavaScript приводит их к жизни с динамическим поведением, навигацией по клавиатуре и управлением состоянием. Каждый атрибут — , , и другие — должен поддерживаться последовательно с визуальным интерфейсом.

Следуя шаблонам и лучшим практикам, изложенным здесь, разработчики могут создавать веб-приложения, которые работают для всех: сенсорные, мышиные, клавиатурные, считывающие экраны и голосовые пользователи. Доступность не является запоздалой мыслью; это неотъемлемая часть процесса разработки JavaScript. Для дальнейшего чтения обратитесь к руководству по авторским практикам W3C ARIA и документации MDN ARIA , которые предлагают авторитетные ссылки для каждой роли и атрибута. Тестирование с помощью реальной вспомогательной технологии и итерация на основе обратной связи с пользователем обеспечат, что ваши богатые интернет-приложения действительно доступны для всех.