Доступность и инклюзивный дизайн - схемы
Узнайте больше о Хорошо архитектурированной справедливости → Доступность посредством Lightning и Experience Cloud
Шаблоны
| Где искать | Как хорошо выглядит |
|---|---|
| Платформа | Стандарты проектирования | ✅ WCAG 2.2 Level AA - это минимальная панель доступности для настраиваемой работы (Experience Cloud, LWC, настраиваемые темы), проверенная группой по созданию |
| Платформа | Стандарты проектирования | ✅ Принцип восприятия: Текстовые альтернативы существуют для изображений и значков; подписи сопровождают видео |
| Платформа | Стандарты проектирования | ✅ Принцип действия: Вся функциональность работает только посредством клавиатуры, не требуя мыши или касания — голосовое управление и вспомогательные технологии коммутатора зависят от одной модели клавиатуры/фокуса |
| Platform | LWC | ✅ Стандартные веб-компоненты Lightning используются по проекту, обеспечивая базовую доступность автоматически |
| Platform | LWC | ✅ Настраиваемые компоненты реализуют явную доступность, проверенную посредством тестирования с помощью программ для чтения экрана |
| Платформа | Планы тестирования | ✅ Тестирование доступности включено во все этапы тестирования (не ситуативное или дополнительное) |
Антишаблоны
| Где искать | Как плохо выглядит |
|---|---|
| Платформа | Стандарты проектирования | ⚠️ WCAG 2.2 Level AA рассматривается как дополнительное или «хорошо иметь», а не минимальное требование |
| Платформа | Стандарты проектирования | ⚠️ Изображения и значки лишены текстовых альтернатив; видео не содержат субтитров |
| Платформа | Стандарты проектирования | ⚠️ Функциональность требует взаимодействия мыши или касания без альтернативы клавиатуры |
| Platform | LWC | ⚠️ Настраиваемые компоненты создаются без внедрения или проверки доступности |
| Platform | LWC | ⚠️ Настраиваемые компоненты ввода используют элементы div и стиль CSS без смыслового значения или доступности клавиатуры |
| Платформа | Планы тестирования | ⚠️ Тестирование доступности является разовым, дополнительным или выполняется только перед запуском (не на протяжении всей разработки) |
Шаблоны
| Где искать | Как хорошо выглядит |
|---|---|
| Platform | LWC | ✅ Семантические HTML-элементы (верхний колонтитул, навигация, основной, сторонний, нижний колонтитул, статья, раздел) используются в настраиваемых веб-компонентах Lightning |
| Platform | LWC | ✅ Ориентиры, роли и свойства ARIA применяются там, где только семантический HTML не может передать поведение интерфейса |
| Platform | LWC | ✅ Динамические обновления содержимого используют области арии в реальном времени, объявляющие об изменениях пользователям программы чтения экрана |
| Platform | LWC | ✅ Настраиваемые интерактивные компоненты имеют четкие определения ролей, соответствующие их алгоритму |
| Platform | LWC | ✅ Метки формы явно связаны со всеми вводными данными формы посредством соответствующих элементов метки или атрибутов с метками арии |
| Platform | LWC | ✅ Компоненты ввода Lightning настроены с обязательными атрибутами меток, предоставляющими встроенное связывание меток |
| Платформа | Планы тестирования | ✅ Тестирование проводится с помощью фактических экранных дикторов: JAWS и NVDA в Windows, VoiceOver в macOS и iOS, TalkBack в Android |
| Платформа | Планы тестирования | ✅ Тестирование вручную с помощью реальных вспомогательных технологий выполняется людьми, понимающими, как пользователи экранного диктора перемещаются |
| Платформа | Стандарты проектирования | ✅ Текст структурного нуля никогда не используется в качестве единственной метки, поскольку структурные нули исчезают в фокусе и предоставляют недостаточный контекст для программ чтения экрана |
Антишаблоны
| Где искать | Как плохо выглядит |
|---|---|
| Platform | LWC | ⚠️ Полоски разметки с высокой степенью дивления, то есть из иерархии содержимого, вынуждающие пользователей экранного диктора переходить линейно |
| Platform | LWC | ⚠️ ARIA не используется там, где семантический HTML сам по себе не может передать поведение интерфейса |
| Platform | LWC | ⚠️ Динамические обновления содержимого не используют арии-живые области; пользователи экранного диктора упускают важные изменения |
| Platform | LWC | ⚠️ Настраиваемые интерактивные компоненты не содержат четких определений ролей; программы для чтения экрана объявляют их неправильно |
| Platform | LWC | ⚠️ Вводные данные формы не содержат явного связывания меток; текст структурного нуля используется в качестве единственной метки |
| Платформа | Планы тестирования | ⚠️ Используются исключительно автоматизированные инструменты доступности; тестирование экранного диктора не выполняется |
| Платформа | Планы тестирования | ⚠️ Тестирование проводится зрячими пользователями, не знакомыми с тем, как пользователи экранного диктора на самом деле перемещаются |
Шаблоны
| Где искать | Как хорошо выглядит |
|---|---|
| Платформа | Стандарты проектирования | ✅ Полная функциональность доступна посредством клавиатуры, не требуя взаимодействия мыши или касания в любой момент путешествия пользователя |
| Platform | LWC | ✅ Порядок логической фокусировки соответствует визуальному макету и потоку взаимодействия |
| Platform | LWC | ✅ При загрузке динамического содержимого или открытии модалов фокус управляется программным способом, направляя пользователей клавиатуры к новому содержимому |
| Platform | LWC | ✅ Компоненты модала и всплывающего окна перемещают фокус на заголовок модала или первый интерактивный элемент при открытии; возврат фокуса на кнопку триггера при закрытии |
| Платформа | Стандарты проектирования | ✅ Отображаемые индикаторы фокуса четко отображают, какой элемент имеет фокус клавиатуры в любое время |
| Платформа | Стандарты проектирования | ✅ Индикаторы фокуса соответствуют требованию контраста 3:1 относительно окружающего содержимого |
| Platform | LWC | ✅ Пользователи могут входить и выходить из всех компонентов только с помощью клавиатуры, не попадая в ловушку |
| Platform | LWC | ✅ Модальные диалоги задерживают фокус в модале, будучи открытыми (предотвращая доступ к неясному содержимому), но отпускают фокус на закрытии |
| Платформа | Стандарты проектирования | ✅ Клавиши быстрого доступа для частых действий позволяют избежать конфликтов с клавишами быстрого доступа для чтения экрана и быстрого доступа в обозревателе |
| Платформа | Стандарты проектирования | ✅ Однобуквенные клавиши быстрого доступа активируются только при наличии фокуса у определенных компонентов (не глобально) во избежание конфликтов с командами навигации экранного диктора |
| Платформа | Документация | ✅ Все настраиваемые клавиши быстрого доступа документируются в доступном содержимом справки |
| Платформа | Планы тестирования | ✅ Шаги тестирования включают навигацию только с клавиатуры по всем путешествиям пользователя без использования мыши или касания |
Антишаблоны
| Где искать | Как плохо выглядит |
|---|---|
| Платформа | Стандарты проектирования | ⚠️ Функции требуют взаимодействия мыши или касания; пользователи только с клавиатурой не могут выполнять ключевые задачи |
| Platform | LWC | ⚠️ Порядок фокусировки не соответствует логическому визуальному макету; пользователи прокладывают элементы в непредвиденной последовательности |
| Platform | LWC | ⚠️ Модалы открываются без управления фокусом; пользователи клавиатуры застряли на скрытой кнопке триггера |
| Platform | LWC | ⚠️ Модальное закрытие не возвращает фокус к кнопке триггера; пользователи должны искать свое место на странице |
| Платформа | Стандарты проектирования | ⚠️ Индикаторы фокуса замалчиваются из эстетических соображений; пользователи не видят, какой элемент имеет фокус |
| Платформа | Стандарты проектирования | ⚠️ Индикаторы фокуса имеют недостаточный контраст (<3:1) |
| Platform | LWC | ⚠️ Пользователи попадают в ловушку в областях интерфейса без механизма эвакуации (ловушки клавиатуры) |
| Platform | LWC | ⚠️ Встроенное содержимое (айфреймы, сторонние виджеты) необратимо собирает фокус клавиатуры |
| Платформа | Стандарты проектирования | ⚠️ Однобуквенные клавиши быстрого доступа активируют глобальный конфликт с командами навигации для чтения экрана с одной буквой |
| Платформа | Документация | ⚠️ Настраиваемые клавиши быстрого доступа не задокументированы; пользователи не могут их обнаружить |
Шаблоны
| Где искать | Как хорошо выглядит |
|---|---|
| Платформа | Стандарты проектирования | ✅ Минимальный коэффициент контрастности 4,5:1 для обычного текста под 18pt или 14pt жирным шрифтом |
| Платформа | Стандарты проектирования | ✅ Минимальный коэффициент контраста 3:1 для большого текста и для значимых компонентов пользовательского интерфейса и графики (границы формы, информационные значки); исключаются чисто декоративные и отключенные элементы |
| Платформа | Experience Cloud | ✅ Настраиваемые темы и фирменные сайты Experience Cloud содержат явную проверку контраста посредством инструментов разработки обозревателя или автоматических средств проверки |
| Платформа | Стандарты проектирования | ✅ Размер текста до 200% поддерживается без потери содержимого или функций (требование WCAG) |
Антишаблоны
| Где искать | Как плохо выглядит |
|---|---|
| Платформа | Стандарты проектирования | ⚠️ Коэффициент контрастности текста ниже 4,5:1 (обычный текст) или 3:1 (крупный текст и компоненты пользовательского интерфейса) |
| Платформа | Experience Cloud | ⚠️ Настраиваемые темы развертываются без контрастной проверки; пользователи с плохим зрением не могут прочитать содержимое |
| Платформа | Стандарты проектирования | ⚠️ Размер текста более 200% разрывает макеты, теряющие содержимое или функциональность |
Шаблоны
| Где искать | Как хорошо выглядит |
|---|---|
| Platform | CI/CD | ✅ Сканирование доступности топора или маяка интегрировано в ожидаемые продажи CI/CD, фиксирующие структурные проблемы при каждом развертывании |
| Platform | CI/CD | ✅ Сборки не выполняются при обнаружении критических проблем доступности |
| Платформа | Планы тестирования | ✅ Тестирование вручную с помощью программ для чтения экрана, навигации только с клавиатуры и увеличения обозревателя до 200% выполняется регулярно на протяжении всей разработки |
| Платформа | Планы тестирования | ✅ Тестирование обнаруживает проблемы взаимодействия, включительно с запутанным порядком объявления, ошибками управления фокусом и ловушками клавиатуры |
| Платформа | Бизнес | ✅ Пользователи с ограниченными возможностями включаются в тестирование использования на протяжении всего процесса проектирования |
| Платформа | Бизнес | ✅ Юзабилити-тестирование обнаруживает практические препятствия, которые пропускает автоматизированное и ручное экспертное тестирование |
| Платформа | Планы тестирования | ✅ Автоматическое тестирование (~57% выпусков по объему), ручное тестирование (проблемы взаимодействия) и пользовательское тестирование (реальные барьеры) выполняются |
Антишаблоны
| Где искать | Как плохо выглядит |
|---|---|
| Platform | CI/CD | ⚠️ Сканирование доступности не интегрировано в ожидаемые продажи CI/CD |
| Platform | CI/CD | ⚠️ Создания выполняются, несмотря на серьезные проблемы доступности |
| Платформа | Планы тестирования | ⚠️ Тестирование вручную с помощью вспомогательных технологий не выполняется; используется только автоматическое сканирование |
| Платформа | Бизнес | ⚠️ Пользователи с ограниченными возможностями не включены в тестирование юзабилити |
| Платформа | Планы тестирования | ⚠️ Автоматический сканер доступности запускается один раз перед запуском и тестирование доступности считается завершенным |