В современном цифровом мире доступность информации является ключевым аспектом, который должен учитываться при разработке веб-сайтов. Одной из наиболее уязвимых групп пользователей являются слабовидящие люди, для которых стандартные версии сайтов могут представлять значительные трудности.
Создание специальных версий сайтов, адаптированных для нужд таких пользователей, становится не просто хорошей практикой, а необходимостью.
Почему это важно?
1. Инклюзия и равные возможности: Доступность веб-сайтов для слабовидящих людей способствует инклюзии, позволяя им получать информацию и услуги наравне с другими пользователями. Это важный шаг к созданию общества, в котором каждый имеет равные права.
2. Соответствие стандартам: Многие страны имеют законодательные нормы, требующие от веб-сайтов соблюдения стандартов доступности, таких как WCAG (Web Content Accessibility Guidelines). Создание специальных версий сайтов помогает соответствовать этим требованиям и избежать юридических последствий. В нашей стране это требования к образовательной лицензии, например.
3. Широкая аудитория: Учитывая, что около 2,7 миллиарда людей по всему миру имеют проблемы со зрением, создание доступных версий сайтов открывает новые возможности для бизнеса. Это не только увеличивает аудиторию, но и улучшает имидж компании, демонстрируя ее социальную ответственность.
4. Улучшение пользовательского опыта: Специально адаптированные версии сайтов могут значительно улучшить опыт взаимодействия для всех пользователей, не только для слабовидящих. Использование четкого шрифта, контрастных цветов и навигации с помощью клавиатуры делает сайт более удобным и понятным.
2. Соответствие стандартам: Многие страны имеют законодательные нормы, требующие от веб-сайтов соблюдения стандартов доступности, таких как WCAG (Web Content Accessibility Guidelines). Создание специальных версий сайтов помогает соответствовать этим требованиям и избежать юридических последствий. В нашей стране это требования к образовательной лицензии, например.
3. Широкая аудитория: Учитывая, что около 2,7 миллиарда людей по всему миру имеют проблемы со зрением, создание доступных версий сайтов открывает новые возможности для бизнеса. Это не только увеличивает аудиторию, но и улучшает имидж компании, демонстрируя ее социальную ответственность.
4. Улучшение пользовательского опыта: Специально адаптированные версии сайтов могут значительно улучшить опыт взаимодействия для всех пользователей, не только для слабовидящих. Использование четкого шрифта, контрастных цветов и навигации с помощью клавиатуры делает сайт более удобным и понятным.
Как реализовать вставкой html-кодом в конструкторе Тильды
Код для вставки в секцию head:
<script src="https://lidrekon.ru/slep/js/uhpv-full.min.js"></script>
________________________________
Код кнопки разместить в любом месте html-страницы:
<a id="specialButton" href="#"><img src="https://lidrekon.ru/images/special.png" id='glazd' alt="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ" title="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ" /></a>
<style>
@media screen and (max-width: 980px) {
#glazd {
position:absolute;
top:10px;
right:100px;
z-index: 99999;
width:50px;
}
}
@media screen and (min-width: 980px) {
#glazd {
position:absolute;
top:20px;
left:50px;
z-index: 99999;
width:50px;
}
}
</style
>
Но этот код будет с глазиком, который при скролле, а если у вас меню скролится, то глазик уедет потому что фиксирован на странице и его ниже уже не могут увидеть пользователи. Я пошла другим путем, и установила html-код такой в header для каждой страницы (тут важно, что position:fixed и есть разные версии адаптива). В этой версии глазик - версия сайта для слабовидящих скролится вместе в меню при перемещении на страницах:
<a id="specialButton" href="#"><img src="https://lidrekon.ru/images/special.png" id='glazd' alt="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ" title="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ" /></a>
<style>
@media screen and (max-width: 980px) {
#glazd {
position:fixed;
top:20px;
left:15px;
z-index: 99999;
width:50px;
}
}
@media screen and (min-width: >640px) {
#glazd {
position:fixed;
top:20px;
left:10px;
z-index: 99999;
width:50px;
}
}
@media screen and (min-width: 480px) {
#glazd {
position:fixed;
top:20px;
left:150px;
z-index: 99999;
width:50px;
}
}
</style
>
Вот что получилось. "Глазик" перемещается вместе с меню при скролле и всегда доступен для перехода в адаптивную верстку для слабовидящих людей.
Коды для адаптива для слабовидящих можно скопировать на сайте https://lidrekon.ru/slep/
Платное решение установки версии адаптива сайта для слабовидящих людей
Так как "глазик" версий сайта для слабовидящих не всегда удобно размещается в свободном месте, где отсутствует логотип или меню, но его размещение очень важно, пришлось воспользоваться другим решением, тоже для адаптива версии сайта для слабовидящих - это кнопка внизу с надписью Версия для слабовидящих. Сайт примера https://fizika-5-online.ru/ по подготовки школьников к ЕГЭ по физике на онлайн-платформе.
Заключение
Создание версий сайтов для слабовидящих людей — это важный шаг к обеспечению доступности и равенства в цифровом мире. Инклюзивный дизайн не только соответствует современным стандартам, но и открывает новые возможности для бизнеса, улучшая пользовательский опыт и расширяя аудиторию. Важно помнить, что доступность — это не просто опция, а необходимый элемент современного веб-дизайна.
Всем хорошего настроения! 🌹
Всем хорошего настроения! 🌹