ARIA атрибуты в Vue

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

Основы использования ARIA

ARIA атрибуты в Vue применяются так же, как и стандартные HTML-атрибуты, с использованием синтаксиса биндинга. Основные подходы включают:

  • Статическое добавление атрибутов:
<button aria-label="Закрыть окно">×</button>
  • Динамическое добавление через v-bind:
<button v-bind:aria-label="buttonLabel">×</button>

Здесь buttonLabel — реактивное свойство компонента, которое может меняться в зависимости от состояния интерфейса.

Динамическая доступность компонентов

Vue позволяет управлять состоянием ARIA в зависимости от логики приложения. Часто используется для элементов, таких как модальные окна, вкладки и аккордеоны.

Пример управления модальным окном:

<template>
  <div
    role="dialog"
    v-bind:aria-hidden="!isModalOpen"
    aria-modal="true"
  >
    <h2 id="modal-title">Заголовок модального окна</h2>
    <p>Контент модального окна</p>
    <button @click="closeModal">Закрыть</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    closeModal() {
      this.isModalOpen = false;
    }
  }
};
</script>
  • aria-hidden скрывает модальное окно от вспомогательных технологий, если оно закрыто.
  • role="dialog" сообщает о семантике блока.
  • aria-modal="true" указывает, что взаимодействие с другими элементами страницы временно ограничено.

ARIA и интерактивные элементы

Для интерактивных компонентов важно синхронизировать ARIA атрибуты с состоянием:

Аккордеон:

<template>
  <div>
    <button
      @click="togglePanel"
      :aria-expanded="isOpen.toString()"
      :aria-controls="'panel-' + id"
    >
      {{ title }}
    </button>
    <div
      :id="'panel-' + id"
      role="region"
      v-show="isOpen"
    >
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['title', 'content', 'id'],
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    togglePanel() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>
  • aria-expanded отражает состояние панели (открыта/закрыта).
  • aria-controls связывает кнопку с содержимым панели.
  • role="region" обозначает семантическую область.

Динамические списки и роли

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

<template>
  <ul role="list" aria-label="Список задач">
    <li v-for="task in tasks" :key="task.id" role="listitem" :aria-checked="task.done.toString()">
      {{ task.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: 'Купить продукты', done: false },
        { id: 2, name: 'Отправить отчёт', done: true }
      ]
    };
  }
};
</script>
  • role="list" и role="listitem" обеспечивают семантическую структуру.
  • aria-checked динамически отражает состояние задачи.

Директивы и пользовательские решения

Vue позволяет создавать собственные директивы для упрощения работы с ARIA:

<script>
export default {
  directives: {
    aria: {
      mounted(el, binding) {
        for (const [key, value] of Object.entries(binding.value)) {
          el.setAttribute(`aria-${key}`, value);
        }
      },
      updated(el, binding) {
        for (const [key, value] of Object.entries(binding.value)) {
          el.setAttribute(`aria-${key}`, value);
        }
      }
    }
  }
};
</script>

<template>
  <button v-aria="{ label: 'Закрыть', expanded: isOpen.toString() }">×</button>
</template>
  • Такая директива упрощает динамическое добавление и обновление ARIA атрибутов.
  • Позволяет централизованно управлять доступностью компонентов.

Важные практики

  • Всегда синхронизировать ARIA атрибуты с состоянием компонента.
  • Использовать правильные роли для интерактивных элементов (button, dialog, list, region, tab, tabpanel).
  • Избегать избыточного применения ARIA, когда стандартные HTML-элементы уже обеспечивают доступность.
  • Проверять доступность с помощью инструментов типа Lighthouse, axe, или встроенных проверок браузера.

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

Оглавление