Принципы доступности
Об этом переводе
Этот волонтерский перевод может быть неточным и отличаться от английского оригинала.
Английская версия обновлена с момента перевода: Журнал изменений.
Английская версия обновлена: 2024-07-15. Перевод обновлен: 2023-12-06.
Переводчик: Daniel Novichkov.
WAI благодарит переводчиков и приглашает к участию волонтеров переводы .
Стандарты веб-доступности
Веб-доступность состоит из нескольких компонентов, которые взаимодействуют друг с другом, включая:
- Веб контент - относится к любой части веб-сайта, включая текст, изображения, формы, мультимедиа, а также любой код разметки, скрипты, приложения и тому подобное.
- Пользовательские агенты - программное обеспечение, которое используют пользователи для доступа к веб-контенту, включая графические десктопные браузеры, голосовые браузеры, браузеры мобильных телефонов, проигрыватели мультимедиа, плагины и некоторые вспомогательные технологии (на английском).
- Инструменты разработки - программное обеспечение или сервисы, которые используются для создания веб-контента, включая редакторы кода, инструменты преобразования документов, системы управления контентом, блоги, сценарии баз данных и другие инструменты.
Подробнее о стандартах веб-доступности
Эти компоненты взаимосвязаны и поддерживают друг друга. Например, веб-контент должен включать текстовые версии изображений. Эта информация должна обрабатываться веб-браузерами и затем передаваться вспомогательным технологиям, например программам экранного чтения. Для создания текстовых версий, авторам нужны инструменты разработки, которые их поддерживают. Более подробная информация представлена в Основные компоненты веб-доступности (на английском).
Стандарты играют жизненно важную роль в определении требований доступности для каждого из этих компонентов. Некоторые требования доступности легко выполнить, но понимание основ того, как люди с ограниченными возможностями используют Интернет, помогает реализовать их более эффективно и действенно. Некоторые аспекты доступности требуют дополнительных технических навыков или глубоких знаний о том, как люди используют Интернет. В любом случае вовлечение пользователей на раннем этапе и во всех ваших веб-проектах (на английском) сделает вашу работу лучше и проще. Инициатива W3C по веб-доступности (WAI) предоставляет набор руководящих принципов, которые признаны во всем мире в качестве стандарта веб-доступности. Они включают:
- Web Content Accessibility Guidelines (WCAG) (на английском)
- User Agent Accessibility Guidelines (UAAG) (на английском)
- Authoring Tool Accessibility Guidelines (ATAG) (на английском)
Также имеется спецификация WAI для Accessible Rich Internet Applications (WAI-ARIA) (на английском), которые описывают динамический контент и расширенные элементы управления пользовательским интерфейсом, разработанные с помощью Ajax, JavaScript и похожими веб-технологиями. и затем передаваться вспомогательным технологиям, например программам экранного чтения.
Воспринимаемость информации и пользовательского интерфейса
Текстовые версии для нетекстового контента
Текстовые версии являются эквивалентами нетекстового контента. Примеры:
- Короткие эквиваленты изображений, включая значки, кнопки и графику
- Описание данных, представленных на графиках, диаграммах и иллюстрациях
- Краткие описания нетекстового контента, такого как аудио и видео файлы
- Ярлыки для элементов управления, ввода и других компонентов пользовательского интерфейса
Текстовые версии описывают цель изображения или функции для обеспечения эквивалентного пользовательского взаимодействия. Например, подходящей текстовой альтернативой для кнопки поиска будет “поиск”, а не “увеличительная линза”.
Текстовые версии могут быть представлены различными способами. Например, они могут зачитываться вслух пользователям, которые не могут видеть экран или испытывают трудности при чтении, при значительном увеличении размеров текста или отображении его на устройствах Брайля. Текстовые версии служат метками элементов управления и функций, помогая управлять контентом с клавиатуры или голосом (голосовой ввод). Они служат метками аудио, видео и других файлов, а также приложений, встроенных в веб-сайты.
Требования доступности текстовых версий (ссылки на техническую спецификацию)
WCAG
UAAG
ATAG
- Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines
- Guideline A.2.1: (For the authoring tool user interface) Make alternative content available to authors
- Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined
- Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents
- Part B. Support the production of accessible content
Истории про текстовые версии
- Alex, reporter with repetitive stress injury (на английском)
- Martine, online student who is hard of hearing (на английском)
- Ilya, senior staff member who is blind (на английском)
- Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia (на английском)
- Yun, retiree with low vision, hand tremor, and mild short-term memory loss (на английском)
- Kaseem, teenager who is deaf and blind (на английском)
Субтитры и другие альтернативы для мультимедиа
Альтернативные версии нужны людям, которые не могут слышать аудио или видеть видео контент. Например:
- Текстовые расшифровки и субтитры для аудиоконтента, например, для записей радиоинтервью
- Аудиоописание, которое описывает важные визуальные детали видеоконтента
- Перевод аудиоконтента и звуков на жестовый язык для передачи звукового сопровождения
Хорошо написанные расшифровки текста, содержащие корректную последовательность любой звуковой или визуальной информации, обеспечивают базовый уровень доступности и облегчают создание субтитров и аудиоописаний.
Требования доступности к мультимедиа (ссылки на техническую спецификацию)
WCAG
UAAG
ATAG
- Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines
- Guideline A.2.1: (For the authoring tool user interface) Make alternative content available to authors
- Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents
- Part B. Support the production of accessible content
Истории про мультимедиа
Контент может быть представлен разными способами
Пользователи могут менять способы представления контента, для этого необходимо чтобы:
- Заголовки, списки, таблицы, поля ввода и структура контента были корректно размечены
- Последовательность информации или инструкций не зависела от способа представления
- Браузеры и вспомогательные технологии давали возможность настройки изменения представления.
Выполнение этого требования позволит корректно зачитывать контент вслух, увеличивать или адаптировать контент иным способом в соответствии с потребностями и предпочтениями разных людей. Например, контент может быть представлен с использованием пользовательских цветовых комбинаций, размера текста или других стилей для облегчения чтения. Это требование также облегчает другие формы изменения представления контента, включая автоматическое создание контуров страниц и создание резюме страниц, для упрощения ознакомления с контентом и фокусировкой на его конкретных частях.
Требования доступности к адаптивности (ссылки на техническую спецификацию)
WCAG
UAAG
- Guideline 1.4 - Text configuration
- Guideline 1.5 - Volume configuration
- Guideline 1.6 - Synthesized speech configuration
- Guideline 1.7 - User style sheet configuration
- Guideline 1.9 - Alternative views
- Guideline 1.10 - Element information
ATAG
- Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines
- Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined
- Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents
- Part B. Support the production of accessible content
Истории про адаптивность
- Lee, online shopper with color blindness (на английском)
- Alex, reporter with repetitive stress injury (на английском)
- Ilya, senior staff member who is blind (на английском)
- Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia (на английском)
- Yun, retiree with low vision, hand tremor, and mild short-term memory loss (на английском)
- Luis, supermarket assistant with Down syndrome (на английском)
- Kaseem, teenager who is deaf and blind (на английском)
Контент легче видеть и слышать
Контрастный контент легче видеть и слышать. В таком контенте:
- Цвет не используется как единственный способ передачи информации или идентификации контента
- Комбинации цветов переднего плана и фона по умолчанию обеспечивают достаточный контраст
- Никакая информация не теряется, если пользователь увеличивает размер текста до 400% или меняет межстрочный интервал
- Текст адаптируется для корректного отображения на уменьшенных экранах («области просмотра») и при его увеличении
- При изображении текста в графическом виде размер можно изменить, заменить его текстовой версией или по возможности не использовать изображение текста
- Пользователи могут поставить на паузу, выключить или регулировать громкость аудио, воспроизводимого на веб-сайте
- Фоновый звук тихий или его можно отключить, чтобы избежать помех или отвлечения пользователя
Выполнение этого требования помогает отделить передний план от фона, чтобы выделить важную информацию. Это поможет как использующим, так и не использующим вспомогательные технологии пользователям избегать помех аудио или визуального контента, проигрываемого в фоновом режиме. Например, многие пользователи с дальтонизмом не используют какие-либо специальные инструменты, полагаясь на дизайн с достаточным цветовым контрастом между текстом и окружающим его фоном. Автоматически воспроизводимый аудиоконтент может мешать пользователям функции речевого воспроизведения текста или вспомогательных устройств прослушивания (ALD) (на английском).
Требования доступности к контрастности (ссылки на техническую спецификацию)
WCAG
UAAG
- Guideline 1.3 - Highlighting
- Guideline 1.4 - Text configuration
- Guideline 1.5 - Volume configuration
- Guideline 1.6 - Synthesized speech configuration
- Guideline 1.7 - User style sheet configuration
- Guideline 1.8 - Orientation in viewports
- Guideline 1.9 - Alternative views
- Guideline 1.10 - Element information
ATAG
Истории про контрастность
- Lee, online shopper with color blindness (на английском)
- Martine, online student who is hard of hearing (на английском)
- Ilya, senior staff member who is blind (на английском)
- Yun, retiree with low vision, hand tremor, and mild short-term memory loss (на английском)
- Kaseem, teenager who is deaf and blind (на английском)
Управляемость пользовательского интерфейса и навигации
Вся функциональность доступна с клавиатуры
Многие люди используют клавиатуру, а не мышь для взаимодействия с интернетом. Для этого им необходим доступ с клавиатуры ко всем функциям, включая элементы управления форм, ввода и других компонентов пользовательского интерфейса. Доступность с клавиатуры подразумевает:
- Все функции, доступные с помощью мыши, равно доступны и с клавиатуры
- Фокус клавиатуры не блокируется какой-либо частью контента
- Веб-браузеры, инструменты разработки и другие инструменты предоставляют поддержку управления с клавиатуры.
Выполнение этого требования помогает пользователям клавиатуры, включая людей, использующих альтернативные клавиатуры, например, эргономические, экранные клавиатуры или переключающие устройства. Это также поможет пользователям функции распознавания голоса (голосового ввода) управлять веб-сайтами и наговаривать текст через интерфейс клавиатуры.
Требования к доступности управления с клавиатуры (ссылки на технические характеристики)
Истории про доступность управления с клавиатуры
Пользователям даётся достаточно времени, для ознакомления и использования контента
Некоторым людям нужно больше времени, чтобы ознакомиться с контентом и использовать его. Например, кому-то требуется больше времени для набора текста, понимания инструкций, использования элементов управления или выполнения иных своих задач на веб-сайте.
Примеры предоставления достаточного времени подразумевают возможности:
- Остановить, продлить или изменить временные ограничения, за исключением случаев, когда такое ограничение необходимо
- Приостановить, остановить или скрыть перемещение, мерцание или прокрутку содержимого
- Отложить или подавить прерывания за исключением случаев, когда они необходимы
- Повторно войти по истечении сеанса без потери ранее введённых данных
Требования к доступности, связанные с временными ограничениями (ссылки на техническую спецификацию)
WCAG
UAAG
ATAG
Истории про ограничения времени
- Alex, reporter with repetitive stress injury (на английском)
- Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia (на английском)
- Yun, retiree with low vision, hand tremor, and mild short-term memory loss (на английском)
- Luis, supermarket assistant with Down syndrome (на английском)
- Kaseem, teenager who is deaf and blind (на английском)
Контент не вызывает судорог и иных физических реакций
Контент, мерцающий с определённой частотой или в определённом ритме, может вызвать фоточувствительные реакции, включая судороги. В идеале следует избегать мерцания контента или использовать его только так, чтобы не создавать таких рисков. Анимация и движущийся контент могут также вызывать дискомфорт и физические реакции.
Примеры как избегать судорог и физических реакций:
- Не используйте контент, который мерцает с определённой частотой и в определённом ритме
- Предупреждайте пользователей перед отображением мерцающего контента и предлагайте альтернативы
- Предоставьте возможность отключения анимации, если она не является необходимой
Требования доступности, относящиеся к приступам (ссылки на техническую спецификацию)
WCAG
UAAG
ATAG
Пользователи могут легко перемещаться, находить нужный контент и определять, где они находятся
Хорошо организованный контент помогает пользователям ориентироваться и эффективно перемещаться по нему. Такой контент подразумевает:
- На страницах есть чёткие заголовки, и они организованы с использованием описательных заголовков разделов
- Пользователям доступно несколько способов найти нужные страницы среди других веб-страниц
- Пользователям доступна информация об их текущем местоположении в наборе связанных страниц
- Пользователям доступна возможность обойти блоки повторяющегося на нескольких страницах контента
- Фокус клавиатуры очевиден, порядок его перемещения понятен и последователен
- Цель ссылки очевидна, в идеале, даже если она просматривается пользователем в отрыве от контекста
Выполнение этого требования помогает пользователям перемещаться по веб-страницам различными способами в зависимости от их потребностей и предпочтений. Например, одни пользователи для поиска нужных им веб-страниц перемещаются по структуре элементов навигации, таких как строки меню, тогда как другие используют функцию поиска на веб-сайте. Одни пользователи могут видеть контент, другие могут его слышать, или слышать и видеть одновременно. Некоторые пользователи могут работать с контентом при помощи только мыши или только клавиатуры, другие могут использовать и то, и другое.
Требования доступности к навигации (ссылки на техническую спецификацию)
WCAG
UAAG
- Guideline 2.2 - Sequential navigation
- Guideline 2.3 - Direct navigation and activation
- Guideline 2.4 - Text search
- Guideline 2.5 - Structural navigation
- Guideline 2.7 - Graphical controls
ATAG
- Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines
- Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined
- Guideline A.3.4: (For the authoring tool user interface) Enhance navigation and editing via content structure
- Guideline A.3.5: (For the authoring tool user interface) Provide text search of the content
- Part B. Support the production of accessible content
Истории про доступность навигации
- Alex, reporter with repetitive stress injury (на английском)
- Ilya, senior staff member who is blind (на английском)
- Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia (на английском)
- Yun, retiree with low vision, hand tremor, and mild short-term memory loss (на английском)
- Luis, supermarket assistant with Down syndrome (на английском)
- Kaseem, teenager who is deaf and blind (на английском)
Пользователи могут использовать различные способы ввода кроме клавиатуры
Способы ввода отличные от клавиатуры, такие как активация касанием, распознавание голоса (речевой ввод) и жесты, упрощают работу с контентом для многих людей. Не все могут использовать каждый из этих способов в равной степени хорошо, а для некоторых они вообще недоступны. Учёт особенных требований к дизайну облегчит использование этих способов ввода. Это включает в себя:
- Жесты, требующие высокой ловкости или точности движения, могут быть заменены на менее точные
- Компоненты разработаны так, чтобы можно было избегать их случайной активации, например, доступна функция отмены последнего действия
- Ярлыки, отображаемые пользователям, соответствуют названиям объектов в коде для поддержки активации голосом
- Функциональность, активируемая движением, может быть активирована и компонентами пользовательского интерфейса
- Кнопки, ссылки и другие активные компоненты имеют достаточный размер для их активации касанием. Выполнение этого требования упрощает использование контента для многих людей с различными особенностями, использующих разные устройства. Это и поддержка контента, используемого на мобильных телефонах, планшетных компьютерах и терминалах самообслуживания, таких как билетные автоматы.
Требования доступности способов ввода (ссылки на техническую спецификацию)
Истории про доступность ввода
Понятные информация и пользовательский интерфейс
Текст легко читать и понимать
Авторы контента должны позаботиться о том, чтобы их текст было легко читать и понимать максимально широкой аудитории, в том числе, когда он зачитывается вслух с помощью преобразования текста в речь. Это включает в себя:
- Определение основного языка веб-страницы, например арабского, голландского или корейского
- Определение языка параграфов, фраз или других частей веб-страницы
- Предоставление определений для любых необычных слов, фраз, идиом и сокращений
- Использование самого ясного и простого языка или создание упрощённых версий текста
Выполнение этого требования поможет программному обеспечению, включая вспомогательные технологии, правильно обработать текстовый контент. Это требование поможет программному обеспечению зачитывать контент вслух, создавать резюме страниц и давать определения для редко употребляемых слов, таких как технический жаргон. Это также поможет людям, которым трудно понимать сложные предложения, фразы и слова. В частности, это поможет людям с различными типами когнитивных нарушений.
Требования доступности лёгкости чтения (ссылки на техническую спецификацию)
Истории про лёгкость прочтения
- Martine, online student who is hard of hearing (на английском)
- Ilya, senior staff member who is blind (на английском)
- Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia (на английском)
- Yun, retiree with low vision, hand tremor, and mild short-term memory loss (на английском)
- Luis, supermarket assistant with Down syndrome (на английском)
Контент загружается и работает предсказуемым образом
Пользователи ожидают определённого поведения пользовательских интерфейсов; нестандартный вид или поведение интерфейса их отвлекает или даже дезориентирует. Примеры повышения предсказуемости контента:
- Механизмы навигации, повторяющиеся на нескольких страницах, всегда расположены на одном и том же месте
- Компоненты пользовательского интерфейса, повторяющиеся на веб-страницах, всегда имеют одинаковые ярлыки.
- Важные изменения на веб-странице происходят только с согласия пользователя
Выполнение этого требования помогает людям быстро изучить функциональные возможности и механизмы навигации, представленные на веб-сайте, и управлять ими в соответствии со своими конкретными потребностями и предпочтениями. Например, некоторые пользователи назначают свои сочетания клавиш для функций, которыми они часто пользуются, чтобы упростить навигацию с помощью клавиатуры. Другие запоминают шаги для перехода на определённые страницы или завершения процессов на веб-сайте. И те и другие рассчитывают на предсказуемое и последовательное поведение контента.
Требования доступности к предсказуемости (ссылки на техническую спецификацию)
WCAG
UAAG
ATAG
- Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines
- Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined
- Guideline A.4.2: (For the authoring tool user interface) Document the user interface, including all accessibility features
- Part B. Support the production of accessible content
Истории про предсказуемость
- Alex, reporter with repetitive stress injury (на английском)
- Ilya, senior staff member who is blind (на английском)
- Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia (на английском)
- Yun, retiree with low vision, hand tremor, and mild short-term memory loss (на английском)
- Luis, supermarket assistant with Down syndrome (на английском)
- Kaseem, teenager who is deaf and blind (на английском)
Пользовательские ошибки предупреждаются и исправляются
Формы и другие элементы пользовательского взаимодействия могут сбивать с толку или затруднять работу многих людей, и в результате чего они с большей вероятностью могут совершать ошибки. Примерами того, как помочь пользователям избегать и исправлять ошибки, могут служить:
- Информативные инструкции, сообщения об ошибках и предложения по исправлению
- Контекстно-зависимая справка для сложных функций и взаимодействия
- Возможность просмотреть, исправить или отменить введённую информацию при необходимости
Выполнение этого требования поможет людям, которые не видят и не слышат контент, а потому могут не распознавать неявные связи, последовательности и другие указания. Это также поможет людям, которые не понимают функциональность, дезориентированы или сбиты с толку, забывают или делают ошибки по любой другой причине при использовании форм и иных элементов взаимодействия.
Требования доступности помощи при вводе (ссылки на техническую спецификацию)
WCAG
UAAG
ATAG
- Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines
- Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined
- Guideline A.4.1: (For the authoring tool user interface) Help authors avoid and correct mistakes
- Part B. Support the production of accessible content
Истории про доступность помощи при вводе
- Lee, online shopper with color blindness (на английском)
- Alex, reporter with repetitive stress injury (на английском)
- Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia (на английском)
- Yun, retiree with low vision, hand tremor, and mild short-term memory loss (на английском)
- Luis, supermarket assistant with Down syndrome (на английском)
Надёжный контент и надёжная интерпретация
Контент совместим с имеющимися и будущими пользовательскими инструментами
Надёжный контент совместим с различными браузерами, вспомогательными технологиями и другими пользовательскими агентами. Примеры, как можно этого достичь, включают:
- Обеспечение надёжной интерпретации разметки, например, через проверку её валидности
- Обозначение названия, роли и значения для нестандартных компонентов пользовательского интерфейса
Выполнение этого требования помогает улучшить совместимость с существующими и будущими пользовательскими агентами, включая вспомогательные технологии. В частности, оно позволяет вспомогательным технологиям корректно обрабатывать контент и представлять или управлять им различными способами. Сюда входят нестандартные (скриптовые) кнопки, поля ввода и другие элементы управления.
Требования доступности к совместимости (ссылки на техническую спецификацию)
Истории про совместимость
- Lee, online shopper with color blindness (на английском)
- Alex, reporter with repetitive stress injury (на английском)
- Ilya, senior staff member who is blind (на английском)
- Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia (на английском)
- Luis, supermarket assistant with Down syndrome (на английском)
- Kaseem, teenager who is deaf and blind (на английском)