Accessibility в Ext JS: как создавать доступные приложения без «костылей»

Доступность (accessibility, a11y) долгое время оставалась второстепенной задачей в веб-разработке. Её откладывали «на потом», считая дополнительной нагрузкой. Однако в 2026 году ситуация изменилась: для корпоративных приложений соответствие стандартам доступности стало обязательным требованием, а не опцией.

Государственные заказы, банковский сектор, здравоохранение, страхование — во всех этих отраслях приложения должны быть доступны людям с ограниченными возможностями. И здесь возникает проблема: большинство JavaScript-фреймворков не предоставляют встроенных инструментов для accessibility. Разработчикам приходится вручную добавлять ARIA-атрибуты, настраивать клавиатурную навигацию и тестировать со скринридерами — что отнимает огромное количество времени и часто делается некачественно.

Ext JS решает эту проблему иначе. В состав фреймворка входит ARIA Package — встроенный набор инструментов для обеспечения доступности, который позволяет создавать приложения, соответствующие Section 508 и WCAG 2.2, без необходимости вручную прорабатывать каждый компонент.

В этой статье мы разберем, как устроен блок Accessibility в Ext JS: какие стандарты он поддерживает, как работает с скринридерами и что нового появилось в версии 8.0.

📋 Какие стандарты доступности поддерживает Ext JS

Ext JS ориентирован на два ключевых стандарта доступности:

1. Section 508 — федеральный стандарт США, требующий, чтобы все электронные и информационные технологии были доступны людям с ограниченными возможностями. Он обязателен для всех организаций, работающих с государственными заказами. Ext JS ARIA Package предоставляет инструменты для достижения соответствия этому стандарту.

2. WCAG 2.2 (Web Content Accessibility Guidelines) — международный стандарт доступности веб-контента, разработанный консорциумом W3C. Версия 2.2 является актуальной и включает требования по:

• Воспринимаемости — информация должна быть представлена в формах, доступных для восприятия (например, текстовые альтернативы для изображений).

• Управляемости — все функции должны быть доступны с клавиатуры.

• Понятности — интерфейс должен быть предсказуемым и понятным.

• Надёжности — контент должен корректно работать с различными вспомогательными технологиями.

Modern Toolkit в Ext JS предоставляет встроенную поддержку WCAG 2.2, включая ARIA-семантику, клавиатурную навигацию и совместимость со скринридерами. Это означает, что разработчик получает доступность «из коробки», а не вынужден дорабатывать каждый компонент вручную.

🏗️ ARIA Package: как это работает

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, которые делают динамический веб-контент доступным для вспомогательных технологий. Скринридеры (программы чтения с экрана) используют эти атрибуты, чтобы «понимать», что представляет собой тот или иной элемент интерфейса: кнопка это или вкладка, какое у неё состояние, можно ли с ней взаимодействовать.

Что делает ARIA Package в Ext JS:

Все компоненты Ext JS автоматически размечены ARIA-атрибутами. Например, компонент Ext.button.Button имеет переопределённый ariaRole, равный "button" — это сообщает скринридеру, что перед ним кнопка, а не просто стилизованный div.

Ключевые ARIA-роли, поддерживаемые в Ext JS:

• button — для кнопок.

• tab и tabpanel — для вкладок и панелей вкладок.

• grid и row — для таблиц данных.

• tree и treeitem — для деревьев.

• form и textbox — для форм и полей ввода.

• dialog — для модальных окон.

ARIA Package также поддерживает динамические состояния: например, когда кнопка становится неактивной, атрибут aria-disabled автоматически обновляется, и скринридер сообщает пользователю, что элемент недоступен.

🔊 Поддержка скринридеров

Одно дело — добавить ARIA-атрибуты, и совсем другое — убедиться, что они правильно интерпретируются популярными программами чтения с экрана. Ext JS 8.0 обеспечивает совместимость с четырьмя основными скринридерами:

• JAWS (Job Access With Speech) — наиболее распространённый коммерческий скринридер для Windows.

• Narrator — встроенный скринридер Windows от Microsoft.

• TalkBack — скринридер для Android.

• VoiceOver — скринридер для macOS и iOS от Apple.

Эта поддержка критически важна для корпоративных приложений, которые должны работать на всех платформах: десктопы с Windows, планшеты на Android, устройства Apple. Разработчику не нужно беспокоиться о том, что приложение будет работать только с одним скринридером — Ext JS обеспечивает совместимость со всеми основными.

⌨️ Клавиатурная навигация

Доступность — это не только скринридеры. Многие пользователи (не только с ограниченными возможностями) предпочитают управлять приложением с клавиатуры, потому что это быстрее, чем использовать мышь. Ext JS обеспечивает полноценную клавиатурную навигацию для всех компонентов.

Как это работает:

В Ext JS 5.0.1 поддержка фокуса и клавиатурной навигации была перенесена из отдельного пакета ext-aria непосредственно в ядро фреймворка. Это означает, что каждый компонент имеет свойство focusable, которое управляет атрибутом tabIndex в DOM.

Когда focusable установлен в true, компонент может получать фокус — либо через клик мышью, либо через клавишу Tab.

Ключевые возможности клавиатурной навигации:

• Tab — перемещение между интерактивными элементами.

• Стрелки — навигация внутри групп компонентов (например, между вкладками или строками таблицы).

• Enter — активация выбранного элемента (нажатие кнопки, вход в режим редактирования ячейки).

• Escape — закрытие диалогов, отмена редактирования.

• Визуальная индикация фокуса — все компоненты (кнопки, вкладки, поля форм, ячейки таблиц) предоставляют чёткую визуальную индикацию того, что элемент находится в фокусе. Это не просто техническое требование — это критически важно для пользователей, которые навигируют с клавиатуры.

Навигация по компонентам:

С помощью FocusableContainer (миксина для групп компонентов) реализована навигация по стрелкам между элементами группы при сохранении только одного элемента, доступного через Tab. Это стандартный паттерн для таких компонентов, как панели вкладок (TabPanel), меню, группы радиокнопок и тулбары.

🆕 Что нового в Ext JS 8.0

Версия 8.0 принесла несколько значительных улучшений в области доступности:

1. Расширенная поддержка ARIA для полей форм (Modern Toolkit)

Modern Toolkit получил полную ARIA-поддержку для полей форм и триггеров. Это означает, что такие элементы, как выпадающие списки, поля с датами, комбинированные поля, теперь корректно распознаются скринридерами как интерактивные элементы с определённой ролью.

2. Tri-state чекбоксы для TreePanel (Classic Toolkit)

Classic Toolkit получил tri-state чекбоксы для TreePanel — трёхпозиционные флажки, которые автоматически синхронизируют состояние родительских и дочерних узлов. Это соответствует паттернам Material Design и упрощает создание доступных интерфейсов для работы с иерархическими данными.

3. Улучшения Dialog Boundary Control

Ext.Dialog теперь поддерживает boundary-aware операции: диалоги максимизируются, минимизируются и перетаскиваются внутри границ родительского контейнера, а не всего viewport. Это улучшает управление фокусом и делает поведение диалогов более предсказуемым для пользователей скринридеров.

4. Совместимость с буферизованным рендерингом Grid

Новая функция буферизованного рендеринга колонок (Horizontal Buffering) в Modern Toolkit бесшовно работает с функциями доступности. Это означает, что даже при отображении таблиц с более чем 1000 колонок скринридеры корректно получают информацию о структуре таблицы и её содержимом.

💎 Заключение

Блок Accessibility в Ext JS — это не «дополнительная фича», а архитектурная основа для создания приложений, которые могут использовать все категории пользователей.

В большинстве фреймворков доступность — это то, что разработчики добавляют после создания приложения, часто с большим трудом и неполно. В Ext JS доступность встроена в каждый компонент с самого начала. Именно поэтому Ext JS остаётся выбором номер один для корпоративных приложений, где соответствие стандартам доступности является обязательным требованием.

---

Если у вас есть опыт создания доступных приложений на Ext JS или вопросы по ARIA и клавиатурной навигации, поделитесь в комментариях.