Альтернативный текст для изображений

Атрибут alt и его значение

В MDX изображения создаются с использованием стандартного JSX-синтаксиса, что позволяет полностью контролировать свойства HTML-тегов. Одним из ключевых атрибутов является alt — текстовое описание изображения, предназначенное для:

  • пользователей с нарушениями зрения, которые используют скринридеры;
  • ситуаций, когда изображение не загружается;
  • поисковой оптимизации (SEO).

Пример базового использования:

<img src="/images/logo.png" alt="Логотип компании" />

Здесь "Логотип компании" — альтернативный текст, который должен кратко, но точно описывать содержимое изображения.

Рекомендации по написанию alt текста

  • Конкретность и информативность: текст должен объяснять смысл изображения, а не просто повторять название файла.
  • Краткость: оптимальный размер текста — 100–125 символов.
  • Избегание декоративных описаний: если изображение носит чисто декоративный характер, атрибут можно оставить пустым: alt="". Это позволяет скринридерам пропускать такие элементы.

Пример декоративного изображения:

<img src="/images/decorative-line.png" alt="" />

Использование alt с компонентами MDX

MDX позволяет создавать компоненты-обертки для изображений. Это удобно, когда необходимо стандартизировать отображение и описание изображений. Например:

const ImageWithAlt = ({ src, alt }) => (
  <figure>
    <img src={src} alt={alt} />
    <figcaption>{alt}</figcaption>
  </figure>
);

<ImageWithAlt src="/images/chart.png" alt="График роста продаж за 2025 год" />

Такой подход обеспечивает:

  • единообразие структуры изображений;
  • автоматическую генерацию подписей из альтернативного текста;
  • улучшение доступности и SEO без дополнительного кода.

Динамический alt текст через пропсы

MDX поддерживает JavaScript внутри JSX, что позволяет формировать текст динамически. Например, для списка товаров:

const products = [
  { name: "Ноутбук", image: "/images/laptop.png" },
  { name: "Смартфон", image: "/images/phone.png" }
];

products.map(product => (
  <img key={product.name} src={product.image} alt={`Изображение ${product.name}`} />
))

Это упрощает масштабирование проекта и гарантирует корректность альтернативного текста даже при больших объемах данных.

Роль alt текста для SEO и доступности

  • Скринридеры читают alt, делая контент доступным для людей с ограничениями зрения.
  • Поисковые системы индексируют альтернативный текст, улучшая ранжирование страниц с изображениями.
  • Правильное использование alt помогает соблюдать стандарты WCAG 2.1 (Web Content Accessibility Guidelines).

Ошибки при работе с альтернативным текстом

  • Отсутствие alt у контентных изображений.
  • Использование текста типа "image" или "фото", не описывающего содержимое.
  • Слишком длинные описания, перегружающие скринридеры.
  • Дублирование текста alt для разных изображений без уточнения контекста.

Дополнительные возможности MDX для изображений

  • Интеграция с библиотеками изображений (например, next/image в Next.js), сохраняя доступность через alt.
  • Комбинирование с компонентами figure и figcaption для структурированного контента.
  • Поддержка Markdown-стиля изображений:
![Описание изображения](/images/photo.png)

MDX автоматически преобразует это в JSX с корректным alt.

Выводы по практическому применению

  • Каждый <img> должен иметь осмысленный alt.
  • Декоративные изображения оставлять с пустым alt.
  • Для повторяющихся элементов использовать компоненты с пропсами.
  • Следить за длиной и точностью текста для доступности и SEO.

Использование этих принципов обеспечивает не только соответствие стандартам веб-доступности, но и улучшает пользовательский опыт и индексируемость сайта.

Оглавление