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

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

Цвет

  • Контраст цвета ДОЛЖЕН соответствовать требованиям уровня 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 с полезными рекомендациями по размеру области нажатия для сенсорного объекта).

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