Чек-лист по доступности сайта. Часть 2
Текст, шрифт, заголовки, интервалы, свободное пространство
Продолжаем говорить о факторах, влияющих на доступность сайта. В первой части мы обсудили:
- цвета,
- контрастность,
- стили ссылок,
- кнопки,
- формы.
- Изображения или текст — надписи текстом и использование изображений в формате SVG помогут легко пользоваться сайтом людям, которым из-за проблем со зрением приходится его увеличивать или уменьшать.
- Шрифт — ключевой фактор при выборе шрифта — его читаемость.
- Иерархия заголовков — размечайте заголовки тегами по порядку (H1, H2 и т. д.), чтобы программы чтения с экрана могли логически переходить между разделами.
- Будьте внимательны к вертикальным отступам: межстрочным интервалам, расстояниям между абзацами, отступам после заголовков, а также к вертикальному ритму текста (VRU).
- Текст на фоновых изображениях — следите, чтобы он был достаточно контрастным и хорошо читался.
- Свободное место и расположение объектов — вокруг кликабельных изображений и текстов должно быть достаточно свободного места, чтобы пользователю было удобно нажать на них.
Изображения или текст
Если сомневаетесь, как лучше разместить надпись, — всегда выбирайте текст. Если вам все-таки необходимо, чтобы надпись была изображением, убедитесь, что она останется четкой при увеличении или уменьшении масштаба. В этом случае подходит векторная графика (SVG), так как она масштабируется без потери качества.
![доступность сайта](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1606810808/tild3534-6135-4036-b337-353538613831__-__empty__77-min.jpg)
SVG vs JPG. Источник
Еще изображения в формате SVG хороши для SEO — надписи на на них остаются текстом и индексируются поисковыми системами.
Возможность при изменении масштаба комфортно читать все тексты на странице — вопрос не только эстетики, но и этики. Людям с нарушением зрения эта возможность крайне необходима.
Возможность при изменении масштаба комфортно читать все тексты на странице — вопрос не только эстетики, но и этики. Людям с нарушением зрения эта возможность крайне необходима.
В одном из наших проектов заказчик просил сверстать сайт под масштаб 150%, т.к. целевой аудитории их сайта масштаб экрана часто предустановлен на это значение.
Выбор шрифта
При выборе шрифта для сайта в первую очередь обратите внимание на его читабельность. Стандартные шрифты, например, Arial, Georgia, Serif, Sans-serif доступны на большинстве устройств. Поэтому лучше всего для сайта использовать именно их. Если это невозможно — установите какой-то из стандартных шрифтов в качестве резервного.
Помните, что длинный текст легче читать, если он набран шрифтом с засечками.
Помните, что длинный текст легче читать, если он набран шрифтом с засечками.
![доступность сайта](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1606810808/tild6438-3833-4031-a665-663339386434__-__empty__8.jpg)
Инструмент проверки контраста WebAIM. Источник
Чем хороши засечки — они создают впечатление, будто буквы в словах соединены, а не стоят отдельно друг от друга. Это облегчает чтение. Однако если засечки используются в «высокодекоративном» шрифте, то читать такой шрифт будет сложнее. Шрифты без засечек подходят для коротких текстов и заголовков. В любом случае шрифт должен быть чистым, четким и с хорошим межбуквенным интервалом.
Постарайтесь ограничить количество гарнитур шрифтов и их начертаний в рамках дизайна сайта. Двух гарнитур будет более чем достаточно, чтобы создать четкую иерархию текста на странице. Подобрать такую пару шрифтов можно, например, на Fontjoy.
Постарайтесь ограничить количество гарнитур шрифтов и их начертаний в рамках дизайна сайта. Двух гарнитур будет более чем достаточно, чтобы создать четкую иерархию текста на странице. Подобрать такую пару шрифтов можно, например, на Fontjoy.
![доступность сайта](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1606810808/tild3361-6533-4064-a230-623434393237__-__empty__9.png)
Сочетание шрифтов в Fontjoy. Источник
Порядок заголовков
Важно помнить, что заголовки всегда должны располагаться в логическом порядке: H1, H2, H3, H4, H5 и H6. При этом на странице обязательно нужен заголовок H1, и он должен быть только один.
Хоть и рекомендуется следить за тем, чтобы размер шрифта соответствовал уровню заголовка, это не обязательно — заголовки могут быть разного размера. Четырех размеров заголовков будет достаточно, чтобы пользователь понял их иерархию.
Шрифт размером менее 14 пикселей нечитабелен даже для человека с нормальным зрением, что и говорить о тех, у кого зрение слабое. Обязательно проверьте, как размер шрифта будет смотреться при различных разрешениях адаптивной версии.
Обычно дизайнеры сначала выбирают базовый размер шрифта (для основного текста), а затем определяют для него высоту строки. Попробуйте начать с высоты строки равной 1.5-кратному размеру шрифта. Базовый размер шрифта и высота Остальные шрифты должны быть кратны базовому размеру шрифта. В этом поможет инструмент «Визуальный калькулятор».
Хоть и рекомендуется следить за тем, чтобы размер шрифта соответствовал уровню заголовка, это не обязательно — заголовки могут быть разного размера. Четырех размеров заголовков будет достаточно, чтобы пользователь понял их иерархию.
Шрифт размером менее 14 пикселей нечитабелен даже для человека с нормальным зрением, что и говорить о тех, у кого зрение слабое. Обязательно проверьте, как размер шрифта будет смотреться при различных разрешениях адаптивной версии.
Обычно дизайнеры сначала выбирают базовый размер шрифта (для основного текста), а затем определяют для него высоту строки. Попробуйте начать с высоты строки равной 1.5-кратному размеру шрифта. Базовый размер шрифта и высота Остальные шрифты должны быть кратны базовому размеру шрифта. В этом поможет инструмент «Визуальный калькулятор».
![доступность сайта](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1606810808/tild3732-6131-4566-b261-623661636432__-__empty__10.png)
Шкала шрифтов: инструмент «Визуальный калькулятор» Джереми Черча. Источник
Интервалы в тексте и вертикальный ритм текста (VRU)
Когда выбираете шрифт для сайта, учитывайте, можно ли его будет настроить потом на требуемые вертикальные интервалы в соответствии с WCAG 1.4.12 Text Spacing. Текст должно быть удобно читать, когда установлены следующие минимальные настройки интервалов:
- Высота строки (межстрочный интервал) должна быть минимум в 1.5 раза больше размера шрифта;
- Интервал между абзацами должен быть минимум в 2 раза больше размера шрифта;
- Расстояние между буквами (трекинг) должно быть не менее 0.12 от размера шрифта;
- Расстояние между словами должно быть не менее 0.16 от размера шрифта.
![доступность сайта](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1606810808/tild6337-3031-4633-a262-313030343933__-__empty__1111.jpg)
Пример вертикального ритма текста (VRU). Источник
Текст на фоновых изображениях
Когда размещаете текст поверх изображений, всегда проверяйте, что получилось достаточно контрастно. Если с контрастностью беда, и текст читается плохо, изображение можно затемнить, можно под текст добавить полупрозрачный фон или фон с полупрозрачным градиентом.
![доступность сайта](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1606810808/tild6464-3634-4139-b839-386463346462__-__empty__1212.jpg)
Хорошая контрастность текста и изображения. Источник
Чтобы проверить контрастность, можно использовать ColorZilla — он позволяет определить цвет фона вокруг вашего текста. Затем сравните полученный цвет с цветом текста с помощью инструмента проверки контрастности, например, WebAIM.
Напомним правило контрастности
Контрастность текста и фона должна быть не менее 3:1, если размер текста больше 18.66 пикселей и жирный, и 4.5:1, если он меньше 18.66 пикселей.
Контрастность текста и фона должна быть не менее 3:1, если размер текста больше 18.66 пикселей и жирный, и 4.5:1, если он меньше 18.66 пикселей.
Обязательно убедитесь, что текст легко прочитать и он не портит фоновое изображение. Когда пользователь может и прочитать, что написано, и понять, что изображено на фоне, он лучше считывает контекст. Хороший дизайн -- это всегда баланс между дизайном, юзабилити и четкой передачей смысла.
Свободное место и расположение объектов
Между изображениями должно быть достаточно свободного места, чтобы и обычному пользователю не запутаться, и пользователю с когнитивными нарушениями было легко работать с сайтом.
Если на мобильном устройстве кликабельные изображения расположены слишком близко друг к другу, то кликнуть на них, не задев соседние элементы, будет сложно. В версиях сайта для планшетов и смартфонов иконки должны быть больше, чем в версии для десктопа — пользователю должно быть легко понять, что они обозначают, и нажать на них.
Свободное место на странице важно и для удобного скроллинга — его должно быть достаточно, чтобы при прокручивании страницы случайно не нажать на другие кликабельные элементы страницы. Пустое пространство страницы не только помогает сосредоточить внимание пользователя на контенте, но и улучшает его читабельность. Правильный баланс пространства между элементами страницы помогает понять их иерархию, расставить акценты и, как следствие, улучшить взаимодействие с пользователем.
Отсутствие свободного места на странице вызывает ощущение хаоса и, в конечном итоге, подавляет пользователей. Такую страницу сложно быстро просмотреть, на ней неудобно ориентироваться. Пользователи в конце концов могут просто устать и уйти от вас.
Используйте два типа свободного места на страницах: макро- и микропространство. Примеры макропространства — пустое место под шапкой и над подвалом сайта, а также внешние поля и отступы между разделами. Примеры микропространств — отступы между заголовками и абзацами и отступы внутри абзацев.
Если на мобильном устройстве кликабельные изображения расположены слишком близко друг к другу, то кликнуть на них, не задев соседние элементы, будет сложно. В версиях сайта для планшетов и смартфонов иконки должны быть больше, чем в версии для десктопа — пользователю должно быть легко понять, что они обозначают, и нажать на них.
Свободное место на странице важно и для удобного скроллинга — его должно быть достаточно, чтобы при прокручивании страницы случайно не нажать на другие кликабельные элементы страницы. Пустое пространство страницы не только помогает сосредоточить внимание пользователя на контенте, но и улучшает его читабельность. Правильный баланс пространства между элементами страницы помогает понять их иерархию, расставить акценты и, как следствие, улучшить взаимодействие с пользователем.
Отсутствие свободного места на странице вызывает ощущение хаоса и, в конечном итоге, подавляет пользователей. Такую страницу сложно быстро просмотреть, на ней неудобно ориентироваться. Пользователи в конце концов могут просто устать и уйти от вас.
Используйте два типа свободного места на страницах: макро- и микропространство. Примеры макропространства — пустое место под шапкой и над подвалом сайта, а также внешние поля и отступы между разделами. Примеры микропространств — отступы между заголовками и абзацами и отступы внутри абзацев.
![доступность сайта](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1606810808/tild3663-3830-4730-b434-636366323739__-__empty__1313.jpg)
Макро- vs микропространство. Источник
Статья подготовлена на основе материала An Accessibility Checklist for Your Website: Part 2.