Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Согласно данным Всемирной организации здравоохранения, серьезные проблемы со зрением испытывают около 300 миллионов человек на нашей планете. Из них более 40 миллионов являются полностью незрячими.
Это огромная цифра, для сравнения: население Испании составляет всего 60 миллионов человек. По сути, в мире существуют целые «страны», населенные людьми с ограничениями по зрению, которым точно так же хочется общаться, делиться информацией и получать знания из всемирной паутины, как и всем нам.
Проведите эксперимент: закройте глаза и попробуйте воспользоваться Интернетом – прочитать новости на сайте Яндекса, зайти в вашу любимую социальную сеть или записать голосовое сообщение в мессенджере другу. Скорее всего, у вас ничего не получится.
А ведь с подобными проблемами каждый день сталкиваются миллионы слепых людей по всему миру. Итак, как же сделать сайт или приложение более доступными для незрячих и слабовидящих?
Для начала узнаем у них самих, как такие люди взаимодействуют с компьютером и Интернетом.
Как увидеть Интернет. История Алисы.
«Я полностью потеряла зрение, когда мне было 12 лет. Было очень тяжело привыкать к новой жизни, приходилось заново учиться пользоваться компьютером и мобильным телефоном. К счастью, крупные компании, такие как IBM, Google, Сбер и Яндекс давно занимаются проблемами доступности и успешно их решают.
А многие слепые люди благодаря новейшим технологиям получили возможность работать в сети, в том числе программистами и копирайтерами. Сейчас даже появились специальные умные очки, которые сканируют окружающую среду, распознают визуальную информацию и элементы ландшафта и вслух описывают происходящее. Но пока такие технологии еще не доступны для большинства простых людей.
Многие удивляются, как же незрячий человек может прочитать новости в Интернете?
Все дело в том, что мы используем так называемые «скринридеры». Это специальные программы, которые считывают текст с экрана и воспроизводят его синтетическим голосом. Сначала было жутко неприятно слушать этот бездушный механический голос, но спустя годы он уже воспринимается как родной. Мы слушаем текст на очень высокой скорости (4.5х-5х), и это позволяет нам усваивать большие объемы информации.
Не все могут позволить себе приобрести тактильный дисплей, который воспроизводит символы с помощью шрифта Брайля. Но даже платное ПО для экранного доступа (например, JAWS) является вполне доступным для многих пользователей. В крайнем случае, всегда есть бесплатные аналоги с открытым кодом, такие как NVDA.
Почти все скринридеры работают в браузерах Internet Explorer и Firefox. Google Chrome слепые люди используют довольно редко. Он не позволяет читать текст в заполненных формах, и вообще с ним сложно работать. Такая же история с Opera и Яндекс-браузером, хотя сами поисковые системы очень удобные и позволяют легко ориентироваться и воспринимать контент, как и главный сайт Яндекса.
Я, как и многие мои слепые друзья, для общения используем социальные сети – Вконтакте и ее американский аналог, но предпочитаем мобильную версию. Помимо этого мы пользуемся теми же приложениями, что и люди с нормальным зрением: Яндекс Диском и Google Drive, например, для обмена файлами.
Работаем на самых обычных ноутбуках, на моем установлен Windows 10, кстати. С компьютерной мышкой я не работаю, всё делаю с клавиатуры, печатаю десятипальцевым методом. Голосовой ввод тоже часто использую, очень удобно».
Итак, получив представление об основных нюансах взаимодействия слабовидящих и незрячих людей с современными технологиями, мы теперь можем перейти к обсуждению конкретных способов адаптации веб-ресурсов, сайтов и приложений под нужды людей с ограничениями по зрению.
Как адаптировать сайт для дальтоников. Советы Светланы.
«Впервые я узнала, что я дальтоник, в первом классе, когда на уроке рисования учитель попросил раскрасить картинку с животными. Я раскрасила всё очень яркими красками и с гордостью ему показала. Именно тогда и выяснилось, что яркими эти краски казались только мне, и в этот день я впервые услышала от школьного врача слово «дальтонизм».
Но следует разделять полную цветовую слепоту и просто нарушение восприятия цвета. Большинство дальтоников способны различать цвета, но при этом имеют сложности с восприятием оттенков одного цвета.
Как адаптировать ваш сайт или приложение для таких людей, как мы? Это не сложно, достаточно следовать следующим рекомендациям.
Главное правило – следите за тем, чтобы все элементы на сайте были контрастными, потому что мы различаем цвета по яркости. Темный текст на светлом фоне сможет прочитать любой человек с дальтонизмом.
Чем меньше цветов и градиентного фона вы используете в дизайне, тем лучше. Предпочтительнее использовать синий и серый цвет, их воспринимают практически все дальтоники.
Не следует использовать оттенки одного и того же цвета рядом, их нам будет очень трудно различить.
Старайтесь передавать информацию для пользователя визуально, а не цветом. Вместо того, чтобы помечать поле с ошибкой красным цветом, всегда лучше сделать соответствующую иконку с текстом.
Если сомневаетесь, хорошо ли ваш сайт адаптирован для людей с ограничениями по цветовосприятию, проверьте ваш сайт через любое расширение для браузера, симулирующее дальтонизм. Например, можете воспользоваться расширением для Chrome Daltonize».
Как адаптировать сайт для слабовидящих. Советы Ивана.
«Однажды в результате болезни я полностью потерял зрение, но затем через несколько месяцев оно частично восстановилось. И хотя я на прогулках обхожусь без трости, мне довольно сложно воспринимать информацию, когда я пользуюсь многими веб-ресурсами в Интернете.
Тем, кто хочет адаптировать сайт для людей с частичной потерей зрения, я бы посоветовал сделать следующее:
Сделайте шрифт на сайте масштабируемым, чтобы его можно было увеличить по нажатию кнопки. Всегда используйте адаптивную верстку.
Сам контент лучше сделать максимально контрастным по отношению к фону. Этим вы очень сильно облегчите взаимодействие с вашим ресурсом людям с ослабленным зрением.
По возможности сопровождайте любой медиа-контент (фото, видео, некоторые элементы дизайна т.д.) текстовым описанием. Не все слабовидящие могут понять, что изображено на фотографии, а вот текст прочитать получится, в том числе и с помощью программ экранного доступа.
Не используйте капчу с фотографиями, мы не сможем ее прочитать. Как вариант, используйте аудио-капчу.
Если у вашего сайта есть иконка для перехода на версию для слабовидящих, сделайте ее максимально видимой, очень часто их почему-то делают маленькими, незаметными и бледными.
Проверьте, чтобы программы экранного доступа работали на вашем сайте. Скачайте пару самых популярных программ и протестируйте, всё ли считывается с экрана правильно».
Как адаптировать сайт для незрячих. Советы Альбины.
«Я полностью потеряла зрение в результате травмы, когда была ребенком. Меня всегда интересовала сфера IT из-за возможности работать удаленно с клиентами в других городах. Со временем я стала помогать разработчикам адаптировать сайты для незрячих и тестировать правильность их работы и отображения контента. Сейчас я с вами поделюсь основными моментами, как адаптировать сайт для слепых людей. Помните, что мы воспринимаем ваш веб-ресурс на слух, а не глазами.
Самое главное правило – структурируйте информацию на вашем сайте с помощью HTML-тегов.
Используйте заголовки и подзаголовки <h1>-<h6>, нумерованные и маркированные списки (<ol> и <ul>), теги семантической разметки <header>, <main>, <section>, <footer> и другие.
Тогда незрячий человек сможет с помощью быстрых клавиш найти нужные данные и будет свободно перемещаться по элементам страницы. Вообще, если сайт технически оптимизирован для поисковых систем, он уже достаточно хорошо адаптирован под потребности незрячих пользователей.
Также обязательно заполняйте атрибут «alt» у изображений внутри тегов <img>, иначе незрячий человек не сможет понять, что происходит на картинке. Но с другой стороны, если графический элемент выполняет чисто декоративные функции и не несет смысловой нагрузки, то оставьте данный атрибут пустым (alt=""), чтобы не сбивать с толку слепого пользователя.
Добавьте возможность управлять функциональностью контента вашего сайта с помощью клавиатуры, ведь незрячие люди не пользуются мышкой. Важно, чтобы на сайте корректно работал фокус, и незрячий человек мог, например, использовать клавишу «Tab», пробел и стрелки для перемещения от одного элемента страницы к другому, а детали интерфейса могли обрабатывать клик по нажатию клавиш «Enter» и «Esc».
Еще один важный момент: на некоторых сайтах плохо оформлен поиск. Часто бывает, что слепому человеку проблематично найти поисковую строку или невозможно установить в поле поиска курсор с помощью программы экранного доступа. Не используйте атрибут «title» для описания ссылок, так как скринридеры его не озвучивают.
Обязательно тестируйте ваш сайт на доступность, желательно используя разные скринридеры, потому что программы экранного доступа часто отличаются в работе сильнее, чем браузеры. Если есть возможность, попросите слепого человека за вознаграждение воспользоваться вашим сайтом и дать вам обратную связь.
Для более детальной информации по адаптации сайтов с конкретными примерами, воспользуйтесь документацией на сайте w3.org или русскоязычным аналогом ресурса Веблайнд».
Хотите знать больше?
В данной статье мы рассмотрели лишь основные правила для адаптации вашего веб-ресурса или приложения для людей с ограничениями по зрению.
Если же вы хотите более подробно ознакомиться с материалами, рекомендую воспользоваться следующими ресурсами:
1. Международный стандарт WCAG 2.0 для пользователей с различными ограничениями здоровья.
2. Российский национальный стандарт доступности веб-ресурсов для инвалидов по зрению ГОСТ Р 52872-2012.
И помните, что адаптируя ваш сайт для слабовидящих, незрячих и людей с дальтонизмом, вы облегчаете работу в Интернете сотням тысяч и делаете их жизнь лучше.
