Всегда ли требуемые индикаторы должны быть красного цвета и на уровне меток в веб-формах?

Question

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

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

Это точно?

Answer 1

Несколько пунктов, чтобы обратиться сюда. (Я предположил, что это веб-приложение, которое вы не указали, в противном случае вам может понадобиться найти эквиваленты методам, которые я предлагаю здесь).

1. да цветовой контраст на оранжевый никогда не будет достаточно хорош на белом фоне, поэтому вам нужно будет поменять его на красный. Будьте осторожны, поскольку красный также не очень контрастный цвет, поэтому самое низкое значение для AA - # EB0000 , а для AAA - # B30000 .

2. не имеет красного цвета, однако это будет ожидаемое поведение, и большая доступность - это то, что пользователь ожидает, что увидит, чтобы указать на ошибку. Если бы он был черным и имел значок / какой-то способ отличить guish, что это ошибка, это также подойдет.

3. Вам необходимо иметь указание на то, что поле обязательно для заполнения внутри метки . Это в первую очередь предназначено для пользователей программ чтения с экрана, поскольку программа чтения с экрана не будет «видеть» ваш значок при вводе.

4. Звездочка - не лучший вариант, который плохо читается. читателем экрана. Вы должны добавить визуально скрытый текст с надписью «требуется» к ярлыку для максимальной доступности без чрезмерного изменения вашего дизайна (тогда вы все равно можете использовать звездочки на ярлыках, если это соответствует вашей эстетике c, однако если вы можете выполнить «требуемую» работу, которая является оптимальной, поскольку она помогает людям с когнитивными нарушениями).

5. С учетом вышесказанного нет причин удалять звездочку в коробке, это обеспечивает хорошее визуальное представление о том, что заполнять. Просто убедитесь, что звездочка не может быть доступна через программу чтения с экрана (например, alt="" для изображения или aria-hidden, если это стиль текста / встроенный SVG. Вы также можете захотеть для полноты добавьте role="presentation". Если это SVG, вы также можете добавить tabindex="-1" и focusable="false", так как проводник Inte rnet сделает некоторые SVG фокусируемыми.)