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

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

• цвета,
  
• контрастность,
  
• стили ссылок,
  
• кнопки,
  
• формы.
  
  

В этой статье мы обсудим:

1. Изображения или текст — надписи текстом и использование изображений в формате SVG помогут легко пользоваться сайтом людям, которым из-за проблем со зрением приходится его увеличивать или уменьшать.
   
   
2. Шрифт — ключевой фактор при выборе шрифта — его читаемость.
   
   
3. Иерархия заголовков — размечайте заголовки тегами по порядку (H1, H2 и т. д.), чтобы программы чтения с экрана могли логически переходить между разделами.
   
   
4. Будьте внимательны к вертикальным отступам: межстрочным интервалам, расстояниям между абзацами, отступам после заголовков, а также к вертикальному ритму текста (VRU).
   
   
5. Текст на фоновых изображениях — следите, чтобы он был достаточно контрастным и хорошо читался.
   
   
6. Свободное место и расположение объектов — вокруг кликабельных изображений и текстов должно быть достаточно свободного места, чтобы пользователю было удобно нажать на них.
   

Если сомневаетесь, как лучше разместить надпись, — всегда выбирайте текст. Если вам все-таки необходимо, чтобы надпись была изображением, убедитесь, что она останется четкой при увеличении или уменьшении масштаба. В этом случае подходит векторная графика (SVG), так как она масштабируется без потери качества.

Еще изображения в формате SVG хороши для SEO — надписи на на них остаются текстом и индексируются поисковыми системами.

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

При выборе шрифта для сайта в первую очередь обратите внимание на его читабельность. Стандартные шрифты, например, Arial, Georgia, Serif, Sans-serif доступны на большинстве устройств. Поэтому лучше всего для сайта использовать именно их. Если это невозможно — установите какой-то из стандартных шрифтов в качестве резервного.

Помните, что длинный текст легче читать, если он набран шрифтом с засечками.

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

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

Важно помнить, что заголовки всегда должны располагаться в логическом порядке: H1, H2, H3, H4, H5 и H6. При этом на странице обязательно нужен заголовок H1, и он должен быть только один.

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

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

Обычно дизайнеры сначала выбирают базовый размер шрифта (для основного текста), а затем определяют для него высоту строки. Попробуйте начать с высоты строки равной 1.5-кратному размеру шрифта. Базовый размер шрифта и высота Остальные шрифты должны быть кратны базовому размеру шрифта. В этом поможет инструмент «Визуальный калькулятор».

Когда выбираете шрифт для сайта, учитывайте, можно ли его будет настроить потом на требуемые вертикальные интервалы в соответствии с WCAG 1.4.12 Text Spacing. Текст должно быть удобно читать, когда установлены следующие минимальные настройки интервалов:

• Высота строки (межстрочный интервал) должна быть минимум в 1.5 раза больше размера шрифта;
  
• Интервал между абзацами должен быть минимум в 2 раза больше размера шрифта;
  
• Расстояние между буквами (трекинг) должно быть не менее 0.12 от размера шрифта;
  
• Расстояние между словами должно быть не менее 0.16 от размера шрифта.
  

Размер шрифта и высота строки затем определяют базовую модульную сетку. Вертикальный интервал между строками в базовой модульной сетке называется вертикальный ритм или VRU (Vertical Rhythm Unit).

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

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

Обязательно убедитесь, что текст легко прочитать и он не портит фоновое изображение. Когда пользователь может и прочитать, что написано, и понять, что изображено на фоне, он лучше считывает контекст. Хороший дизайн -- это всегда баланс между дизайном, юзабилити и четкой передачей смысла.

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

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

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

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

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

Статья подготовлена на основе материала An Accessibility Checklist for Your Website: Part 2.