Фоновые изображения — Доступность продуктов

Руководство по доступности для мобильных устройств — Изображений

Фоновые изображения, передающие информацию или значение, должны иметь доступную альтернативу.

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

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

iOS

iOS не различает фоновые и передние изображения. Все изображения, добавленные в представление, обычно добавляются как представление изображения ( UIImageView ). Если результирующее изображение является декоративным, необходимо установить для свойства isAccessibilityElement значение false , чтобы VoiceOver не мог его идентифицировать. При необходимости укажите «пустой» accessibilityLabel . Если результирующее изображение несет информацию, вы должны установить это свойство равным 9.0016 true , а также предоставить текстовый эквивалент через атрибут accessibilityLabel .

Пример iOS (Objective-C)

Значимое изображение: 
 [myFunctionalImage:setIsAccessibilityElement:YES];
[myFunctionalImage.setAccessibilityLabel:@"[альтернативный текст]";
Декоративное изображение: 
 [myFunctionalImage:setIsAccessibilityElement:NO];
[myFunctionalImage.setAccessibilityLabel:@""];

Android

Android не различает фоновые и передние изображения. Все изображения, добавленные в вид, обычно добавляются как ImageView и должен быть снабжен атрибутом android:focusable . Для этого атрибута должно быть установлено значение true для осмысленных изображений и false для нефункциональных декоративных изображений. Атрибут android:contentDescription также должен быть предоставлен для осмысленных изображений, чтобы предоставить альтернативный текст для изображения. Он также должен предоставляться декоративным изображениям и иметь значение @null для поддержки более старых версий Android.

Пример Android Pass

Значимое изображение:
Декоративное изображение:

HTML

Не существует специального метода назначения альтернативного текста фоновым изображениям на основе CSS. Поэтому либо используйте встроенное изображение на основе HTML (используя элемент img ), либо подходящую технику замены изображения в CSS и JavaScript для предоставления текстовой альтернативы. См. Assets.cms.gov — высококонтрастный режим для примера реализации.

Пример передачи HTML

Собственный (предпочтительный) подход:

 Домашняя страница

Тестирование

Процедуры

  1. Активируйте программу чтения с экрана.
  2. Определите все изображения, содержащие информацию.
  3. Определите, какие изображения являются фоновыми изображениями.
  4. Убедитесь, что программа чтения с экрана объявляет альтернативный текст.
  5. В некоторых случаях может потребоваться проверка кода или тестирование на немобильном устройстве.

Результат

Следующая проверка верна:

  • Изображение может быть сфокусировано с помощью вспомогательных технологий, и объявляется важная информация.

изображений | Контрольный список веб-доступности

Методы доступности для изображений
Тема Техника WCAG AA Требование
Информативные изображения и активные изображения (например, ссылки, кнопки или элементы управления)

Альтернативный текст: Изображение ДОЛЖНО иметь альтернативный текст. Обратитесь к методикам для различных типов изображений:

  • изображений с использованием
  • активных изображений
  • формы входных изображений
  • SVG с использованием
  • SVG с использованием
  • Холст HTML5
  • иконочные шрифты

Методология испытаний 1. 1.1.b

 Требуется
WCAG 1.1.1

Осмысленное описание: Альтернативный текст ДОЛЖЕН быть осмысленным (точно передавая цель изображения и замысел автора таким образом, чтобы это было полезно для тех, кто не может видеть изображение).

  • Примечание 1: Ссылки на изображения ДОЛЖНЫ описывать назначение ссылки.
  • Примечание 2: Ссылки кнопки/элемента управления СЛЕДУЕТ описывать назначение и/или результирующее действие кнопки или элемента управления.

Методология испытаний 1.1.1.b

 Требуется
WCAG 1.1.1
Краткость: Длина замещающего текста для информативных изображений СЛЕДУЕТ быть краткой (не более 250 символов). лучшая практика
Избегайте повторения того, что элемент является изображением: Альтернативный текст НЕ ДОЛЖЕН включать слова, которые идентифицируют элемент как графику или изображение (например, избегайте таких фраз, как «графика» или «изображение» и т.
д.), потому что программы чтения с экрана уже укажите роль (например, сказав «графический», а затем прочитав альтернативный текст).		 лучшая практика
Несущественные изображения (исключительно декоративные или избыточные, а не активные) Необязательные изображения: изображениям, которые не передают содержание, являются декоративными или избыточными по отношению к содержимому, которое уже передано в тексте, СЛЕДУЕТ указывать нулевой (пустой) альтернативный текст (
alt="" ), ARIA role="presentation" или реализованы как фоны CSS.		 лучшая практика
Сложные образы

Сложные изображения: Сложные изображения ДОЛЖНЫ быть кратко описаны с использованием текста alt И ДОЛЖНЫ иметь более полное расширенное описание.

  • Примечание: Нет ничего «неправильного» в предоставлении описательного альтернативного текста в таких случаях, но крайне не рекомендуется, если изображение действительно не является необходимым.

Методология тестирования 1.1.1.c

 Требуется
WCAG 1.1.1
Фоновые изображения Информативные фоновые изображения: если фоновое изображение передает информацию, ДОЛЖЕН быть предоставлен альтернативный текст (например, с помощью обычного видимого текста, путем добавления role="image" и aria-label
или другими способами).

Методология испытаний 1.1.1.b

 Требуется
WCAG 1.1.1
Активные фоновые изображения: если фоновое изображение является единственным «содержимым» активного элемента (например, ссылки, кнопки или элемента управления), активный элемент ДОЛЖЕН иметь доступное имя (например, через aria-label или подобное ).

Методология тестирования 1.1.1.а

 Требуется
WCAG 1. 1.1
Цветовой контраст мелкого текста: Мелкий текст (менее 18 пунктов обычным шрифтом или 14 пунктов полужирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности не менее 4,5 к 1 относительно фона.

Методика испытаний 1.4.3.а

 Требуется
WCAG 1.4.3
Цветовой контраст крупного текста: Крупный текст (на уровне 18 пунктов или более 14 пунктов жирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности по крайней мере 3 к 1 относительно фона.

Методология тестирования 1.4.3.b

 Требуется
WCAG 1.4.3
Необязательные фоновые изображения: Альтернативный текст НЕ ДОЛЖЕН предоставляться для необязательных фоновых изображений. лучшая практика
Изображения текста Нет изображений текста: изображение НЕ ДОЛЖНО включать информативный текст, если эквивалентное визуальное представление текста может быть воспроизведено с использованием реального текста (за исключением случаев, когда текст является важным — например, логотип — или шрифт, размер, цвет и фон не являются обязательными). настраиваемый.).

Методология тестирования 1.4.5.a

 Требуется
WCAG 1.4.5
Цветовой контраст мелкого текста: Мелкий текст (менее 18 пунктов обычным шрифтом или 14 пунктов полужирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности не менее 4,5 к 1 относительно фона.

Методология тестирования 1.4.3.а

 Требуется
WCAG 1.4.3
Цветовой контраст крупного текста: Крупный текст (на уровне 18 пунктов или более 14 пунктов жирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности по крайней мере 3 к 1 относительно фона.

Методика испытаний 1.4.3.b

 Требуется
WCAG 1.4.3
Анимированные изображения
См. требования к анимации, движению и синхронизированному содержимому.		 Обязательно
Несколько
Изображение CAPTCHA Альтернативный текст: Элементы изображения CAPTCHA ДОЛЖНЫ иметь альтернативный текст, описывающий назначение изображения.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *