Как на сайт установить версию для слабовидящих


Как сделать версию сайта для слабовидящих и установить на сайт

С 1 января 2016 года образовательные учреждения и государственные организации должны оснастить свои сайты версией для слабовидящих.

«Порядок обеспечения условий доступности для инвалидов по зрению официальных сайтов федеральных органов государственной власти, органов государственной власти субъектов Российской Федерации и органов местного самоуправления в сети "Интернет" устанавливается уполномоченным Правительством Российской Федерации федеральным органом исполнительной власти.»

Источник: Изменения в Статье №10 ФЗ-8 от 9 февраля 2009 года.

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

Что такое версия для слабовидящих?

Это специальная версия сайта адаптированная для людей у которых есть трудности со зрением. Говоря простым языком: на сайте должны использоваться контрастные цвета (например черный и белый цвет), шрифты должны быть крупными, отсутствовать мелкие декоративные элементы, усложняющие восприятие сайта.

Если же изучать тему с формальной точки зрения, то существует ГОСТ Р 52872-2012 «Интернет-ресурсы. Требования доступности для инвалидов по зрению.». Согласно этому документу существует несколько стандартов, доступности информации, например «Уровень А — уровень минимальной доступности. Позволяет инвалиду по зрению обеспечить доступность к интернет-ресурсу без потерь информации».

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

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

Можно ли установить версию для слабовидящих бесплатно?

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

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

Как выглядит версия для слабовидящих на конструкторе сайтов Nubex

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

При нажатии на эту кнопку, открывается специальная панель управления шрифтами и цветами сайта для инвалидов по зрению, а сам сайт перекрашивается, убираются лишние декоративные элементы, шрифт упрощается и становиться крупнее. 

Посмотреть, как выглядит рабочая версия для слабовидящих на Nubex, можно на примере сайта для детского садика.

Как установить на сайт версию для слабовидящих?

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

  1. Для этого зайдите в главное меню системы управления сайтом: «Документы сайта» -> Колонка № 1. 
  2. Нажмите на голубую стрелочку внутри кнопки «создать текстовый блок» в выпадающем списке выберите «Создать ссылку на версию для слабовидящих». 
  3. Ссылка на версию отобразиться в левой колонке вашего сайта (можно переместить ее повыше используя кнопку «Изменить порядок».

Готово!

Если на вашем сайте дизайн настроен таким образом, что левая колонка отсутствует на главной, вам придется ее включить. Для этого зайдите в раздел «оформление» -> «настроить тему» -> «настройка композиции» -> в блоке «Разбивка центрального поля главной страницы» выберите вариант с двумя колонками (узкая колонка слева L2).

Что если у меня сайт сделан на другой платформе?

Если же сайт учреждения работает на другой платформе, где до сих пор не подключена подобная версия, то вы можете легко перенести его на современную платформу Nubex. Чтобы сделать это, не нужно быть программистом или обладать специальными знаниями. Достаточно будет посмотреть несколько коротких понятных видеоуроков. В целом создание сайта и перенос основной информации занимает не более 1 часа.

При переходе на Nubex версия для слабовидящих уже будет активирована. Также мы можем сделать вам предложение за небольшую плату перевести ваш сайт под ключ на нашу платформу.

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

Преимущество работы с конструктором сайтов Nubex

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

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

Для слабовидящих плагин

Необходимо: {% styles%} {% scripts%} и jquery

Пример добавления ссылки на навигационную панель

  

Пример кнопки добавления на страницу

 title = "Демонстрация" url = "/" layout = "по умолчанию" is_hidden = 0 [для слабовидящих] title = "Для слабовидящих" class = "btn btn-primary" == 
{% component 'forvisuallyimpaired'%}

.

veks / button-visually-impaired-wordpress: Плагин для слабовидящих

перейти к содержанию Зарегистрироваться
  • Почему именно GitHub? Особенности →
    • Обзор кода
    • Управление проектами
    • Интеграции
    • Действия
    • Пакеты
    • Безопасность
    • Управление командой
    • Хостинг
    • мобильный
    • Истории клиентов →
    • Безопасность →
.

tekvision / brails: Brails - это обучающий сайт для слабовидящих

перейти к содержанию Зарегистрироваться
  • Почему именно GitHub? Особенности →
    • Обзор кода
    • Управление проектами
    • Интеграции
    • Действия
    • Пакеты
    • Безопасность
    • Управление командой
    • Хостинг
    • мобильный
    • Истории клиентов →
    • Безопасность →
  • Команда
  • Предприятие
  • Проводить исследования
.

Как создать приложение для специальных возможностей для слабовидящих?

Еще несколько лет назад в мире насчитывалось около 285 миллионов людей с нарушениями зрения, и сейчас их число растет и, как ожидается, к 2050 году достигнет 115 миллионов.

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

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

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

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

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

Но прежде чем мы отправимся туда, давайте попробуем себя в роли слабовидящих и посмотрим, что они видят.

Дальтонизм

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

Помимо цветовой слепоты, заболевания, которым страдает каждый 12-й мужчина и 1 из 200 женщин в мире, существует ряд проблем со зрением, на которые вам придется обратить внимание, когда вы будете работать над разработкой приложений для обеспечения доступности.

Позвольте нам теперь показать вам, что видят разные люди с нарушениями зрения, сделав вас слабовидящими на следующие 2 минуты с помощью расширения NoCoffee Vision Simulator для Chrome.

Вот как выглядит сайт WordPress для обычного пользователя

Лицам с потерей зрения

Человеку с периферическим зрением

Человеку с призрачным зрением

Для тех, кто видит большие пятна

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

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

Теперь, когда вы встали и вышли из той же обуви, что и миллион ваших слабовидящих пользователей, и лично стали свидетелями их разочарования и ваших недостатков, пора взглянуть на решение - Как сделать свое мобильное приложение доступным для слабовидящих ?

Как создать впечатление от мобильного приложения для слабовидящих?

1.Используйте УВЕЛИЧЕННЫЙ ТЕКСТ в Abundance

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

2. Используйте замещающий текст для изображений в Surplus

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

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

[По теме: Mobile Ears - мобильное приложение для людей с нарушениями слуха]

В этом контексте становится чрезвычайно важным, чтобы вы использовали очень информативный текст, объясняющий, что происходит на изображении, вместо 4/5 слов, когда вы разрабатываете для слабовидящих.

3. Остерегайтесь контрастов

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

Выбирая контраст, убедитесь, что коэффициент контрастности между текстом и фоном составляет не менее 4: 5: 1.

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

  • зеленый и красный
  • Светло-зеленый и желтый
  • Синий и фиолетовый
  • Зеленый и коричневый
  • зеленый и синий
  • Зеленый и черный
  • зеленый и серый
  • Синий и серый

4. Сделайте текстуры своим другом

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

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

5. Воздержитесь от использования только цветов для передачи информации

Разве у всех нас не было случая, когда мы заполняли форму и случайно вводили неверную информацию, из-за которой поле становилось красным? В то время как вся ситуация была встроена в наше цифровое путешествие, представьте себе человека, которому трудно понять цвета, столкнувшегося с ситуацией.Представьте, как они будут бороться, не зная, что они делают неправильно, просто потому, что не видят на экране красного поля.

Решение этой дилеммы довольно простое и даже эстетически привлекательное - использование значков, вибраций и текста для отображения всех правильных и неправильных действий, предпринятых пользователем в приложении.

6. Сделайте минимализм вашим мобильным приложением для обеспечения доступности Принцип проектирования

Создаете ли вы приложение для специальных возможностей Android или приложение для iPhone, если есть хоть один элемент, который может сделать ваше мобильное приложение магнитом для слабовидящих пользователей, то это минимализм.Секрет, который заключается в предоставлении пользователям максимального минимума с точки зрения дизайна, имеет двоякое преимущество: A. Пользователи с ослабленным зрением получают незабываемые впечатления, и B. Ваши визуально сильные пользователи также будут любить работать с белым пространством в применение.

7. Сделайте темный режим своим спутником

Этот элемент будет наиболее удобен, когда в вашем мобильном приложении много текстов. Пользователям с ослабленным зрением будет намного легче читать контент в темном режиме, чем в светлом режиме в вашем приложении.

Здесь следует отметить, что если вы создаете приложение для специальных возможностей Android, вам нужно будет реализовать дизайн темного режима , но если вы разрабатываете приложение для специальных возможностей для iOS, вы убедитесь, что ваша команда разработчиков работает над приложение, совместимое с функцией Smart Invert Colors.

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

Ну, поехали -

Рекомендации по обеспечению доступности мобильных приложений - Контрольный список

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

Что такое Тестирование доступности ?

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

По мере того, как вы улучшаете специальные возможности в своем мобильном приложении, вы можете использовать приложение сканера специальных возможностей, доступное в Play Store. Но наш опыт подсказывает нам, что тестирование доступности для пользователей с ослабленным зрением часто бывает неполным, пока вы не представите свое приложение реальным пользователям. Хотя инструменты тестирования доступности для мобильной разработки могут пригодиться, никогда нельзя быть слишком уверенным.

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

Навигация, дизайн с несколькими браузерами и воспринимаемый контент - это всего лишь несколько вещей, к которым вам нужно будет подготовить свое приложение, чтобы гарантировать, что ВСЕ пользователи, посещающие ваше приложение, независимо от того, имеют ли они зрение 20/20 или дальтонизм, имеют отличный опыт.

Теперь, когда вы все это видели, осталось сделать только одно - избавиться от ошибочного предположения, что эти улучшения доступности в вашем мобильном приложении будут касаться только пользователей с ослабленным зрением, и понять, что они принесут пользу всем - как и ВСЕМ вашим пользователям Приложение будет приятным для глаз.

Ну вот. Теперь вы готовы запустить на рынок свое приложение для специальных возможностей и охватить всех пользователей, которые неосознанно остались позади.

Судип Шривастав

Генеральный директор, Appinventiv

В поисках стратегических сессий ?.

Позвольте нам полностью разобраться в вашем бизнесе и помочь вам разработать
стратегий вашего цифрового продукта.

Статьи по теме:

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий