Описание изображений (alt текст)

Описание изображений, или атрибут alt, играет важную роль в доступности веб-приложений. В контексте тестирования с использованием React Testing Library важно проверять правильность отображения таких атрибутов, поскольку они влияют на взаимодействие с приложением для пользователей, которые используют экранные читалки или другие вспомогательные технологии. Кроме того, правильные атрибуты alt помогают поисковым системам правильно индексировать контент.

Значение атрибута alt

Атрибут alt используется для предоставления текстового описания изображений. Это описание становится доступным пользователям, если изображение не загружается или если оно недоступно по каким-либо другим причинам. Экранные читалки, используемые людьми с нарушениями зрения, озвучивают содержимое атрибута alt, что позволяет пользователю понять, что изображено на картинке.

Зачем проверять alt текст в тестах

В тестировании с React Testing Library проверка корректности alt текста имеет несколько целей:

  1. Проверка доступности: Убедиться, что изображения имеют описание, которое будет доступно пользователям с ограниченными возможностями.
  2. SEO оптимизация: Поисковые системы используют alt текст для индексации изображений, что влияет на поисковую видимость сайта.
  3. Точность отображения контента: Убедиться, что изображения отображают соответствующий контент в соответствии с ожидаемым поведением интерфейса.

Пример компонента с изображением

Для начала рассмотрим простой пример компонента, который отображает изображение:

function UserProfile({ imageUrl, altText }) {
  return <img src={imageUrl} alt={altText} />;
}

В этом примере компонент UserProfile принимает два пропса: imageUrl — URL изображения, и altText — текст, который будет использоваться для атрибута alt. Тестирование такого компонента должно включать проверку правильности описания изображения, чтобы гарантировать, что текст доступен для пользователей.

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

Для тестирования компонента с изображением с использованием React Testing Library, нам необходимо проверить, что атрибут alt присутствует и правильно отображает текст. Использование метода getByAltText — это один из способов поиска элемента изображения по его описанию.

Пример теста для компонента UserProfile:

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

test('проверка alt текста изображения', () => {
  render(<UserProfile imageUrl="https://example.com/avatar.jpg" altText="Профиль пользователя" />);

  const image = screen.getByAltText('Профиль пользователя');
  expect(image).toBeInTheDocument();
});

В этом тесте компонент UserProfile рендерится с изображением, и мы проверяем, что изображение можно найти по тексту в атрибуте alt. Функция screen.getByAltText позволяет найти элемент изображения, что подтверждает, что описание изображения правильно передается в атрибут alt.

Пустой или отсутствующий alt текст

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

Пример:

function DecorativeImage() {
  return <img src="decorative-image.jpg" alt="" />;
}

Тест для такого компонента может выглядеть следующим образом:

test('проверка пустого alt текста для декоративного изображения', () => {
  render(<DecorativeImage />);

  const image = screen.getByAltText('');
  expect(image).toBeInTheDocument();
});

Здесь важно, чтобы alt текст был пустым, что указывает на декоративную роль изображения.

Обработка изображений без alt текста

Если изображение не содержит атрибут alt, это может привести к проблемам с доступностью, поскольку пользователи с ограничениями не смогут понять, что изображено на картинке. В таких случаях тесты должны выявлять такие проблемы, чтобы обеспечить необходимую доступность.

Пример компонента без alt текста:

function ImageWithoutAlt() {
  return <img src="image-without-alt.jpg" />;
}

Тест:

test('проверка отсутствия alt текста', () => {
  render(<ImageWithoutAlt />);
  
  const image = screen.getByRole('img');
  expect(image).not.toHaveAttribute('alt');
});

В этом тесте мы проверяем, что изображение не имеет атрибута alt. Для улучшения доступности следует добавить описание изображения.

Тестирование различных значений alt текста

При тестировании важно убедиться, что значение атрибута alt точно соответствует ожидаемому тексту. Например, если описание изображения меняется в зависимости от состояния компонента, это должно быть учтено в тестах.

Пример:

function ConditionalImage({ isUserLoggedIn }) {
  return (
    <img
      src={isUserLoggedIn ? 'logged-in.jpg' : 'logged-out.jpg'}
      alt={isUserLoggedIn ? 'Пользователь вошел в систему' : 'Пользователь не авторизован'}
    />
  );
}

Тест:

test('проверка alt текста в зависимости от состояния', () => {
  const { rerender } = render(<ConditionalImage isUserLoggedIn={false} />);
  
  let image = screen.getByAltText('Пользователь не авторизован');
  expect(image).toBeInTheDocument();

  rerender(<ConditionalImage isUserLoggedIn={true} />);
  
  image = screen.getByAltText('Пользователь вошел в систему');
  expect(image).toBeInTheDocument();
});

Этот тест проверяет, что описание изображения меняется в зависимости от состояния пропса isUserLoggedIn. Это также показывает, как можно тестировать динамическое изменение alt текста.

Выводы

  • Проверка alt текста помогает обеспечить доступность и улучшить SEO.
  • React Testing Library предоставляет удобные инструменты для поиска и проверки изображений по alt тексту.
  • Тесты должны учитывать различные случаи использования alt текста, включая пустые и динамические значения.

Тестирование атрибутов alt важно не только для доступности, но и для обеспечения качественного взаимодействия пользователей с веб-приложениями.

Оглавление