Чек-лист по доступности сайта. Часть 1

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

1. Цвета — выберите хорошо сбалансированный набор дополнительных цветов, которые хорошо сочетаются и достаточно контрастны.
   
   
2. Контрастность — когда комбинируете цвета, убедитесь, что они достаточно контрастны.
   
   
3. Стиль ссылок — придумайте как минимум два способа, как оформить ссылки, чтобы их можно было отличить от текста, в том числе пользователям со слабым зрением.
   
   
4. Кнопки — когда разрабатываете кнопки, помните о требованиях к контрастности и читабельности, и не забывайте обо всех необходимых состояниях (ховер, фокус и т. д.).
   
   
5. Формы — проверьте, чтобы все заголовки, плейсхолдеры, подсказки, сообщения об ошибках и предупреждения были понятными и читабельными.
   

• Когда разрабатываете дизайн сайта, учитывайте сочетаемость цветов. Они не должны отвлекать, но должны быть достаточно контрастными — так сайт будет доступен для всех пользователей, в том числе и для людей со слабым зрением. С помощью сочетаний цветов на сайте вы можете задать визуальную иерархию, структурировать контент, а также отделить передний план от фона или статические области от интерактивных.
  
  
• Используйте основную палитру для призывов к действию (CTA), иконок и других объектов, которые важно выделить.
  
  
• Используйте дополнительные цвета для менее важной информации.
  
  
• Нейтральные цвета подойдут для текстов и фона. На больших фоновых заливках цвета лучше смягчить.
  

Одна из основных задач дизайнера — проверка контрастности. Например, можно использовать такие инструменты для проверки контрастности: WebAIM онлайн или десктопный Color Contrast Analyzer для Windows/macOS.

Когда вы проверяете контрастность:

1. Скопируйте HEX-значение цвета и перейдите в сервис проверки контрастности.

2. Введите его в поля Foreground Color (Цвет переднего плана) или Background Color (Цвет фона).

3. Скорректируйте основной и фоновый цвета, чтобы коэффициент контрастности стал равен или выше минимальных значений:

• для текста размером 18.66 пикселей и более для жирных начертаний ищите контрастность не менее 3:1,
• для текста размером менее 18.66 пикселей ищите контрасность не менее 4.5:1.

• Colorblinding — это расширение для браузера показывает, как ваш сайт выглядит для пользователей с нарушением восприятия цветов.
  
  
• ColorZilla — здесь есть продвинутая «пипетка», инструмент выбора цвета, генератор градиента и другие полезные штуки.
  

Убедитесь, что ссылки можно отличить от обычного текста. Когда вы используете ссылки в основном тексте, они должны визуально отличаться от него как минимум по двум признакам: во-первых, цветом, во-вторых, любым другим способом, не завязанным на цвете — для людей с дальтонизмом.

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

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

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

Проверьте, все ли состояния вы предусмотрели для ссылок:

• По умолчанию (по ссылке не переходили);
  
• По ссылке переходили;
  
• Ховер (на ссылку наведен курсор);
  
• Фокус (через клавиатуру на ссылку переключились с другого элемента, но еще не нажали на нее);
  
• Активная (на ссылку нажали);
  
• Неактивная (на ссылку пользователь нажать не может).
  

Под кнопками мы понимаем как кнопки в формах («Отменить», «Отправить» и пр.), так и ссылки, стилизованные под кнопки. Кнопки, которые используются в формах, должны встречаться только в формах. Кнопки-ссылки используются, когда нужно перенаправить пользователя на другую страницу или сайт.

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

При разработке кнопок учитывайте их размер как для десктопа, так и для мобильных устройств. Для мобильных устройств область касания должна быть такой, чтобы взрослый человек легко мог попасть по ней пальцем. В правилах доступности веб-контента (WCAG) рекомендуется делать ее не меньше, чем 44×44 пикселя. Для детей и людей с двигательными нарушениями, область касания должна быть еще больше.

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

• По умолчанию (как выглядит кнопка до взаимодействия);
  
• Ховер (актуально для десктопа; курсор находится над кнопкой);
  
• Активная (на кнопку нажали);
  
• Фокус (на кнопку переключились с другого элемента при помощи клавиатуры, но еще не нажали на нее);
  
• Неактивная (на кнопку нажать нельзя).
  

Делайте такие формы, чтобы их заполняли :)

Группировка связанных полей

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

• Заголовки лучше размещать непосредственно над полями для заполнения. А чекбоксы и радиобаттоны, если они есть, — справа от каждого такого поля.

• Используйте полужирный шрифт, чтобы выделить заголовки. Отметку об обязательном заполнении поля следует ставить сразу после заголовка. Это может быть красная звездочка, красный текст «ОБЯЗАТЕЛЬНО» или что-то подобное.
  

• Заголовки полей могут также включать краткие инструкции для конкретного поля, например, «Дата (мм / дд / гггг)».
  
  
• Кроме заголовков, у каждого поля формы должен быть текст с описанием и плейсхолдер. Если выровнять их по левому краю, а описание расположить над полем, это улучшит читаемость. Тексты должны быть короткими и понятными.
  

• Не используйте плейсхолдер в качестве заголовка поля — он недоступен для программ чтения с экрана.
  
  
• Пользователям с хорошим зрением плейсхолдер помогает понять, как корректно заполнить поле или скорректиовать, если что-то пошло не так.
  
  
• Плейсхолдер исчезает, когда пользователь начинает заполнять поле. Это может раздражать пользователей, которые забывают, что там было написано. Возможно, подсказка в тултипе будет лучше.
  
  

• Поля формы должны иметь четкие границы, они должны быть контрастными с фоном формы, а цвет фона полей должен быть контрастным с текстом внутри поля.
  
  
• Размер поля формы должен соответствовать его содержимому. Например, поле для ввода даты должно быть меньше, чем поле для ввода ФИО.
  
  

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

Инструкция по заполнению

Дайте пользователю краткое пояснение, как нужно заполнять форму. Лучше всего разместить его выше первого поля. Отметьте там обязательные поля и обязательные форматы данных (например, даты).

Оповещения и ошибки

• Оповещайте пользователей об ошибках в форме и показывайте им соответствующие предупреждения, чтобы кратко объяснить, как исправить проблемы, которые мешают заполнить форму. Эти предупреждения должны быть достаточно контрастными и заметными.
  
  
• Стоит показать все ошибки и предупреждения единым списком в верхней части формы, включая краткие инструкции по устранению проблем. Вы также можете дать ссылки на поля формы, где есть ошибки. Обязательно отображайте ошибку в каждом поле формы, где есть проблемы, чтобы пользователю было проще найти, что именно не так. Это может быть, например, строка с предупреждением как над, так и под полем.

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