Как показать выбранную карточку, не полагаясь на цвет
Проверьте выбор шрифта в оттенках серого: галочка отмечает выбранный вариант, а внешняя рамка показывает фокус клавиатуры.
В окне выбора шрифта две карточки с образцом «Aa». Выбранная карточка становится фиолетовой. Вы нажимаете Tab, и вокруг другого элемента появляется фиолетовая рамка. Какой шрифт будет применён? Одному цвету поручили сразу две задачи.
Отдельные обозначения для выбора и фокуса
Подпишите карточки: «С засечками» и «Без засечек». В первом макете обозначьте выбор только заливкой. Во втором добавьте галочку и подпись «Выбрано» внутри карточки. Внешнюю рамку оставьте для фокуса клавиатуры. Когда фокус переместится, галочка должна остаться на выбранном шрифте.
Три проверки перед передачей в разработку
Переведите макет в оттенки серого: можно ли назвать выбранный вариант, не упоминая цвет? Затем пройдите по рабочему интерфейсу с клавиатуры. Сузьте окно, чтобы подпись заняла две строки: галочка не должна перекрывать текст. Для выбора одного варианта укажите группу радиокнопок с общим именем, понятными подписями и доступным для скринридера состоянием. Макет в оттенках серого не проверяет поведение клавиатуры.
W3C: WCAG 2.2, 1.4.1 · Рекомендация W3C от 5 октября 2023 года