Aria-hidden для скрытого контента

Атрибут aria-hidden используется для управления доступностью контента на веб-страницах. Этот атрибут скрывает элементы для экранных читалок и других вспомогательных технологий, что позволяет разработчикам лучше управлять доступностью интерфейса. В контексте тестирования на базе React Testing Library, правильно использование aria-hidden помогает симулировать пользовательский опыт с учётом скрытого контента и проверить, как поведение элементов изменяется в зависимости от их доступности.

Что такое aria-hidden?

Атрибут aria-hidden является частью спецификации ARIA (Accessible Rich Internet Applications), которая предоставляет дополнительную информацию для вспомогательных технологий. Когда aria-hidden="true", элемент становится невидимым для экранных читалок и других технологий помощи. Однако, это не означает, что элемент становится невидимым для пользователя, он по-прежнему может быть видим на экране, если у него нет стилей для скрытия.

Для того чтобы элемент был полностью скрыт как визуально, так и для технологий помощи, следует использовать CSS-свойства, такие как display: none или visibility: hidden. Атрибут aria-hidden же влияет исключительно на доступность и не скрывает элемент визуально.

Как использовать aria-hidden в React

В React компоненте атрибут aria-hidden можно добавлять как пропс. Если элемент, к примеру, не должен быть доступен для экранного читалки, но при этом должен оставаться видимым, добавление aria-hidden="true" исключит его из потока доступных для восприятия с помощью вспомогательных технологий.

Пример:

<div aria-hidden="true">
  Этот текст будет скрыт для экранных читалок.
</div>

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

Влияние на тестирование с React Testing Library

React Testing Library ориентирован на тестирование компонентов с точки зрения того, как их воспринимает реальный пользователь. Когда используется атрибут aria-hidden, это влияет на доступность контента в тестах. Если элемент скрыт с помощью aria-hidden="true", то тесты должны учитывать, что его не будет видно через вспомогательные инструменты, такие как экранные читалки.

Пример теста с использованием aria-hidden:

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

test('проверка скрытого контента с aria-hidden', () => {
  render(<div aria-hidden="true">Скрыто для экранных читалок</div>);
  
  // Проверка, что элемент скрыт для доступных технологий
  const hiddenElement = screen.queryByText('Скрыто для экранных читалок');
  expect(hiddenElement).not.toBeInTheDocument();
});

В этом примере элемент с текстом будет скрыт от вспомогательных технологий, и попытка найти его через screen.queryByText вернёт null.

Взаимодействие с элементами

Важный момент: если элемент скрыт через aria-hidden="true", он не должен взаимодействовать с пользователем через элементы управления или формы. Например, не следует ожидать, что скрытые элементы будут активными или интерактивными, если они скрыты для вспомогательных технологий. Тесты на взаимодействие с такими элементами могут привести к непредсказуемым результатам, так как они не будут восприниматься как доступные для пользователя.

Пример с фокусом на скрытом элементе:

test('невозможно взаимодействовать с элементом с aria-hidden', () => {
  render(
    <div>
      <button aria-hidden="true" onCl ick={() => {}}>Кнопка</button>
    </div>
  );
  
  // Проверка, что кнопка не может быть активирована
  const button = screen.getByRole('button');
  expect(button).toBeDisabled();
});

Поведение при динамическом изменении aria-hidden

Может возникнуть ситуация, когда элемент должен быть доступен или скрыт в зависимости от состояния компонента. Для таких случаев важно тестировать динамическое изменение атрибута aria-hidden и проверять, как это влияет на поведение приложения.

Пример компонента, который меняет доступность:

import { useState } from 'react';

function ToggleComponent() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onCl ick={() => setIsVisible(!isVisible)}>Переключить видимость</button>
      <div aria-hidden={!isVisible}>Этот контент можно скрыть и показать</div>
    </div>
  );
}

Тест для проверки динамического изменения aria-hidden:

test('смена доступности контента через aria-hidden', () => {
  render(<ToggleComponent />);
  
  const button = screen.getByText('Переключить видимость');
  
  // Изначально элемент скрыт
  let content = screen.queryByText('Этот контент можно скрыть и показать');
  expect(content).toBeNull();
  
  // Нажимаем кнопку, чтобы показать контент
  fireEvent.click(button);
  content = screen.queryByText('Этот контент можно скрыть и показать');
  expect(content).toBeInTheDocument();
});

Рекомендации по использованию aria-hidden

  1. Не используйте aria-hidden="true" для скрытия важных элементов интерфейса, таких как кнопки, поля ввода, или ссылки. Это может привести к плохому пользовательскому опыту для пользователей с ограниченными возможностями.
  2. Используйте aria-hidden только для декоративных или вспомогательных элементов, которые не несут важной информации для пользователей.
  3. Проверяйте взаимодействие с элементами, скрытыми через aria-hidden, чтобы удостовериться, что они не активируются и не влияют на логику работы приложения.
  4. Тестируйте динамическое изменение доступности с помощью aria-hidden в зависимости от состояния компонентов, чтобы убедиться, что изменения корректно отражаются в пользовательском интерфейсе.

Правильное использование aria-hidden и тестирование с React Testing Library помогает создавать доступные и функциональные интерфейсы, соответствующие стандартам доступности, что особенно важно для пользователей с ограниченными возможностями.

Оглавление