В основном при разработке дизайна сайта главенствующую роль занимают понятия эстетики и юзабилити. Однако не стоит забывать о важной группе посетителей сайта с особенностями органов зрения.
В отчете Всемирной организации здравоохранения, указанно, что около 2,2 миллиардов человек в мире - слепы или имеют нарушения зрения.
Среди них:
- - близорукость, дальнозоркость или астигматизм – 88,4 миллиона человек;
- - катарактой – 94 миллиона;
- - глаукомой – 7,7 миллиона;
- - помутнением роговицы – 4,2 миллиона;
- - иные нарушения работы глаз при которых человек не может рассмотреть небольшие предметы на близком расстоянии – 826 миллионов человек.
В этой статье мы расскажем как сделать сайт дружелюбнее к людям с такими проблемами.
Особенности просмотра сайта людьми с нарушениями зрения
Выделяем общие моменты характерные для слабовидящих:
- - Не любят сайты с мелким шрифтом, маленькими межбуквенными и межстрочными интервалами, низкой контрастностью;
- - Разные блоки со схожими цветами, расположенные рядом друг с другом воспринимают, как одно и тоже;
- - Не воспринимают инфографику с большим количеством цветов;
- - Нуждаются в подсказках по состоянию кнопок (обводка, значок).
- Люди с дальтонизмом плохо различают некоторые цвета и их сочетания.
Например:
Красный+Зеленый | Зеленый+Коричневый | |||
Голубой+Пурпурный | Светло-зеленый+Желтый | |||
Зеленый+Серый | Зеленый+Голубой | |||
Зеленый+Черный | Голубой+Серый |
Сайт по ГОСТу
1 апреля 2020 года был введен в действие ГОСТ Р 52872-2019 в котором были перечислены требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности.
Для сайтов госорганов и организаций нормы ГОСТа — обязательны к исполнению.
Если кратко изложить нормы ГОСТа, то:
- - Текст и изображения должны быть контрастными. Не менее 4.5: 1, если 1: 1 — это полное отсутствие контраста (например, красный текст на красном фоне), а 21: 1 — это максимальный уровень контраста (например, белый текст на черном фоне).
- - Не нужно часто использовать тонкие плохо заметные обводки (маленький контраст, эффект свечения и т.д.) на текстовых элементах.
- - Обязательно должна быть возможность увеличить текст до 200%, изменить размеры межбуквенного и межстрочного интервала.
- - У всех изображений, графиков и иного нетекстового контента должен быть заполнен атрибут alt, что бы можно было понять, что изображено на картинке без самой картинки.
- - У pdf-вложений которые не подготовлены для людей с особенностями зрения, должны быть их текстовые аналоги.
- - Не нужно использовать фреймы.
- - Элементы сайта должны отличаться не только цветом, но и какими-нибудь иными способами.