Адаптация веб сайтов по программе Доступная среда
Краткий курс по созданию Веб сайтов адаптированных для людей с ограниченными возможностями по программе Доступная Среда
Курс «Прототипирование и дизайн контента для людей с ограниченными возможностями» в веб пространстве, материалы подготовлены специалистами компании Росопека - Доступная Среда помогут понять, как разрабатывать интерфейсы веб сайтов для решения проблем пользователей с нарушением зрения и слуха.
Курс рассчитан на 4 недели и одна неделя полностью посвящена доступной среде, универсальному дизайну и доступности веб-пространства.
Делимся с вами основными находками блока «Доступная среда и доступность», который состоит из 9 видео:
- Вступление в универсальный дизайн доступной среды(29 минут)
- Доступная среда: Сенсорные нарушения (40 минут)
- Доступная среда: Когнитивные нарушении (12 минут)
- Доступная среда: Физические нарушения (15 минут)
- Доступная среда: Стандарты и инструменты (28 минут)
- Среда для людей старшего возраста (10 минут)
- Универсальный дизайн для детей
- Универсальный дизайн, социальные и экономические различия (18 минут)
- Самопомощь для людей с низкой грамотностью (25 минут)
Вступление в доступную среду
Большинство людей считает, что сделать веб-пространство доступным для человека с инвалидностью - это создать специальную адаптированную версию. Но если дизайн разрабатывается с учетом принципов универсального дизайна, то создавать адаптированные версии не требуется.С юридической точки зрения разные страны имеют разное законодательство относительно доступности веб-пространства. И с моральной точки зрения, так же как и физическое пространство, веб-пространство должно быть доступным для всех. Интересно, что часто дизайн, доступный для людей с инвалидностью, становится удобным для большинства людей. Вот несколько примеров.
Во многих странах сегодня бордюры на пешеходных переходах занижены. Так было не всегда. Но сейчас они используются не только людьми инвалидностью, но и велосипедистами, родителями с колясками, и тому подобное.
Другой пример - текстовые субтитры. Они делают видео-контент доступным для людей с нарушениями слуха и субтитры также используют люди, которые изучают иностранный язык через просмотр видео, читая текст на иностранном языке - это очень удобно.
В экстренных ситуациях оповещения об опасности включает не только громкий звук, а еще яркий свет. Это позволяет привлечь внимание, например, людей в наушниках.
Другие примеры того, как среду для отдельных категорий людей сделать комфортной для всех приводим далее.
Сенсорные нарушения (нарушение зрения и слуха)
Так как некоторые элементы веб-пространства не является доступным для всех пользователей (цвет, звук и т.д.), дизайнеры могут решить не использовать их вообще. Однако для того, чтобы достичь наилучшего результата, необходимо всякий раз комбинировать различные функции, предоставить альтернативные способы восприятия и обеспечить доступность информации для всех.
Когнитивные нарушения
Наверное, многие слышали о понятии «сложности с обучением». К сожалению, это часто приравнивают к низкому IQ, тогда как сложности с обучением - это трудности получения, хранения и поиска информации. Для того, чтобы облегчить работу с информацией ее важно подавать в простой форме, как, например, вместо длинного предложения с запятыми и перечислением, использовать перечень пунктов в столбик. Это поможет быстро получать информацию всем. По хранению информации - необходимо ее делать разнообразной, потому что так, ее легче запоминать.
Маломобильность
Когда мы говорим о маломобильности, существует большое количество возможных ситуаций, в которых практически каждый становится маломобильным. Один из примеров - мелкие кнопки, будет трудно нажимать людям с нарушениями моторики рук, но также и людям, которые едут в автомобиле, из-за выбоин на дороге.
Выводы
Основная цель применения принципов доступной среды - улучшить пользовательский опыт для всех людей. Некоторые из рекомендаций по доступности, которые будут рассмотрены являются коммерческими инструментами и стандартами юзабилити для разных платформ (например, Android или iOS). Важным является осознание того, что речь идет о комфортное использование веб-пространства для каждого, а не для отдельной категории людей.
Доступная среда: сенсорные нарушения (нарушение слуха и зрения)
В этом разделе расскажем как сделать так, чтобы ваши интерфейсы были удобными для пользователей с нарушениями зрения или слуха.
Визуальный контент. Если вы предоставляете визуальный материал без альтернативного способа восприятия, некоторые люди не смогут получить эту информацию. Люди с нарушениями зрения используют программы экранного доступа, так называемые "экранные читатели" Jaws и т.д. или "скрин ридеры", считывающие только текстовую информацию с экрана. Они конвертируют текст в звуковую речь.
Поэтому важно, чтобы к изображениям и видео был установлен текст замещения или альтернативный текст (атрибут alt тега image). Это описание должно быть очень лаконично. Например, текст замещения для логотипа - это просто название компании. Но для пиктограмм и кнопок текст замещения должен объяснять функцию элемента (не просто "кнопка" или "иконка", а их действие). Стоит отметить, что тексты замещения могут быть полезны тем, кто использует голосовые помощники (Алиса от Яндекс, Google Assistant для Android, Siri для IOS, Alexa от Amazon, Cortana для Windows и другие). Пользователь с помощью своего голоса управляет интерфейсом. И если значок, который необходимо выбрать, не имеет текста замещения, голосовой помощник не сможет идентифицировать его.
Текстовое описание улучшает восприятие визуальной информации для всех. Если вы покажете на лекции в университете смешное изображение и опишите его словами, это привлечет внимание студентов. Им будет легче быстро понять предмет. А также изображение можно будет найти в интернете, так как именно текст делает визуальную информацию удобной для поиска.
Диаграммы и графики. Существует много фитнес приложений, использующих яркую инфографику для обозначения веса, пульса, температуры и прочего. Чем сложнее эти диаграммы, тем сложнее их распознает программа экранного доступа. Чтобы упростить использование инфографики программам экранного доступа можно предоставлять информацию в двух альтернативных вариантах: визуальном и текстовом или добавить ссылку на отдельную таблицу использованных данных, которую Jaws легко считает. Интересное решение - приложение, в котором, в зависимости от ориентации экрана (портретное, пейзажное), используется 2 разных вида предоставления информации - текст или диаграмма.
Элементы checkbox и radiobutton. Неправильное их кодирование вызывает много проблем для программ экранного доступа. Необходимо, чтобы в коде лейбл (подпись) был прикреплен к области нажатия. Также хорошее решение - лейблы, является частью области нажатия, потому что многим пользователям сложно попасть в маленькую кнопку.
ПО экранного увеличения масштаба изображения программа MAGic Pro. Чтобы увеличить страницу можно нажать ctrl + или другую комбинацию, в зависимости от браузера. Часто эту функцию используют люди с нарушениями зрения. Предположим, вы заполняете длинную форму. Нажимаете на кнопку "Отправить", и ничего не происходит. Это происходит из-за того, что в одном из первых заполненных полей ошибка. Но ее невозможно увидеть, потому что она осталась далеко вверху страницы. А теперь представьте, что масштаб страницы этой формы был увеличен в 16-20 раз на малом размере экрана. Поле с ошибкой будет найти еще сложнее. Поэтому такие ситуации необходимо предусматривать заранее. Например, длинную форму для заполнения можно разделить на несколько мелких форм.
Существует много платформ, поддерживающих пользователей с нарушениями зрения. Операционные системы Android и iOS имеют встроенные функции доступности на базе WCAG (web content accessibility guidelines). Хорошая новость заключается в том, что часто обеспечение доступности в общем не влияет на визуальный дизайн, часто это касается только кодирования.
Аудио-контент. Чтобы сделать звуковые материалы доступными необходимо добавить субтитры. Они облегчат поиск информации и будут удобными не только для людей с нарушениями слуха. Часто читать текст подкастов комфортнее, чем слушать - можно пропускать то, что не интересно, и усваивать информацию в своем темпе.
Звуковые оповещения. На многих телефонах сейчас можно выбрать звук, вибрацию и вспышки света для обозначения уведомления. Это удобно в различных ситуациях - при выключенном звуке, или, наоборот, когда человек не видит телефон и реагирует на звук или вибрацию. Мы часто используем будильник, он не только звонит, но и вибрирует. Это удобно многим людям, не только людям с нарушениями слуха. Благодаря вибрации, субтитрам, визуальной информации люди, слушают музыку в наушниках могут одновременно заниматься разной деятельностью.
Выводы
Идея универсальности и доступности заключается в том, что если человек испытывает трудности с тем, чтобы услышать, он может увидеть и усвоить информацию. И наоборот, люди с нарушениями зрения могут прослушать текст. Это помогает многим пользователям в различных случаях: людям в наушниках, тем, кто изучает иностранный язык, тем, кто одновременно делает несколько дел.
Когда вы делаете интерфейс доступным, чаще всего это не влияет на визуальный дизайн, а больше касается кодирования ПО!
Как сделать подкаст с принципами универсального дизайна?
Первую вещь, которую можно сделать - включить текстовые транскрипты ко всем подкастам, которые выходят. Так те, кто не слышит смогут получить информацию. И круто, что это также улучшит поисковую оптимизацию сайта, SEO. То есть ваши подкасты легче будет найти, поскольку в них будет текст. Это то, как Google и другие поисковые системы работают. Если вы публикуете только видео или аудио-контент, им сложно понять о чем именно он. Но, если у вас есть текст, они анализируют текст и говорят: «О, это замечательное место, куда можно направить людей, которые ищут такую информацию». То есть, опять же, это охват большей аудитории и включение тех людей, которые исторически были исключены.
Стандарты веб-доступности - это набор технических стандартов разработанных Консорциумом Всемирной паутины. И это действительно замечательный документ! Действительно полезный для разработчиков, поскольку дает пошаговые инструкции как создать сайт, который доступен для людей с инвалидностью. Очень важный проект, который продолжает обновляться.
Инструменты оценки доступности сайтов - siteimprove.com.
Упрощенная речь. Есть ли она элементом доступной среды и универсального дизайна?
Абсолютно! И это часть доступной среды, которая действительно объединяет абстрактные социальные и политические с неврологическими и психологическими элементами. Я думаю, что упрощенная речь это очень важный компонент, за который мы все должны бороться в мире, который мы производим. И это также хороший способ достижения новой аудитории. Я не перечислю всех раз, когда после прочтения одного параграфа научной работы думал: "Это можно тремя словами сказать». Для чего эти барьеры, если мы можем четко и просто объяснять идеи и концепции? И тогда у нас больше возможностей для того, чтобы углубляться в детали.
Еще один вызов для доступной среды и универсального дизайна с точки зрения языков - это то, что есть некоторые страны, в которых существует 30 - 40 языков. Как адвокаты доступной среды мы до сих пор думаем, что с этим делать. Потому что, если языке говорят несколько сотен или тысяч людей, они должны обладать возможностью получать информацию на этом языке. Как лучше это сделать пока вопрос. Мы надеемся на новое поколение, которое найдет ответы на такие вопросы и реализует его в технологиях.
Команда компании Росопека - Доступная Среда имеет большой опыт работ и готова выполнить проект по адаптации Вашего веб сайта для нужд людей с ограниченными возможностями слуха и зрения. Хотите получить более детальную информацию? Обращайтесь к нашим специалистам по телефону 8 495 133-90-25