10 советов при создании сайта для слабовидящих


В этом материале я попробую обобщить свой опыт разработчика сайтов с версией для слабовидящих, ставшей обязательной для школ с начала 2016 года.

Общее

1.Соблюдайте стандарты

Соотвутствуйте стандарту WCAG. Делайте валидацию и проверяйте совместную работу сайта с экранными ридерами (используйте атрибуты aria-, alt и т.д.).

2. Чёткая структура

Изначально думайте о том, что дизайн и код вашего сайта должен быть готов к визуальному упрощению - от Reader mode в FIrefox и iOS до специальных инструментов. Для этого следует соответствовать стандартам HTML5, подразумевающим наличие тегов <header>, <nav>, <article>, <footer>, использовать переменные в CSS (SASS), применять БЭМ-подобную методологию написания кода и т.д.

Упрощённая разметка

3. Сделайте упрощённую разметку на основе мобильной

Структуру упрощённой разметки проще всего делать общей с разметкой для мобильных устройств: текст растянут от края до края, логические части сайта расположены по вертикали, сверху вниз. Меню скрыто в кнопке. Потому что человек с очень плохим зрением начинает что-то различать при отношении размера символов к дисплею такому же, как на мобильных устройствах.

4. Шрифты в rem (и em)

Этот подход существенно упрощает процедуру увеличения и уменьшения шрифтов, поскольку достаточно только поменять размер базовой единицы, заданный для тега html или body. Помимо font-size не забывайте и о line-height.

5. Кернинг и font-weight

Не таким бесполезным будет увеличение кернинга - отдельной опцией или одновременно с увеличением размера шрифта. Толщина шрифта не должна быть ниже 300/400 (normal).

6. Дайте настроить размер шрифта всем

Слабо видят и те, у кого -0.5. В этом случае они увеличивают масштаб страницы. Дайте им возможность настроить размер шрифта независимо от включения других свойств, и не оставляйте выбор в рамках трёх размеров, как это делает большинство сайтов.

Цветовые схемы

7. Не включайте принудительную упрощённую разметку

Продолжая предыдущий тезис. Слабовидящие - это и те, кто страдают от неправильного цветовосприятия. Не объединяйте настройки цветопередачи с принудительным включением упрощённой разметки и цветовых схем. Для включения монохромности используйте свойство filter: grayscale(100%).

8. Дайте настроить картинку так, как нужно пользователю

И о свойстве filter. Пользуйтесь роскошными возможностями этих опций и дайте людям возможность сделать картинку различимей, применяя brightness, contrast, saturation и т.д. Вместо grayscale можно использовать ползунок для настройки saturation. Впрочем, такие продвинутые настройки уместнее смотрятся в отдельном расширении для браузера.

9. Цветовая унификация и простота

Возвращаясь ко второму пункту: чтобы меньше возиться с задействованием цветовых схем, унифицируйте цвета темы, чтобы их можно было менять по наследству, изменив всего лишь одно-два корневых свойства.

Дизайн

10. Удобство в использовании и красота интерфейса

Из-за укрупнённых элементов сайт в версии для слабовидящих становится в несколько раз длинее. Используйте фиксированные элементы для быстрого доступа к важным элементам (меню, переходы к началу, к следующему материалу), поскольку слабовидящим они ещё нужнее.


Интерфейс настроек должен выглядеть красиво, аккуратно, элегантно. Совсем не так уродливо, как это предлагают платные скрипты, установленные в большинстве на русскоязычных сайтах. Ниже представлен пример плохого интерфейса.



***

На данный момент это всё. По мере работы я могу обновлять эту статью или добавлять интересные приёмы в новых материалах под тегом разработка.