В основном при разработке дизайна сайта главенствующую роль занимают понятия эстетики и юзабилити. Однако не стоит забывать о важной группе посетителей сайта с особенностями органов зрения.

В отчете Всемирной организации здравоохранения, указанно, что около 2,2 миллиардов человек в мире - слепы или имеют нарушения зрения.

Среди них:

  • близорукость, дальнозоркость или астигматизм – 88,4 миллиона человек;
  • катарактой – 94 миллиона;
  • глаукомой – 7,7 миллиона;
  • помутнением роговицы – 4,2 миллиона;
  • иные нарушения работы глаз при которых человек не может рассмотреть небольшие предметы на близком расстоянии – 826 миллионов человек.

 

В этой статье мы расскажем как сделать сайт дружелюбнее к людям с такими проблемами.

Особенности просмотра сайта людьми с нарушениями зрения

Выделяем общие моменты характерные для слабовидящих:

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

Пример предупреждающего значка

  • Люди с дальтонизмом плохо различают некоторые цвета и их сочетания.

Например:

Красный+Зеленый Красный+Зеленый   Зеленый+Коричневый Зеленый+Коричневый
Голубой+Пурпурный Голубой+Пурпурный   Светло-зеленый+Желтый Светло-зеленый+Желтый
Зеленый+Серый Зеленый+Серый   Зеленый+Голубой Зеленый+Голубой
Зеленый+Черный Зеленый+Черный   Голубой+Серый Голубой+Серый

Сайт по ГОСТу

1 апреля 2020 года был введен в действие ГОСТ Р 52872-2019 в котором были перечислены требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности.

Для сайтов госорганов и организаций нормы ГОСТа — обязательны к исполнению.

Если кратко изложить нормы ГОСТа, то:

  • Текст и изображения должны быть контрастными. Не менее 4.5: 1, если 1: 1 — это полное отсутствие контраста (например, красный текст на красном фоне), а 21: 1 — это максимальный уровень контраста (например, белый текст на черном фоне).
  • Не нужно часто использовать тонкие плохо заметные обводки (маленький контраст, эффект свечения и т.д.) на текстовых элементах.
  • Обязательно должна быть возможность увеличить текст до 200%, изменить размеры межбуквенного и межстрочного интервала.
  • У всех изображений, графиков и иного нетекстового контента должен быть заполнен атрибут alt, что бы можно было понять, что изображено на картинке без самой картинки.
  • У pdf-вложений которые не подготовлены для людей с особенностями зрения, должны быть их текстовые аналоги.
  • Не нужно использовать фреймы.
  • Элементы сайта должны отличаться не только цветом, но и какими-нибудь иными способами.