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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Готово!

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

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

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

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

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

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

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

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

javascript - Для создания версии для слабовидящих

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

что вам нужно знать

Как сделать веб-сайт для слабовидящих

Современная веб-разработка сильно отличается от веб-разработки начала 2000-х.

Спрос на создание веб-сайтов для слабовидящих людей растет в Европе и Северной Америке. Учитывая то, как веб-сайты развивались до сих пор, можно легко утверждать, что они созданы только для людей с надлежащими визуальными способностями. Это плохой способ.

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

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

Веб-сайты, предназначенные для слабовидящих: Prehistory

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

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

Подумайте только об этих цифрах: по данным Всемирной организации здравоохранения ООН, в мире около 124 людей с нарушением зрения и 39 миллионов слепых, что больше, чем все население Канады (37 миллионов человек), и почти догнало их. с населением.

В 1996 году во время следующего собрания Консорциума World Wide Web обсуждалась инициатива по улучшению доступности сети.Вопрос оказался весьма актуальным и поддержали Adobe, Microsoft и IBM.

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

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

Кому нужна разработка сайта для слабовидящих?

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

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

  • миопия;
  • катаракта;
  • глаукома;
  • астигматизм;
  • дальтонизм;

Обеспечение доступности вашего веб-сайта: требования

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

А теперь подробнее о требованиях к участку для слабовидящих.

Первое важное правило касается заметности ресурса.

В эту концепцию входят:

  1. Ваши посетители могут выбрать - прочитать, настроить цвет фона, на котором будет размещаться информация, а также выбрать оптимальный цвет текстового блока.
  2. Ширина текста не превышает 80 символов, выравнивание по ширине окна или блока не допускается.
  3. Размер шрифта можно без проблем увеличить в 2 раза и даже больше.И все это с сохранением той же функциональности и без появления ползунка горизонтальной прокрутки.
  4. Требуемые параметры контраста не менее 4,5: 1.
  5. Межстрочный интервал - полтора и даже больше, а расстояние между абзацами более чем в полтора раза превышает выбранный межстрочный интервал.

Второе важное требование - работоспособность.

Сюда входят следующие пункты:

  1. Простота и удобство навигации, определение положения пользователя на различных страницах веб-ресурса - одни из основных приоритетов при разработке современного веб-сайта.
  2. Для пользователей, которые управляют сайтами с помощью клавиатуры, важно сделать текущий фокус видимым, а функции - доступными.
  3. Пропустите повторяющийся блок, чтобы быстро перейти к основной информации веб-страницы.

Следующий важный момент - ясность.

Это означает:

  1. Нет никаких «сюрпризов» со стороны веб-страниц, которые должны вести себя предсказуемо;
  2. Пользователю удобно осуществлять ввод данных на сайте;
  3. Само содержание сайта, все его содержимое легко читается и интуитивно понятно.
  4. В понятие надежности сайта входит его совместимость с различными платформами и браузерами, а также со специальными технологиями для людей с проблемами зрения.

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

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

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

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

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

.

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

Еще несколько лет назад в мире насчитывалось около 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

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

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

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

.

html - «Отображение» сообщения для слепых и слабовидящих посетителей

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

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

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

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

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