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

Веб-тестирование, включая работу с WebdriverIO, требует не только проверки функциональности, но и учета различных аспектов доступности веб-приложений. Одним из таких аспектов является использование альтернативного текста (alt text) для изображений. Это текстовое описание изображений, которое помогает пользователям с ограниченными возможностями воспринимать содержание изображения через средства экранного чтения. Для правильной проверки использования alt-текста можно применять WebdriverIO.

Зачем нужен альтернативный текст?

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

Как проверить наличие alt-текста с WebdriverIO

С помощью WebdriverIO можно легко написать тест, который будет проверять наличие alt-текста для изображений на веб-странице. Для этого можно использовать различные методы WebdriverIO, например, getAttribute(), чтобы получить значение атрибута alt.

Пример кода для проверки alt-текста изображения:

describe('Проверка alt-текста для изображений', () => {
  it('Должен проверять наличие alt-текста на всех изображениях', async () => {
    const images = await $$('img'); // Получаем все изображения на странице
    for (let image of images) {
      const altText = await image.getAttribute('alt'); // Получаем alt-текст изображения
      expect(altText).not.toBeNull(); // Проверяем, что alt-текст не пустой
      expect(altText.length).toBeGreaterThan(0); // Проверяем, что alt-текст не пуст
    }
  });
});

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

Валидация содержимого alt-текста

Важно, чтобы alt-текст не только присутствовал, но и содержал описание, которое адекватно передает информацию о содержимом изображения. Например, если изображение является логотипом, alt-текст должен быть кратким и информативным: «Логотип компании». Если изображение иллюстрирует какое-то событие или процесс, alt-текст должен подробно описывать этот момент.

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

describe('Проверка содержания alt-текста для изображений', () => {
  it('Должен содержать адекватное описание для каждого изображения', async () => {
    const images = await $$('img'); // Получаем все изображения
    for (let image of images) {
      const altText = await image.getAttribute('alt'); // Получаем alt-текст
      expect(altText).toMatch(/.+/); // Проверяем, что alt-текст не пустой
      expect(altText).not.toMatch(/placeholder/i); // Проверяем, что alt-текст не является заглушкой
    }
  });
});

Такой подход позволит убедиться, что изображения не содержат бессмысленных заглушек типа «image1» или «placeholder», а действительно имеют содержательный alt-текст.

Работа с изображениями, не требующими alt-текста

Некоторые изображения, такие как декоративные элементы или иконки, не несут смысла и не требуют alt-текста. Для таких изображений рекомендуется ставить пустой alt-текст (атрибут alt=""). Это указывает экранным читалкам, что изображение не имеет значения, и они могут пропустить его.

Пример проверки, что декоративные изображения имеют пустой alt-текст:

describe('Проверка пустого alt-текста для декоративных изображений', () => {
  it('Должен проверять, что декоративные изображения имеют пустой alt-текст', async () => {
    const images = await $$('img'); // Получаем все изображения на странице
    for (let image of images) {
      const altText = await image.getAttribute('alt'); // Получаем alt-текст
      const isDecorative = await image.getAttribute('role') === 'presentation' || image.getAttribute('class').includes('decorative');
      
      if (isDecorative) {
        expect(altText).toBe(''); // Для декоративных изображений alt должен быть пустым
      }
    }
  });
});

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

Использование атрибутов title и aria-label для дополнительных описаний

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

Хотя использование этих атрибутов не является обязательным, в некоторых случаях они могут улучшить доступность. Например, атрибут aria-label может быть использован для улучшения контекста изображения:

describe('Проверка aria-label для изображений', () => {
  it('Должен проверять наличие aria-label на изображениях с дополнительным контекстом', async () => {
    const images = await $$('img'); // Получаем все изображения
    for (let image of images) {
      const ariaLabel = await image.getAttribute('aria-label'); // Получаем значение атрибута aria-label
      if (ariaLabel) {
        expect(ariaLabel.length).toBeGreaterThan(0); // Проверяем, что aria-label не пуст
      }
    }
  });
});

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

Важность тестирования доступности изображений

Тестирование доступности изображений — важная часть работы с WebdriverIO, особенно при тестировании сайтов для людей с ограниченными возможностями. Корректное использование alt-текста и других атрибутов может существенно повысить качество веб-приложений, обеспечив доступ к контенту для большего числа пользователей.

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

Оглавление