Aria-label и aria-labelledby

Использование aria-label и aria-labelledby для улучшения доступности в тестах React

Доступность (accessibility) веб-приложений – это важный аспект, который нужно учитывать при разработке интерфейсов. В рамках тестирования React-приложений, использование атрибутов доступности, таких как aria-label и aria-labelledby, помогает обеспечить корректное взаимодействие с пользователем, в том числе для людей с ограниченными возможностями. В этой статье рассматриваются оба атрибута и их роль при написании тестов с использованием React Testing Library.

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

Пример:

<button aria-label="Close" onCl ick={closeModal}>
  <svg>...</svg> {/* Иконка закрытия */}
</button>

В этом примере кнопка с иконкой закрытия будет иметь текстовую метку “Close” для экранных читалок, но визуально на экране будет только иконка.

aria-labelledby: связь с другим элементом

Атрибут aria-labelledby используется для связывания элемента с текстом или другими элементами, которые служат его меткой. Этот атрибут указывает на идентификатор элемента или элементов, которые должны быть использованы как метка для текущего элемента.

Пример:

<div>
  <h2 id="modalTitle">Modal Window</h2>
  <button aria-labelledby="modalTitle">Open</button>
</div>

В данном примере кнопка с меткой “Open” будет ассоциироваться с элементом заголовка <h2>, который имеет id=“modalTitle”. Это позволяет экранным читалкам прочитать текст заголовка как описание для кнопки.

Разница между aria-label и aria-labelledby

  • aria-label используется для прямого указания текстовой метки.
  • aria-labelledby ссылается на другой элемент, который уже содержит текст, и используется для ассоциации текущего элемента с этим текстом.

Тестирование с React Testing Library

React Testing Library (RTL) предоставляет мощные инструменты для тестирования доступности, включая работу с элементами, использующими aria-label и aria-labelledby. Для тестирования таких элементов можно использовать различные методы, такие как getByLabelText или queryByLabelText, которые позволяют искать элементы по их меткам.

Поиск по aria-label

Метод getByLabelText позволяет найти элементы, которые имеют атрибут aria-label. Этот метод полезен, когда необходимо найти элементы, где текстовая метка задана непосредственно через атрибут.

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('button has aria-label', () => {
  render(<MyComponent />);
  const button = screen.getByLabelText(/close/i);
  expect(button).toBeInTheDocument();
});

В этом примере тест проверяет, что кнопка с атрибутом aria-label="Close" присутствует в DOM. Регулярное выражение /close/i позволяет найти кнопку, даже если текст в атрибуте не совсем точно совпадает.

Поиск по aria-labelledby

Когда элемент использует атрибут aria-labelledby, можно использовать getByLabelText, чтобы найти его по метке, ссылающейся на другой элемент.

test('button has aria-labelledby', () => {
  render(<MyComponent />);
  const button = screen.getByLabelText(/modal window/i);
  expect(button).toBeInTheDocument();
});

Здесь тест ищет кнопку, чья метка задана через aria-labelledby, ссылаясь на элемент заголовка с текстом “Modal Window”.

Важные замечания

  1. Семантика и доступность: Правильное использование aria-label и aria-labelledby улучшает доступность и помогает экранным читалкам правильно интерпретировать интерфейс. Важно помнить, что эти атрибуты не заменяют семантические HTML-элементы, такие как <button> или <label>. Их следует использовать для уточнения информации, когда стандартные подходы не работают.

  2. Поддержка браузеров: Все современные браузеры и экранные читалки поддерживают aria-label и aria-labelledby, однако всегда полезно тестировать доступность на разных устройствах и с различными вспомогательными технологиями, чтобы убедиться, что интерфейс работает корректно.

  3. Проверка на уникальность: Важно, чтобы значения атрибутов aria-label или ссылки на aria-labelledby были уникальными на странице. Это предотвращает путаницу и обеспечивает правильную навигацию для пользователей с ограничениями.

Практическое использование

Тесты с использованием React Testing Library и атрибутов доступности позволяют не только проверять функциональность компонентов, но и удостоверяться, что интерфейс доступен для всех пользователей. Регулярно тестируя элементы с aria-label и aria-labelledby, можно убедиться, что приложение не нарушает принципов доступности и гарантирует комфортное использование для людей с ограниченными возможностями.

Рекомендуется использовать такие тесты в качестве неотъемлемой части тестирования UI, особенно в проектах, ориентированных на широкий круг пользователей, включая тех, кто использует вспомогательные технологии.

Оглавление