Контрольный список по мобильной доступности

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

Цвет

  • Контраст цвета ДОЛЖЕН соответствовать требованиям уровня AA WCAG 2.0:

    • Коэффициент контрастности 4.5:1 для обычного текста (менее 18 пунктов или 14 пунктов для жирного текста).
    • Коэффициент контрастности 3:1 для крупного текста (минимум 18 пунктов или 14 пунктов для жирного текста).

  • Информация, передаваемая через цвет, ДОЛЖНА быть доступна и другими способами (подчёркнутый текст для ссылок и т. д.).

Видимость

  • Техники сокрытия содержимого, такие как нулевая непрозрачность, порядок z-индекса и размещение вне экрана, НЕ ДОЛЖНЫ использоваться исключительно для управления видимостью.

  • Всё, кроме видимого в данный момент экрана, ДОЛЖНО быть действительно невидимым:

    • ИСПОЛЬЗУЙТЕ hidden атрибут или свойство visibility или изменяйте тип отображения.
    • Без абсолютной необходимости, НЕ ИСПОЛЬЗУЙТЕ aria-hidden атрибут.

Фокус

  • Все интерактивные элементы ДОЛЖНЫ иметь состояние фокуса:

    • Стандартные элементы, такие как ссылки, кнопки и поля формы фокусируемые по умолчанию.
    • Нестандартные элементы ДОЛЖНЫ иметь соответствующую ARIA-роль, назначенную им. Например, кнопка, ссылка или чекбокс.

  • Фокус должен обрабатываться в логическом порядке и последовательным образом.

Текстовые эквиваленты

  • Текстовый эквивалент ДОЛЖЕН быть предусмотрен для каждого не строго презентационного нетекстового элемента в приложении.

    • Используйте alt и title там, где это уместно (см. статью Steve Faulkner's про использование HTML атрибута <title>).
    • Если вышеуказанные атрибуты неприменимы, используйте соответствующие ARIA-свойства, такие как aria-label, aria-labelledby, или aria-describedby.

  • Необходимо ИЗБЕГАТЬ текста внутри изображений.

  • Все элементы формы ДОЛЖНЫ иметь метки (<label> элементы) в интересах пользователей программы чтения с экрана.

Обработка состояния

  • Стандартные элементы, такие как радиокнопки и чекбоксы обрабатываются операционной системой. Однако, для других кастомных элементов изменения состояния должны быть предоставлены через ARIA-состояния, такие как aria-checked, aria-disabled, aria-selected, aria-expanded, and aria-pressed.

Общие рекомендации

  • ДОЛЖНО быть указано название приложения (<title> элемент).

  • Заголовки НЕ ДОЛЖНЫ нарушать иерархическую структуру.

    html
    <h1>Заголовок верхнего уровня</h1>
<h2>Вторичный заголовок</h2>
<h2>Другой вторичный заголовок</h2>
<h3>Заголовок низкого уровня</h3>

  • ARIA Landmark Roles СЛЕДУЕТ использовать для описания приложения или структуры документа, такие как banner, complementary, contentinfo, main, navigation, search.

  • Обработчики сенсорных событий ДОЛЖНЫ запускаться только при соответствующих событиях.

  • Области нажатия ДОЛЖНЫ быть достаточно большими, чтобы пользователь мог взаимодействовать с ними (см. статью BBC Mobile Accessibility Guidelines с полезными рекомендациями по размеру области нажатия для сенсорного объекта).

Примечание: > Исходную версию этого документа написал Юра Зеневич.