В моем предыдущем посте об обзоре доступности я рассмотрел множество реализаций на основе структуры HTML, которые вы можете сделать, чтобы сделать его более доступным, особенно для программ чтения с экрана!
Тем не менее, существует множество способов сделать веб-страницу более доступной с визуальной точки зрения. Во второй части этой серии я расскажу о шрифте.
Доступность: единицы относительной длины
EM и REM – это единицы CSS, описывающие размер интервала или шрифта. Важным аспектом EM и REM является то, что они масштабируются в зависимости от размера шрифта. EM масштабируется в соответствии с размером шрифта родительского элемента, а REM масштабируется в соответствии с размером шрифта корневого элемента.
Почему это масштабирование так важно? Что ж, пользователь может настроить размер шрифта в своем браузере:
Или у них могут быть расширения/плагины, которые могут загружать пользовательские таблицы стилей с нестандартными размерами шрифта. Важно учитывать эти возможности. Все отступы, поля, интервалы и размеры шрифта должны быть изменены, чтобы использовать эти типы единиц измерения!
Вот наглядный пример, разбивающий его:
Выход:
Единицы EM и REM имеют одинаковый размер, так как единица EM берет размер из родительского элемента div, а единица REM берет его из корневого элемента (также известного как тег HTML).
Размер шрифта в целом не должен быть меньше 0,875rem, что в большинстве случаев эквивалентно 14 пикселям. Все, что меньше, и пользователям, скорее всего, придется увеличивать масштаб, чтобы удобно читать текст.
Доступность: цвета и контраст
Одним из наиболее важных факторов при выборе цвета текста является соответствующий контраст между передним планом и фоном. Это очень важный фактор при выборе цветовой схемы.
Это может повлиять на удобочитаемость текста не только для слабовидящих читателей, но даже для тех, кто в прошлом, помогает всем пользователям легче переваривать текст.
К счастью, есть некоторые инструменты, которые могут помочь нам решить эту проблему контраста. У WebAIM есть популярный сайт:
https://webaim.org/resources/contrastchecker/
Это встроено в инструменты разработчика. Возьмем для примера этот текст:
Если мы щелкнем правой кнопкой мыши текст на веб-странице, перейдем на вкладку «Элементы» и щелкнем по цвету вкладки, мы увидим некоторые параметры контрастности в нижней части только что открытого всплывающего окна:
Расширение коэффициента контрастности даст нам два варианта, чтобы помочь с новыми цветами!
Щелчок по маленьким значкам рядом с квадратом предложит лучший цвет для фона.
Чтобы дать небольшое объяснение значений чисел:
Уровень AA WCAG 2.0 требует коэффициента контрастности не менее 4,5:1 для обычного текста и 3:1 для крупного текста. WCAG 2.1 требует коэффициента контрастности не менее 3:1 для графики и компонентов пользовательского интерфейса (таких как границы ввода формы). Для уровня WCAG AAA требуется коэффициент контрастности не менее 7:1 для обычного текста и 4,5:1 для крупного текста.
Сравнивая новые цвета бок о бок, мы получаем следующее:
Вау, так намного лучше!
Выбор лучшего стиля шрифта
Это намного проще, чем два предыдущих, поскольку стиль шрифта должен быть стандартизирован для всего веб-сайта. Однако есть некоторые соображения, которые важны при выборе шрифта.
Лучшие шрифты простые, с небольшой двусмысленностью в отношении того, что представляет собой каждый символ. Важны естественное пространство и вес шрифтов. Как правило, вес не должен быть ниже, так как его становится значительно труднее читать.
Естественный размер шрифта должен соответствовать рекомендациям, которые я упоминал ранее. ничего ниже 0,875em.
Один хороший пример читаемого шрифта (есть и другие, но просто для того, чтобы показать пример того, как он может выглядеть).
Вердана:
На этом шрифты заканчиваются! В следующей части этой серии я планирую рассказать об изображениях и о том, что нужно делать (и чего не делать), чтобы сделать их более доступными.
Надеюсь, это послужило хорошим введением в то, как сделать шрифт вашего сайта более доступным. Оставьте любые дополнительные советы или отзывы в комментариях ниже.
Больше контента на Relatable Code
Если вам это понравилось, не стесняйтесь связаться со мной в LinkedIn или Twitter.
Первоначально опубликовано на https://relatablecode.com 9 марта 2022 г.
