Версия сайта для слабовидящих
Как сделать сайт почти осязаемым и в каких случаях придётся подружиться с контрастными шрифтами и аудиоозвучкой (по-хорошему, во всех)
В России проживает более миллиона слепых и слабовидящих людей, а легкие расстройства вроде близорукости есть у каждого второго. Интернет подстраивается под таких людей: у Windows есть функция экранного диктора, существуют программы для озвучки текста вроде Text To Speech Maker или для его увеличения на экране, например, MAGic.
Создатели сайтов тоже могут позаботиться о слабовидящих и сделать для них специальную версию сайта: с повышенной контрастностью, увеличенным шрифтом и другими особенностями. Для людей с ограничениями — это хороший способ получать информацию легче и быстрее. А мы подскажем в статье, что конкретно нужно.
Создатели сайтов тоже могут позаботиться о слабовидящих и сделать для них специальную версию сайта: с повышенной контрастностью, увеличенным шрифтом и другими особенностями. Для людей с ограничениями — это хороший способ получать информацию легче и быстрее. А мы подскажем в статье, что конкретно нужно.
Каким сайтам обязательно нужна версия для слабовидящих
В 2016 году был принят закон против дискриминации инвалидов, так что версия для слабовидящих должна быть у любого сайта. Но на деле за этим следят только на сайтах государственных учреждений, школ, институтов и больниц.
Такая версия усилит любой сайт и поможет привлечь дополнительную аудиторию: чем больше контент адаптирован под людей с ограничениями, тем чаще они посещают ресурс. Но действительно она нужна только тем, кто регулярно имеет дело с инвалидами по зрению:
Такая версия усилит любой сайт и поможет привлечь дополнительную аудиторию: чем больше контент адаптирован под людей с ограничениями, тем чаще они посещают ресурс. Но действительно она нужна только тем, кто регулярно имеет дело с инвалидами по зрению:
- салонам оптики и клиникам, в которых предлагают коррекцию зрения;
- больницам и частным окулистам;
- госучреждениям;
- социальным и образовательным учреждениям.
Если вы разрабатываете именно такой сайт, то заложить отдельную версию в проект нужно обязательно. В других случаях такую функцию можно добавить, если позволяет время и деньги.
За отсутствие версии можно получить штраф до 3 тысяч рублей для физических лиц и до 100 тысяч для юридических.
За отсутствие версии можно получить штраф до 3 тысяч рублей для физических лиц и до 100 тысяч для юридических.
Какой должна быть версия сайта для слабовидящих
Вообще на этот случай есть ГОСТ Р 52 872−2012 «Интернет-ресурсы. Требования доступности для инвалидов по зрению», который описывает все нюансы, а также международные стандарты Web Content Accessibility Guidelines (WCAG 2.0.) — от W3C, Section 508 Standards — США, WaSP — Великобритания, DAL — Дания. Чтобы соблюсти законы, хватит ГОСТа, да и в целом он требует только необходимое.
Требования ГОСТ к версии для слабовидящих
У всей важной информации должен быть текстовый аналог, то есть описания к изображениям и элементам фона. Сами изображения можно отключить.
— Капча обязательно должна иметь аудио-версию (к капче Гугла «Я не робот» это не относится — там только галочка ставится)
— Все основные страницы (например, «Главная» или «Контакты») должны быть не длиннее двух-трех экранов.
— Размер шрифта должен увеличиваться в два раза. При увеличении на странице не должна появляться горизонтальная полоса прокрутки.
— Внутри главного контента (статей, новостей, рецензий) не должно быть вставок постороннего, например, блока «другие новости по этой теме» посреди самой новости.
— Цвета нельзя использовать как элемент передачи информации.
— Коэффициент контрастности должен быть не меньше 7 к 1. Можно проверить сочетаемость онлайн на сайте BL2 — если в графе АА стоит «да», то цвета подходят.
— Пользователь должен иметь возможность выбрать цвета переднего плана и фона: черный на белом, белый на черном, темно-синий на голубом или коричневый на бежевом.
— Любые действия на сайте можно совершать только с клавиатуры, без ограничения по времени — ничего не должно открываться внезапно и перенаправлять куда-то само через несколько секунд.
— Капча обязательно должна иметь аудио-версию (к капче Гугла «Я не робот» это не относится — там только галочка ставится)
— Все основные страницы (например, «Главная» или «Контакты») должны быть не длиннее двух-трех экранов.
— Размер шрифта должен увеличиваться в два раза. При увеличении на странице не должна появляться горизонтальная полоса прокрутки.
— Внутри главного контента (статей, новостей, рецензий) не должно быть вставок постороннего, например, блока «другие новости по этой теме» посреди самой новости.
— Цвета нельзя использовать как элемент передачи информации.
— Коэффициент контрастности должен быть не меньше 7 к 1. Можно проверить сочетаемость онлайн на сайте BL2 — если в графе АА стоит «да», то цвета подходят.
— Пользователь должен иметь возможность выбрать цвета переднего плана и фона: черный на белом, белый на черном, темно-синий на голубом или коричневый на бежевом.
— Любые действия на сайте можно совершать только с клавиатуры, без ограничения по времени — ничего не должно открываться внезапно и перенаправлять куда-то само через несколько секунд.
Самые частые болезни глаз, при которых нужна специальная версия сайта
— близорукость,
— астигматизм,
— дальтонизм,
— миопия,
— катаракта,
— глаукома.
— астигматизм,
— дальтонизм,
— миопия,
— катаракта,
— глаукома.
Это версия для слабовидящих сайта http://special.kremlin.ru/events/president/news. На ней соблюдены все требования ГОСТ
Соблюсти все требования сложно: на это уйдет много времени и денег. Но на практике достаточно добавить несколько функций, которые упростят чтение. Сложность в том, что их нужно объединить в одну версию — по отдельности функции добавить не получится.
Как сделать версию сайта для слабовидящих
Это не всегда просто, во многих случаях сайт нужно переверстать заново. Чтобы создать версию для слабовидящих достаточно добавить на сайт три переключателя:
— изменение размера шрифта, его типа и межстрочного интервала;
— изменение цветовой схемы;
— включение/отключение изображений.
Будет проще, если на основном сайте сразу сделана хорошая верстка, можно управлять всем с клавиатуры и нет посторонних включений в основном контенте.
Можно пойти сложным путем — повесить версию сайта со всеми переключателями на отдельный поддомен и по кнопке просто перебрасывать пользователя на него. Так сделано на сайте Президента РФ. Это усложняет администрирование и увеличивает расходы. А еще, как один из вариантов — можно записывать куки пользователя и при следующем переходе на сайт перенаправлять его на поддомен.
Второй вариант — оставлять пользователя на той же версии, но сразу изменять дизайн сайта под более контрастный при нажатии на кнопку переключения. Так сделано на сайте офтальмологической клиники «Эксимер». Такой вариант переключает пользователя на специальную тему, которая быстро загружается и не засоряет основной код.
Более изящное решение — обычная панель с переключателями, которая открывается по нажатию кнопки, как, например, на сайте новосибирского ВУЗа СибГУТИ.
— изменение размера шрифта, его типа и межстрочного интервала;
— изменение цветовой схемы;
— включение/отключение изображений.
Будет проще, если на основном сайте сразу сделана хорошая верстка, можно управлять всем с клавиатуры и нет посторонних включений в основном контенте.
Можно пойти сложным путем — повесить версию сайта со всеми переключателями на отдельный поддомен и по кнопке просто перебрасывать пользователя на него. Так сделано на сайте Президента РФ. Это усложняет администрирование и увеличивает расходы. А еще, как один из вариантов — можно записывать куки пользователя и при следующем переходе на сайт перенаправлять его на поддомен.
Второй вариант — оставлять пользователя на той же версии, но сразу изменять дизайн сайта под более контрастный при нажатии на кнопку переключения. Так сделано на сайте офтальмологической клиники «Эксимер». Такой вариант переключает пользователя на специальную тему, которая быстро загружается и не засоряет основной код.
Более изящное решение — обычная панель с переключателями, которая открывается по нажатию кнопки, как, например, на сайте новосибирского ВУЗа СибГУТИ.
Панель открывается при нажатии на текст «Версия для слабовидящих», внутри уже можно редактировать нужные параметры.
Можно написать эти переключатели для CSS на JavaScript самостоятельно. Однако у некоторых CMS есть готовые решения: модули Template Selector и Fast Font для Joomla, плагины Comfortable Reading или For the visually impaired для Wordpress.
У системы школьных сайтов edusite.ru модуль включен по умолчанию. В сети продаются и выкладываются бесплатно и готовые скрипты для тех CMS, где их нет, или для сайтов без CMS.
У системы школьных сайтов edusite.ru модуль включен по умолчанию. В сети продаются и выкладываются бесплатно и готовые скрипты для тех CMS, где их нет, или для сайтов без CMS.
Как сделать сайт удобным для слабовидящих без отдельной версии
Если отдельную версию по закону вам делать не обязательно, а бюджета для нее нет, можно обойтись и без нее. Почти все инвалиды по зрению пользуются специальными программами, читающими текст с экрана, и здесь в ваших силах облегчить таким программам работу.
Самое главное — прописать всем картинкам атрибут Alt. Программы читают именно его, и если иллюстрации в вашем тексте важны, пользователь сможет понять, что на них изображено.
Второе правило — делайте понятные названия страниц и заголовков. Первым делом программа зачитывает именно название страницы, и уже на его основании пользователь решает, стоит ли «смотреть» страницу дальше. Заголовки тоже иногда прослушиваются первым делом, еще до «чтения», так что их нужно делать информативными и обязательно правильно оформлять тегами <h>.
Самое главное — прописать всем картинкам атрибут Alt. Программы читают именно его, и если иллюстрации в вашем тексте важны, пользователь сможет понять, что на них изображено.
Второе правило — делайте понятные названия страниц и заголовков. Первым делом программа зачитывает именно название страницы, и уже на его основании пользователь решает, стоит ли «смотреть» страницу дальше. Заголовки тоже иногда прослушиваются первым делом, еще до «чтения», так что их нужно делать информативными и обязательно правильно оформлять тегами <h>.
Какие проблемы есть с версиями для слабовидящих
Даже если сделать все по ГОСТу, слабовидящим часто будет неудобно пользоваться сайтом. Главная проблема — слишком маленький размер кнопки. Часто заметить ее трудно даже с обычным зрением.
На сайте президента РФ, который мы ставили в пример выше, кнопка вообще находится в подвале, да и там она не сразу бросается в глаза
У некоторых сайтов есть отдельный поддомен, например, http://special.kremlin.ru (на него даже перенаправляет автоматически), но часто на этот поддомен сложно попасть. Это значит, что при переходе на сайт из поиска версию нужно будет каждый раз включать заново, что в сочетании с труднозаметной кнопкой довольно сложно. Гораздо удобнее было бы, если бы сайт сохранял куки и сразу показывал слабовидящему подходящую версию.
Ну и третья проблема заключается в том, что для людей с совсем слабым зрением или полностью слепых всех этих мер недостаточно — сайты для них по-прежнему недоступны без сторонних программ. У сайта Пенсионного фонда ситуация чуть лучше — есть встроенный диктор, который озвучивает содержимое. Но это очень сложно в реализации, поэтому в большинстве своем сайты обходятся изменением шрифта и контрастности, чего хватает не всем инвалидам по зрению.
Ну и третья проблема заключается в том, что для людей с совсем слабым зрением или полностью слепых всех этих мер недостаточно — сайты для них по-прежнему недоступны без сторонних программ. У сайта Пенсионного фонда ситуация чуть лучше — есть встроенный диктор, который озвучивает содержимое. Но это очень сложно в реализации, поэтому в большинстве своем сайты обходятся изменением шрифта и контрастности, чего хватает не всем инвалидам по зрению.
У сайта ПФР вообще довольно широкая панель настроек, в которой в том числе есть звуковой ассистент
Сайты в интернете определенно нужно адаптировать для слабовидящих. Это сложно, способов — множество, но на каком-то нужно остановиться. Если вы хотите повернуть сайт лицом к людям с ограниченными возможностями, сначала изучите опыт тех, кто делал это до вас, посмотрите документацию и требования ГОСТ, а затем послушайте людей, ведь именно для них сайт и делается. А подходящий инструмент можно найти для каждого проекта, каким бы он сложным ни выглядел.