Убедитесь, что элементы интерфейса соответствуют пороговым коэффициентам контрастности
Пороговые коэффициенты контрастности отличаются в зависимости от формата элемента:
  • наборный текст — 4.5:1
  • текст большого размера — 3:1
  • иконки — 3:1
  • границы инпутов, чекбоксов, переключателей и других элементов взаимодействия — 3:1
Проверить контрастность можно с помощью различных сервисов, например: WebAIM ???, APCA ???, Colour Contrast Analyser (CCA) …
Для пользователей Figma существуют плагины, позволяющие быстро проверить контрастность элементов, мы пользуемся Contrast ????, он удобен и прост в использовании.
Давайте вместе делать доступно и классно!
Показатели контрастности текста в норме: текст легко читается
Давайте вместе делать
доступно и классно!
Показатели контрастности текста ниже пороговых: текст сложно читать
Убедитесь, что цвет является
не единственным способом передачи информации
Цветные элементы интерфейса должны иметь рядом с собой текстовое описание с названием цветов или их характеристикой.
Статус инпута передаётся только цветом, ошибка неочевидна
Текстовый комментарий сопровождает цвет, ошибка очевидна
Имя
Номер телефона

E-mail
eliaskouv@gmail
+7 (926) 155‒87‒90
Илья
Укажите корректный e-mail
eliaskouv@gmail
E-mail
+7 (926) 155‒87‒90
Илья
Номер телефона

Имя
Проверьте разницу восприятия цветов
Разница цветов влияет на восприятие и читаемость.
Например, при слабой разнице цвета полей ввода в состоянии enabled и disabled могут быть почти идентичны. Поэтому при формировании палитры рекомендуем проверять цвета и оттенки в онлайн-калькуляторе
Полученное значение в калькуляторе необходимо сравнить с нормативным показателем и сделать выводы.
30-40dE (единиц) – нормативный показатель необходимой разницы между цветами (то есть число единиц, при котором разница между
цветами будет четко обнаружена).
Показатель разницы: 42 Цвета легко различаются

Показатель разницы: 18.9
Различить цвета трудно
Используйте заголовок H1 только один раз в представлении, окне или странице
Используйте тег H1 один раз на странице. Также следите за тем, чтобы тег описывал именно название страницы, а не название сайта.
Cоблюдайте иерархию заголовков: логическую последовательность

по нисходящей
Порядок размерности заголовков должен идти в логической последовательности по нисходящей, то есть от самого крупного H1 , к самому мелкому H6 . Это означает, что более мелкий заголовок H4 не должен появиться на странице раньше, чем более крупный заголовок, например, H3 .
Не запутаться со всем этим делом поможет headingsMap ???? — плагин, генерирующий карту заголовков веб-страницы или индекс.
Давайте вместе делать
доступно и классно!
Последовательность по нисходящей соблюдена, обычный текст не является заголовком
Последовательность по нисходящей
нарушена, обычный текст выделен
как заголовок
Учитывайте особенности восприятия текста людей с дислексией

Пользователи, обладающие дислексией, сложнее воспринимают слова, медленнее читают текст и распознают контент в целом, осваивают навыки правописания.
Кроме того, при дислексии также вызывают сложности:
  • похожие буквы в обычном начертании;
  • буквы, отраженные по вертикальной и горизонтальной осям;
  • перевернутые буквы;
  • слова с перемешанными буквами.
Поэтому рекомендуем использовать адаптированные шрифты Arial, Trebuchet MS,
Read Regular, Myriad Pro и Geneva или добавить возможность изменения всего текста на один из них.
Используйте корректный визуальный стиль ссылки
Ссылка должна выглядить как ссылка.
Она должна быть выделена цветом, который отличается от основного, и подчеркнута —
это привычный и общепринятый способ сообщить о наличии ссылки.
Пример — наш чеклист по доступности. Ссылки подчеркнуты и отличны по цвету от основного текста.
Опросы показывают, что 80% людей более благосклонны к компаниям,
чья деятельность направлена на улучшение качества жизни районных сообществ и других социальных групп
Ссылку легко идентифицировать:

стиль текста ссылки выделен цветом
и подчеркнут
Ссылку сложно обнаружить:

стиль текста ссылки идентичен стилю основного текста
Дополнительная информация об исселовании
Опросы показывают, что 80% людей более благосклонны к компаниям,
чья деятельность направлена на улучшение качества жизни районных сообществ и других социальных групп
Дополнительная информация об исселовании
Продумайте понятную визуальную идентификация внутренних и внешних ссылок
Если при нажатии на кнопку или ссылку открывается новое окно или вкладка – человеку следует сообщить об этом заранее. Сделать это поможет скринридер или другие вспомогательные технологии. Впрочем, таких механик перехода лучше избегать вовсе. Часто, они влекут за собой негативные отзывы пользователей, которые считают такие переходы неудобными в работе
и для восприятия.
Но если применение подобных приемов неизбежно, помните — ссылки, открывающиеся в новом окне, должны иметь понятное обозначение
Поведение ссылки непредсказуемо:
непонятно, это внешняя или внутренняя ссылка; в каком окне открывается ссылка
Опросы показывают, что 80% людей более благосклонны к компаниям, чья деятельность направлена на улучшение качества жизни районных сообществ и других социальных групп
Опросы показывают, что 80% людей более благосклонны к компаниям, чья деятельность направлена на улучшение качества жизни районных сообществ и других социальных групп
Дополнительная информация об исселовании
Дополнительная информация об исселовании
Поведение ссылки предсказуемо:
диагональная стрелка предупреждает

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

Все изменения контекста должны быть вызваны только действием со стороны пользователя, например, нажатием на ссылку или кнопки отправки. Действия, которые просто перемещают фокус на элемент, 
не вызывают изменения контекста.
Новое окно должно появляться только тогда, когда пользователь нажимает (или использует enter) на кнопку, а не использует onfocus ,
чтобы открыть новое окно.

Состояния события легко идентифицировать, так как каждое состояние

имеет собственный, отличный от других, стиль
Старайтесь избегать открытие внешних вкладок и окон, так как они могут дезориентировать людей, особенно тех,
у кого имеются особенности восприятия визуального контента.

Показывайте предупреждение перед автоматическим открытием новой вкладки или окна
Автоматическое открытие новых вкладок или окон при активации ссылки может дезориентировать людей с особенностями восприятия визуального контента и некоторых людей с когнитивными особенностями,
если они не предупреждены заранее.
Предоставление предупреждения дает возможность пользователю решить,
хочет ли он покинуть текущее окно или нет,
а предупреждение поможет ему найти путь назад, если он решит, что хочет перейти
в новое окно.
Кроме того, предупреждение поможет понять, что кнопка «Назад» не будет работать,
и что необходимо вернуться к последнему открытому окну, чтобы найти свое предыдущее местоположение.

При клике на ссылку появляется предупреждение о ее открытии в новой вкладке браузера
Cоблюдайте иерархию заголовков: логическую последовательность

по нисходящей
Порядок размерности заголовков должен идти в логической последовательности по нисходящей, то есть от самого крупного H1 , к самому мелкому H6 . Это означает, что более мелкий заголовок H4 не должен появиться на странице раньше, чем более крупный заголовок, например, H3 .
Не запутаться со всем этим делом поможет headingsMap ???? — плагин, генерирующий карту заголовков веб-страницы или индекс.
Давайте вместе делать
доступно и классно!
Последовательность по нисходящей соблюдена, обычный текст не является заголовком
Последовательность по нисходящей
нарушена, обычный текст выделен
как заголовок