ARIA-атрибуты

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, который позволяет улучшить доступность веб-компонентов для пользователей с ограниченными возможностями. В Naive UI использование ARIA-атрибутов обеспечивает корректное взаимодействие с экранными читалками, клавиатурой и другими ассистивными технологиями.

Naive UI предоставляет широкий набор компонентов, каждый из которых поддерживает базовые ARIA-атрибуты по умолчанию, но также допускает их расширение или переопределение. Это особенно важно для кастомных компонентов или при изменении поведения стандартного элемента.

Основные ARIA-атрибуты

  1. role Определяет роль элемента в интерфейсе. В Naive UI роли назначаются автоматически для большинства компонентов, но их можно явно задать через проп attr:

    <n-button :attr="{ role: 'switch' }">Вкл/Выкл</n-button>

    Наиболее часто используемые роли: button, dialog, menu, tab, tabpanel, switch.

  2. aria-label и aria-labelledby Обеспечивают текстовое описание элемента:

    • aria-label задает описание напрямую.
    • aria-labelledby ссылается на другой элемент с текстом. Пример с кнопкой:
    <n-button :attr="{ 'aria-label': 'Закрыть окно' }"></n-button>

    Для более сложных компонентов, таких как n-select, можно использовать aria-labelledby, чтобы связать заголовок и сам селект.

  3. aria-hidden Управляет видимостью элемента для ассистивных технологий. В Naive UI применяется, например, к всплывающим меню:

    <n-popover :attr="{ 'aria-hidden': true }">Контент всплывающего окна</n-popover>

  4. aria-expanded Используется для компонентов с раскрывающимся содержимым, например, аккордеонов и выпадающих списков:

    <n-collapse :attr="{ 'aria-expanded': isOpen }"></n-collapse>

    При изменении состояния isOpen ARIA-атрибут обновляется автоматически.

  5. aria-controls Связывает управляющий элемент с контролируемым элементом. Например, кнопка раскрытия панели:

    <n-button :attr="{ 'aria-controls': 'panel1', 'aria-expanded': isOpen }">Открыть панель</n-button>
<n-collapse id="panel1" v-model:show="isOpen">Содержимое панели</n-collapse>

Поддержка ARIA в интерактивных компонентах

Кнопки и переключатели

Naive UI автоматически задает role="button" для <n-button> и корректно управляет состояниями:

  • aria-disabled при disabled
  • aria-pressed для n-button с режимом toggle

Списки и селекты

Компоненты <n-select> и <n-virtual-list> используют:

  • role="listbox" для контейнера
  • role="option" для элементов списка
  • aria-selected для текущего выбора

Модальные окна и диалоги

Компонент <n-dialog> поддерживает:

  • role="dialog"
  • aria-modal="true" для блокировки фонового контента
  • aria-labelledby для заголовка диалога
  • aria-describedby для текста с инструкциями или описанием

Аккордеоны и раскрывающиеся панели

Компоненты <n-collapse> и <n-collapse-item> используют:

  • aria-expanded для контролирующих заголовков
  • aria-controls для связи заголовка и панели
  • role="button" для заголовка, если он кликабельный

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

Naive UI управляет многими ARIA-атрибутами автоматически при изменении состояния компонентов. Например, переключение вкладок в <n-tabs> обновляет:

  • aria-selected у активной вкладки
  • aria-controls связывает вкладку с панелью контента
  • tabindex для навигации с клавиатуры

При кастомизации компонентов можно использовать проп attr для добавления или переопределения ARIA-атрибутов:

<n-tabs v-model:active-name="activeTab" :attr="{ role: 'tablist' }">
  <n-tab-pane name="tab1" :attr="{ 'aria-label': 'Первая вкладка' }">Контент 1</n-tab-pane>
  <n-tab-pane name="tab2" :attr="{ 'aria-label': 'Вторая вкладка' }">Контент 2</n-tab-pane>
</n-tabs>

Проверка доступности

Naive UI компоненты совместимы с инструментами проверки доступности:

  • Lighthouse — для автоматического аудита страниц
  • axe-core — для тестирования ARIA-атрибутов и интерактивных элементов
  • Screen readers (NVDA, VoiceOver, JAWS) — для реальной проверки поведения

Особое внимание стоит уделять кастомным компонентам, где стандартные ARIA-атрибуты не назначаются автоматически. Использование attr позволяет задавать role, aria-label, aria-expanded и другие атрибуты вручную.

Рекомендации по работе с ARIA в Naive UI

  • Всегда проверять состояние компонента через ARIA-атрибуты, особенно при динамическом изменении UI.
  • Для кнопок, переключателей и вкладок использовать aria-pressed и aria-selected.
  • Связывать контролирующие элементы с управляемым содержимым через aria-controls.
  • Проверять совместимость с экранными читалками после кастомизации.
  • Использовать aria-hidden для скрытия элементов, которые не должны быть доступны.

Эффективное использование ARIA-атрибутов в Naive UI обеспечивает доступность интерфейса и повышает его удобство для всех пользователей.

Оглавление