Роль типографіки у веб-доступності

Які ключові типографічні принципи?

1. Читабельність: Читабельність тексту на веб-сайті є важливою для всіх користувачів, але вона особливо критична для користувачів з порушеннями зору. Правильна типографіка може зробити текст легше читати, розуміти та сприймати.

2. Розмір шрифту: Розмір шрифту є критичним фактором у веб-доступності. Користувачі з порушеннями зору можуть мати труднощі з читанням малого тексту.

3. Інтервали: Правильні інтервали між літерами, словами та рядками можуть покращити читабельність та чіткість. Користувачі з дислексією або іншими порушеннями читання можуть скористатися збільшенням інтервалів між літерами та словами.

4. Контраст: Контраст між кольорами тексту та фону є важливим для користувачів з низьким зором або кольоровою сліпотою. Високий контраст допомагає покращити читабельність та чіткість, полегшуючи користувачам відрізняти текст від фонових елементів.

1. Читабельність

Намагайтеся підібрати читабельний шрифт для вашого веб-сайту. Гротескові шрифти(Sans-serif), такі як Arial, Helvetica, Verdana та Tahoma, часто легше читати на екранах, ніж серифні(Serif) шрифти.

Рекомендована довжина рядка для абзацу тексту в веб-дизайні - 45 - 75 символів, включаючи пробіли.

У CSS 1rem приблизно відповідає ширині строчної літери m у шрифті, тому абзац, ширина якого 60rem, може бути визнаний комфортною довжиною рядка.

p {
  max-width: 60rem;
}

2. Розмір шрифту

WCAG рекомендує мінімальний розмір шрифту 16px для основного тексту, щоб забезпечити читабельність. Однак, в залежності від контексту та мети сайту, цей розмір може відрізнятися.

Також важливо дозволити користувачам змінювати¹ розмір тексту за потребою. Уникайте встановлення фіксованих розмірів шрифтів у вашому CSS, оскільки це може завадити користувачам збільшувати розмір тексту за допомогою налаштувань браузера. Замість цього використовуйте відносні одиниці, такі як em або rem, щоб забезпечити масштабування тексту при зміні налаштувань браузера користувачами.

body {
  font-size: 1rem; /* 16px */
}
 
h1 {
  font-size: 2.5rem; /* 40px */
}
 
p {
  font-size: 1rem; /* 16px */
}

3. Інтервали

Інтервали включають елементи, такі як висота рядка(line-height), інтервал між літерами(letter-spacing) та словами(word-spacing) та відступи між елементами.

Висота рядка або line height повинна бути достатньою, щоб текст був легко читати, але не розривав візуальних зв'язків між рядками. Стандарт - від 1.4 до 1.6 або навіть більше для основного тексту.

Розмір шрифту може бути збільшений або зменшений за допомогою медіа-запиту(CSS media query), або за допомогою зміни налаштувань розміру шрифту браузера користувачами. Використання пікселів не гарантує, що висота рядка пропорційна розміру шрифту. Використовуйте пропорційне значення в CSS.

p {
  font-size: 1rem;
  line-height: 1.5; /* 1.5 * 16px = 24px */
}

Інтервал між літерами допомагає зробити текст більш читабельним. Згідно з WCAG², додавання невеликого простору, принаймні 0.12 від розміру шрифту.

Інтервал між словами також може бути налаштований для покращення читабельності. Він повинен бути принаймні 0.16 від розміру шрифту.

4. Контраст

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

Відповідно до вказівок WCAG³, мінімальний контраст між текстом і фоном має бути 4,5:1 для звичайного тексту та 3:1 для великого тексту.

Як виміряти контраст?

Існує багато доступних інструментів, які допоможуть вам виміряти контраст між кольорами тексту та фону. Серед популярних інструментів:

• WebAIM Color Contrast Checker
• Contrast Ratio
• Вбудовані інструменти браузера, такі як Accessibility Developer Tools у Chrome

Приклад низького контрасту:

body {
  background-color: #f0f0f0; /* Світло-сірий фон */
  color: #cccccc; /* Світло-сірий текст */
}

У цьому випадку контрастність занадто низька (1,1:1), що робить текст майже нечитабельним для багатьох користувачів.

Рекомендації щодо покращення контрастності:

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

Що Почитати?

Color Contrast And Why You Should Rethink It by Cathy O’ Connor Modern fluid typography using CSS Clamp by Adrian Bece Choosing Web Fonts: A Beginner’s Guide by Google

Footnotes: