Текст с низким контрастом к фону труднее разбирать, а при возникновении ограничений такой текст может стать совсем нечитаемым. Текст с высоким контрастом к фону тоже утомляет глаза — ресурс колбочек и палочек исчерпаем.

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

• Текст должен иметь контрастность 4,5:1
• Крупный текст размером от 18pt — 3:1
• UI-компоненты и графика — минимум 3:1

Контраст — первая линия защиты доступности. Если цвета плохо различимы в идеальных условиях, в реальных они станут невидимыми.

Что проверять:

1. Все состояния ссылок и кнопок — не только обычное, но и :hover, :focus, :visited
2. Если вы проектируете тёмный режим, он должен соответствовать тем же стандартам доступности, что и светлый — только в инверсии. 
3. Текст поверх фото или градиента — самое уязвимое место
4. Плейсхолдеры в полях — часто не проходят проверку контрастности

Белый текст на тёмном фоне может быть проблемой для людей с астигматизмом — давать выбор пользователю обязательно.

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

Что добавлять к цвету

• Иконка + текстовая подпись: не просто красный фон, а восклицательный знак и слово «Ошибка»
• В графиках и таблицах — текстуры, паттерны или прямые подписи к данным, не только цветовые легенды
• В формах — не только красная рамка у поля с ошибкой, но и текст под полем с объяснением

Почему это критично за пределами экрана
Медицинские дашборды, авиационные интерфейсы, промышленные панели — там цвет как единственный сигнал может стоить жизни. Это не преувеличение, это задокументированные кейсы.

Практическое правило
Уберите цвет совсем — интерфейс должен остаться понятным. Если без цвета непонятно, что происходит — дизайн нужно доработать.

Не используйте чистый черный на чистом белом
Черный текст на белом фоне может рябить: человеку будет сложно сфокусироваться, а его глаза быстро устанут. У пользователей с дислексией текст может расплываться из-за бликов. Поэтому вместо чистого черного используйте его оттенки.

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

Соблюдайте иерархию заголовков
С четкой иерархией пользователю легче найти нужную информацию на странице. К примеру, человеку со скринридером иерархия помогает формировать образ страницы, когда он прослушивает заголовки.
Порядок размерности заголовков должен идти от самого крупного, к самому мелкому.
Для основного текста используйте шрифт минимум 16 пунктов. Это комфортный для большинства пользователей размер.

Определите оптимальный интерлиньяж
Чтобы пользователю было легче сосредоточиться на одной линии текста, не терять ее или не цепляться за соседние строки, придерживайтесь комфортного отношения интерлиньяжа к кеглю:

• 140-165% — для основного текста;
• 100-130% — для заголовков;
• 130% — для коротких текстов.

Чем длиннее строка, тем больше должен быть интерлиньяж.
Чем больше размер шрифта, тем меньше интерлиньяж. В заголовках он самый маленький, а в мелком тексте увеличенный.

Задайте комфортную для чтения длину строки
Слишком длинные или слишком короткие строки некомфортно читать.
Для обычного текста задавайте длину строки от 45 до 75 символов, включая пробелы и знаки препинания. Оптимальное количество — 66 символов.
Для заголовков, подписей к изображениям и форм длина строки может быть короче.

Выбирайте разборчивые шрифты
Чем декоративнее шрифт, тем больше шансов, что для пользователя он будет нечитаемым. Особенно для людей с дислексией.
Пользователи с дислексией сложнее воспринимают слова и медленнее читают текст. Например, у них могут вызвать трудности:

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

Cтарайтесь использовать максимально разборчивый шрифт, который хорошо читается в любом размере, с высокими строчными буквами и достаточным межбуквенным расстоянием.
Если есть возможность, используйте адаптированные шрифты Arial, Trebuchet MS, Read Regular, Myriad Pro и Geneva или добавьте возможность изменения всего текста на один из них.

Незрячие пользователи не могут ориентироваться по размеру шрифта или его начертанию. Для них уровень заголовка определяется его разметкой.
Правильно размеченные заголовки помогают в навигации. Скринридеры смогут зачитать их в виде упорядоченного списка, что позволит пользователю быстро понять общий смысл страницы.
Соблюдайте логическую последовательность заголовков от самого крупного h1 к самому мелкому h6. Старайтесь не пропускать уровни.

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

Доступное имя — это название элемента, которое скринридер сообщает пользователю при фокусе на элемент.
Кнопки могут получить доступное имя несколькими способами:

• Атрибут aria-label. В значение атрибута указываем желаемое название, которое будет озвучивать скринридер;
• Атрибут aria-labelledby — присваиваем отдельному тексту id, которой потом встраиваем через aria-labelledby в кнопку или другой элемент.

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

Сделайте ссылку для пропуска контента
Skip link — это ссылка, которая помогает быстро перейти к основному содержанию страницы при использовании клавиатуры, пропустив, например, блок с навигацией.
Она нужна, чтобы пользователю не приходилось много раз нажимать на «Tab» на каждой новой странице сайта, чтобы добраться до контента.
Ссылка должна быть хорошо видна в состоянии фокуса и появляться с плавной анимацией, чтобы не сбить с толку пользователей.

Задавайте область нажатия не меньше 44 пикселей
В маленькую область нажатия намного сложнее попасть, чем в большую.
Делайте область нажатия не меньше 44 пикселей, чтобы среднестатистический пользователь мог попасть по ней большим пальцем.
Если иконки маленькие, то увеличивайте область нажатия вокруг них.
Так вы сделаете интерфейс удобнее для всех: и для пользователей с двигательными нарушениями, и для тех, кто находится в движении или дороге.

Указывайте описательные alt тексты для изображений
Альт-текст — это описание изображения, которое скринридер озвучивает пользователями.
Если у изображений нет альт-текста, то скринридеры просто произнесут имя файла или слово «изображение», что чаще всего не даст никакого контекста.
Описывайте изображения подробно, но ограничивайтесь примерно 130 символами для каждой картинки.
Не используйте слова «изображение», «фото» и так далее. Скринридер и так произнесет формат контента.

У ценных SVG-изображений тоже должен быть альт-текст.

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

Фокус — это выбор одного контрола или элемента интерфейса, с которым взаимодействует пользователь в текущий момент.

При работе с клавиатурой у элемента, с которым взаимодействует пользователь, появляется визуальное отображение фокуса. Например, у кнопок и полей рамка, у ссылок — подчеркивание.

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

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

В нативных элементах браузер уже решает основные сценарии управления с клавиатуры. При создании кастомных или сложных контролов используйте в качестве основы нативные и следуйте гайду от w3c. Основные его положения:

• Контролы должны иметь привычные стили для состояний focus, hover, active, и visited.
• Контролами можно управлять с помощью клавиш Tab, пробела ⎵, Enterи стрелок ← ↓ ↑ → клавиатуры.

При клике в пустую часть страницы фокус снимается.

Раскрывающийся список, ссылка, тогл и любая кнопка не активируются или не раскрываются по фокусу, они активируются клавишей Enter. Это помогает пользователю не сделать ошибку, например отправить форму, и оставляет работу с кнопками консистентной.

Фокус должен идти по порядку — слева направо, сверху вниз — и нигде не застревать.
Атрибут tabindex поможет убрать фокус с элемента или добавить его. Используйте:

• tabindex="-1″, если вам нужно убрать фокус с интерактивного элемента;
• tabindex="0″, если вам нужно поставить фокус на неинтерактивный элемент.

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

Пользователь может увеличивать масштаб страницы встроенными браузерными средствами и при помощи инструментов операционной системы. При этом страница должна остаться читаемой, пользователю должен быть доступен весь контент. Мы рекомендуем поддерживать и тестировать масштабирование страниц до 150 %.

Для этого делайте адаптивными страницы продукта. Если вы проектируете макеты для экранов планшетов или мобильных устройств, то вам не потребуется дополнительного времени для поддержки масштабирования. 

Адаптивная верстка позволяет сервисам подстраиваться под размер экрана пользователя и предоставлять наиболее удобный способ взаимодействия с ними, меняя размер и расположение компонентов интерфейса. 

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

Текст с низким контрастом к фону труднее разбирать, а при возникновении ограничений такой текст может стать совсем нечитаемым. Текст с высоким контрастом к фону тоже утомляет глаза — ресурс колбочек и палочек исчерпаем.

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

• Текст должен иметь контрастность 4,5:1
• Крупный текст размером от 18pt — 3:1
• UI-компоненты и графика — минимум 3:1

Контраст — первая линия защиты доступности. Если цвета плохо различимы в идеальных условиях, в реальных они станут невидимыми.

Что проверять:

1. Все состояния ссылок и кнопок — не только обычное, но и :hover, :focus, :visited
2. Если вы проектируете тёмный режим, он должен соответствовать тем же стандартам доступности, что и светлый — только в инверсии. 
3. Текст поверх фото или градиента — самое уязвимое место
4. Плейсхолдеры в полях — часто не проходят проверку контрастности

Белый текст на тёмном фоне может быть проблемой для людей с астигматизмом — давать выбор пользователю обязательно.

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

ЗАДАЙТЕ УНИКАЛЬНЫЙ СТИЛЬ ДЛЯ КАЖДОГО СОСТОЯНИЯ ЭЛЕМЕНТА
Это нужно, чтобы пользователь смог легко определить его состояние: активный он или нет, есть в нем ошибка или нет.
Обязательно предусмотрите состояние фокуса для интерактивных элементов. Оно появляется, если пользователь перемещается по интерфейсу с помощью клавиши «Tab».
При нажатии на «Tab» пользователи не знают, к какому элементу перейдет фокус, а лишь догадываются. Поэтому нужно заметно стилизовать состояние фокуса, чтобы привлечь внимание пользователя на элемент.

УБЕДИТЕСЬ, ЧТО НАЗВАНИЕ ПОЛЯ ВСЕГДА ВИДНО
У некоторых пользователей могут быть проблемы с памятью. Не стоит использовать плейсхолдер вместо названия поля — когда пользователь начнет заполнять поле, подсказка исчезнет и придется удалять текст, чтобы снова ее посмотреть.
Использование плейсхолдера вместе с названием поля — наилучший вариант. Заголовок поля остается видимым все время, а плейсхолдер будет служить дополнительной подсказкой и исчезнет, когда пользователь начнет заполнять форму.

ДОБАВЛЯЙТЕ ПОДСКАЗКИ, КАК ИЗБЕЖАТЬ ИЛИ ИСПРАВИТЬ ОШИБКУ
Сообщите пользователю, в каком поле и какую ошибку он допустил. Опишите ее текстом и дайте подсказку, что нужно исправить.
Дайте подсказку, как можно исправить ошибку. Так вы проявите заботу к пользователю и не оставите его с ошибкой один на один.
Еще одна хорошая практика — предупреждать пользователя о включенном Caps Lock. Например, при вводе пароля человек может не понять, что регистр поменялся.

ПОМОГАЙТЕ ПОЛЬЗОВАТЕЛЮ БЫСТРЕЕ ЗАПОЛНИТЬ ПОЛЕ
Предлагайте выбор: предзаполнение и автосохранение данных, быстрая авторизация, выпадающие списки в полях ввода.
Так вы значительно сократите усилия пользователя и сэкономите его время. Это особенно поможет людям, которым труднее печатать, и тем, кто допускает больше орфографических ошибок.

Plugin Include https://www.figma.com/community/plugin/1208180794570801545/include-accessibility-annotations

Plugin Stark https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-checker

APCA https://harmonizer.evilmartians.com/

https://oklch.com/#0.7,0.1,52,100

Что такое OKLCH и зачем оно дизайнерам https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

ДОБАВЛЯЙТЕ ХЛЕБНЫЕ КРОШКИ
Для хлебных крошек используйте упорядоченный список и класс breadcrumbs.
Благодаря «хлебным крошкам» пользователь сразу понимает, где он находится относительно всего сайта.
К тому же они сокращают количество действий, которые нужно совершить, чтобы попасть в тот или иной раздел.

СДЕЛАЙТЕ ССЫЛКУ ДЛЯ ПРОПУСКА КОНТЕНТА
Skip link — это ссылка, которая помогает быстро перейти к основному содержанию страницы, пропустив объёмный и повторяющийся контент. Например, пропустить блок с навигацией, чтобы не нажимать много раз на Tab.
Ссылка размещается в начале кода, до всей навигации или перед объемным блоком с множеством ссылок. Skip link нужно нарисовать в макете — как состояние при фокусе. Обычно это небольшой тёмный тег в верхнем левом углу страницы, появляющийся поверх всего контента. 

Skip link нужна не только незрячим пользователям. Она нужна всем, кто навигирует с клавиатуры — и среди них много зрячих людей:

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

ИСПОЛЬЗУЙТЕ СЕМАНТИЧЕСКИЕ ТЕГИ
Ориентиры — это атрибуты, которые добавляются к смысловым блокам страницы. Они нужны, чтобы создавать семантические разделы на странице и помочь пользователям со скринридером легче перемещаться по сайту.
Самые распространенные ориентиры в HTML:

• header — для шапки сайта;
• nav — для навигации;
• main — для основного контента;
• aside — для дополнительного контента;
• section — для разделения страницы на смысловые блоки;
• footer — для подвала сайта.

Незрячие пользователи изучают сайты с помощью скринридеров — специальных приложений, которые зачитывают все элементы на странице и сообщают, как с ними взаимодействовать. Например, подсказывают, что человек может перейти по ссылке.
Попробуйте в действии NVDA https://youtu.be/Jao3s_CwdRU или JAWS https://youtu.be/DE7cLKgK2to для веба, Voice Over для Mac https://youtu.be/5R-6WvAihms, Talk back для Андроид https://youtu.be/0Zpzl4EKCco . Так вы сможете понять, как люди воспринимают интерфейс и взаимодействуют с ним.