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

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

Доступные изображения полезны пользователям в следующих случаях:

  • Пользователи используют программу чтения с экрана
  • Пользователи, использующие программное обеспечение для речевого ввода
  • Пользователи, просматривающие веб-сайты с поддержкой речи.
  • Улучшение пользовательского опыта мобильного Интернета
  • Поисковая оптимизация

Категории изображений

Существует 7 широких категорий, по которым изображения, используемые на веб-странице, можно классифицировать на основе стандартов веб-доступности:

Информативные изображения

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

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

<img src="kitchen.jpg" alt="a layout for kitchen setup in modern homes" />

Декоративные изображения

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

Например, приведенное ниже изображение является хорошим примером декоративного изображения, поскольку оно не добавляет ценности с точки зрения помощи пользователю в понимании контекста. Он существует только для визуального украшения веб-страницы.

  • Поскольку в приведенном выше примере изображения нет информации, полезной для пользователя, рекомендуется добавить пустой замещающий текст для изображения.
  • Везде, где это возможно, мы можем добавлять такие изображения с помощью CSS-свойства background-image, которое полностью исключит его из разметки, а также будет пропущено средством чтения с экрана, которое ожидается здесь.
  • Пустой тег alt должен явно присутствовать в теге <img />, так как если его пропустить, программа чтения с экрана может прочитать имя файла для изображения, что еще больше запутает пользователя.
  • Мы можем использовать атрибут WAI-ARIA role="presentation", чтобы программы чтения с экрана пропускали эти изображения, однако это не принято в качестве стандарта для всех программ чтения с экрана, и рекомендуется обязательно связать его с пустым атрибутом alt.

Функциональные изображения

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

Пример:

<a href="https://www.smallcase.com">
    <img src="img/smallcase-logo.png" alt="Smallcase Home" />
</a>
  • Альтернативный текст должен описывать действие, которое произойдет при нажатии на изображение, а не само изображение.
  • Альтернативный текст имеет решающее значение для понимания функциональности отображаемого контента.
  • Изображение можно отнести к категории функциональных, поскольку логотип действует как ссылка для перенаправления обратно на домашнюю страницу. Поскольку это действие включает перенаправление на домашнюю страницу, имеет смысл включить слово Home в альтернативный текст, чтобы информировать пользователей о том, что эта ссылка возвращает вас на домашнюю страницу при нажатии.

Изображения текста

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

<img src="img/fully-secure.jpg" alt="Fully Secure and compliant" />
<img src="img/investor-count.jpg" alt="5,00,000 investors trust us" />
  • Если используемое изображение является простым текстом и может быть представлено с помощью текста на веб-странице, стилизованного с помощью CSS в соответствии с изображением, этот подход гораздо более выгоден, поскольку с текстом проще работать, и он не становится пиксельным при различных масштабах пользователя. уровни.

Сложные изображения

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

  • Этот тип изображения требует двух отдельных описаний: одно для самого изображения и более подробное описание, объясняющее данные и информацию, отображаемые изображением.
  • Основное описание изображения находится внутри атрибута alt изображения.
  • Элементы HTML5 <figure> и <figcaption> можно использовать для группировки изображений и семантических ссылок. Добавление role="group" к рисунку поддерживает обратную совместимость с веб-браузерами, которые не поддерживают родную семантику элемента <figure>.
  • Атрибут WAI-ARIA aria-describedby можно использовать для ссылки на описание изображения, которое предоставляется в любом месте на той же веб-странице, аналогично подходу longdesc. Значением атрибута является id элемента, который содержит подробное описание.

Группа изображений

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

<div>
How was the audio and video?
    <img src="img/star-regular.svg" alt="Rating: 0 out of 5 stars" />
    <img src="img/star-regular.svg" alt="" />
    <img src="img/star-regular.svg" alt="" />
    <img src="img/star-regular.svg" alt="" />
    <img src="img/star-regular.svg" alt="" />
</div>

Карты изображений

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

Выбор замещающего текста для вашего изображения

Категоризация изображения как декоративного или информационного изображения является сложной задачей. Обычно в этом звонке помогает причина, по которой изображение добавляется на веб-страницу, и улучшает ли оно понимание пользователем содержимого веб-страницы. Краткий обзор того, как решить, к какой категории относится конкретное изображение, см. в альтернативном дереве решений.

Заключительные предложения:

  • Альтернативный текст должен быть максимум коротким предложением, если описание длиннее этого, лучше использовать один из подходов длинное описание для предоставления информации об изображении.
  • Всегда запускайте замещающий текст изображения через программу чтения с экрана, чтобы проверить, все ли работает должным образом.
  • При добавлении альтернативного текста следует внимательно следить за пунктуацией, так как это позволит пользователям лучше понимать информацию в программах чтения с экрана.
  • Избегайте использования таких слов, как «изображение», «значок» или «изображение» в альтернативном тексте, поскольку эти слова предоставляют пользователю избыточную информацию, поскольку программа чтения с экрана уже сообщает пользователю, что он находится на элементе изображения, а затем считывает альтернативное значение. . Всегда лучше иметь контекст изображения, чем указывать «изображение» в альтернативном тексте.
  • При использовании SVG в теге изображения лучше использовать атрибут aria-labelledby для маркировки SVG.
    <svg aria-labelledby=”title1">
    <title id=”title1">Settings</title> [other svg code] </svg>
  • На изображения логотипов с текстом не распространяются некоторые требования доступности. Например, нет требований к минимальной контрастности.

Ссылки: