Как звучат сайты: незрячие люди рассказывают об использовании интернета

Материал подготовлен при поддержке Сбербанка

По официальной статистике Минздрава, более чем у 20 миллионов жителей России временные или постоянные нарушения зрения. Согласно данным главного офтальмолога РФ Владимира Нероева, количество учтённых тотально незрячих и слабовидящих в России составляет 218 тысяч человек, из них абсолютно незрячих — 103 тысячи. Но реальное число людей с нарушениями зрения значительно выше.

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

Как работают программы экранного доступа

Инженеры ещё в конце 80-х начали искать решения, которые помогли бы людям с нарушениями зрения пользоваться компьютером. Сейчас незрячие люди при работе с компьютером и смартфоном используют программы экранного доступа. Первая подобная программа JAWS появилась в 1989 году. Её разработал американец Тед Хентер, потерявший зрение после дорожной аварии.

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

Принцип работы у JAWS и её аналогов идентичный. Скринридер, отвечающий за сканирование данных на экране, выводит информацию блоками. Разработчик приложения и операционная система определяют, какая именно информация попадёт в эти блоки.

Предлагаем угадать на слух, какой сайт звучит в аудиофрагменте. Правильные ответы мы собрали в конце статьи.

О каком сайте идёт речь?
Delivery Club
Едадил
Перекрёсток
Яндекс.Еда
Показать результаты
Переголосовать
Проголосовать

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

Важно, чтобы визуальные элементы были подписаны так называемыми «альтами» — подписями для скринридера. Если картинка или пиктограмма на кнопке не подписаны, то пользователь слышит «right arrow.jpg», а на адаптированном сайте он услышит «перейти на следующую страницу».

JAWS изначально создавался для MS-DOS. Это была одна из немногих программ для чтения с экрана, работающих в текстовом режиме этой операционной системы.

Теперь аналогичные программы разработаны для каждой системы. У Apple — это VoiceOver, на Android — TalkBack, для Windows — NVDA и JAWS.

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

Последний качественный прорыв, мне кажется, случился более 10 лет назад. Тогда Apple выпустил на рынок технологию VoiceOver в iPhone 3GS. Сопоставимых по масштабу функциональных прорывов я сейчас не наблюдаю. То, что есть, просто достраивается: где-то что-то улучшается, где-то что-то ухудшается — но заметного прогресса нет.

Анатолий Попко, руководитель проекта Dialogue in the Dark, эксперт Всероссийского общества слепых и консультант Сбербанка по вопросам доступности продуктов

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

Особенности разработки для незрячих

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

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

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

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

Михаил Кузьмин, руководитель направления, Дивизион «Особенные решения» Сбербанка

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

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

О каком сайте идёт речь?
Яндекс.Такси
Таксовичкоф
Ситимобил
Uber
Показать результаты
Переголосовать
Проголосовать

Использование клавиатуры

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

Когда верстка готова, с помощью клавиши Tab проверяется фокус при управлении.

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

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

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

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

Михаил Кузьмин, руководитель направления, Дивизион «Особенные решения» Сбербанка

Неподписанные и непрочитываемые поля

Все элементы на странице должны быть свёрстаны отдельно. Если подписи к полям и формам свёрстаны как единый текстовый блок, незрячий человек не узнает, к какому полю какая подпись относится. Особое внимание следует уделять таблицам и элементам captcha. Защищённый «молчащей» captcha сценарий будет навсегда закрыт для незрячего пользователя.

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

О каком сайте идёт речь?
Мегафон ТВ
Кинопоиск
ivi
Оkkо
Показать результаты
Переголосовать
Проголосовать

Выбор целевого контента

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

В коде HTML есть метки для заголовков разного уровня. Когда незрячий пользователь слышит страницу в первый раз, он нажатием на «горячую клавишу» перемещается по этим заголовкам. Ему необязательно пролистывать весь экран – он может сразу переместиться на заголовок нужного уровня или, например, в раздел курсов валют. Для корректной работы разработчик должен разметить все заголовки нужного уровня и все области.

Заголовки первого уровня на макете должны быть заголовками H1 в коде — и наоборот. Обычный текст не должен выделяться как заголовок.

Масштабирование и контрастность

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

Также должны быть соблюдены требования к контрастности. Минимальный её коэффициент — 4,5:1. Проверить свой сайт на контрастность можно с помощью плагинов и программ: Stark plugin, Colour Contrast Analyser, Colorable.

Для читаемости сайта при изменении масштаба используется адаптивная вёрстка.

Логичные переходы

Первым элементом для пользователя скринридера должен быть первый элемент страницы — как правило, это кнопка «назад» или заголовок. Разработчики должны учитывать, что курсор можно ставить не в начало страницы, а на первый значимый по смысловой нагрузке элемент.

Если мы говорим о доступных цифровых сервисах, то я всегда привожу в пример Сбербанк. Во-первых, это приложение Сбербанк Онлайн для iOS и Android. Во-вторых, это Сбербанк Бизнес Онлайн, сейчас в веб-версии.

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

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

Анатолий Попко, руководитель проекта Dialogue in the Dark, эксперт Всероссийского общества слепых и консультант Сбербанка по вопросам доступности продуктов

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

Как российские компании внедряют доступность

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

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

Помимо веб-версии банк адаптировал и своё приложение Сбербанк Онлайн и Сбербанк Бизнес Онлайн для предпринимателей. А недавно и веб-версия Сбербанк для бизнеса стала доступной для слабовидящих.

"use strict"; (function (d, w) { var types = { citymobil: 'Ситимобил', okko: 'Okko', delivery: 'Delivery Club' }; var url = new URL(w.location.href); var type = url.searchParams.get('banner'); if (!type || !types[type]) { return; } var CSS = { main: 'sber-bl-popup' }; var sendEvent = function sendEvent(label) { var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Click'; var value = "Sber bn bl \u2014 ".concat(label, " \u2014 ").concat(action); // console.log(`Analytics: %c${value}`, 'color: #E87E04'); if (w.dataLayer !== undefined) { w.dataLayer.push({ event: 'data_event', data_description: value }); } }; var el = {}; el.main = d.createElement('div'); el.layout = d.createElement('div'); el.container = d.createElement('div'); el.close = d.createElement('div'); el.title = d.createElement('div'); el.text = d.createElement('div'); el.button = d.createElement('div'); el.main.classList.add(CSS.main); el.layout.classList.add("".concat(CSS.main, "__layout")); el.container.classList.add("".concat(CSS.main, "__container")); el.close.classList.add("".concat(CSS.main, "__close")); el.title.classList.add("".concat(CSS.main, "__title")); el.text.classList.add("".concat(CSS.main, "__text")); el.button.classList.add("".concat(CSS.main, "__button")); el.text.innerHTML = 'В этой статье вы узнаете, как люди с нарушениями зрения «слышат» этот сайт.'; el.button.innerHTML = 'Поехали'; el.container.appendChild(el.close); el.container.appendChild(el.title); el.container.appendChild(el.text); el.container.appendChild(el.button); el.main.appendChild(el.layout); el.main.appendChild(el.container); var close = function close() { sendEvent("".concat(type, " \u2014 Popup close")); el.main.parentElement.removeChild(el.main); }; var open = function open() { sendEvent("".concat(type, " \u2014 Popup open")); el.title.innerHTML = "\u042D\u0442\u043E, \u043A\u043E\u043D\u0435\u0447\u043D\u043E, ".concat(types[type]); d.body.appendChild(el.main); }; el.layout.addEventListener('click', close); el.close.addEventListener('click', close); el.button.addEventListener('click', close); open(); })(document, window);

Правильные ответы:
1. Delivery Club
2. Ситимобил
3. Оkkо

0
11 комментариев
Написать комментарий...
Artem Petrenkov

Из личного опыта реализации accessibility:

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

2. Ни один скринридер не поддерживает WAI-ARIA на 100%. Многие приёмы и примеры с официального сайта могут работать в реальном скринридере не совсем корректно.

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

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

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

6. Доступная цветовая палитра — это боль. Официальная формула расчёта контрастности не совсем удачна и может выдавать странные результаты для многоцветных изображений. Например, контрастность белого текста на цветной кнопке или плашке может оказаться недостаточной.

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

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

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

10. Если аудитор проверил страницу, то это ещё не значит, что она теперь точно доступна на 100%. Попросите его проверить её ещё раз, и она вам найдёт новые ошибки. Это следует учитывать, когда аудит изначально заказан клиентом, а вы заказываете у аудитора предварительные проверки.

Ответить
Развернуть ветку
Konstantin Babichev

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

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

Ответить
Развернуть ветку
Artem Petrenkov

Вообще я реализовывал accessibility для веб-приложения, а не типичного сайта, но общие приёмы схожи. Постараюсь вкратце изложить их. Если что-то непонятно — буду рад подсказать подробнее.

Самая главная цель — чтобы незрячий пользователь смог зайти к вам в магазин и сделать заказ: то есть смог понять, что это действительно магазин, что он в его регионе, пользователь смог бы пройти по каталогу, заполнить корзину и оформить заказ. В крайнем случае — нашёл бы телефон.

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

Для начала на сайте важна разметка: она должна быть семантическая и валидная. Например, в скринридерах есть возможность зачитать «оглавление» страницы, которое формируется из тегов H1-H6 и быстро перейти к нужному подразделу. Списки ul-li и ol-li тоже зачитываются особым образом: скринридер упоминает, что в таком-то списке столько пунктов, а вы находитесь на таком-то пункте.

К изображениям обязательно должны быть прописаны alt-атрибуты с описанием того, что на них изображено. Посмотрите, например, сайт Майкрософта. Сейчас на главной там висит баннер с рекламой Teams. Alt-атрибут картинки говорит: «Пять человек работают удаленно, используя Microsoft Teams.» Ниже на странице на баннере OneDrive картинка подписана как «Женщина использует ноутбук с Windows 10 и OneDrive».

Не уверен, что у незрячего пользователя возникнет желание включать видео. Я бы, наверное, сделал сопроводительный текст. Так или иначе он пригодится и для SEO. Для людей с ограничениями по слуху, конечно, в видео незаменимы будут субтитры. И разумеется, html-разметка видео тоже должна содержать атрибуты с текстовым описанием.

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

Подытоживая: для создания более-менее доступного сайта создайте простой, «чистый» дизайн; сверстайте его семантично; подпишите все картинки, видео, графики и карты; проверьте, как страница звучит в разных популярных скринридерах, в том числе и на телефонах. Если пользоваться сайтом неудобно, придётся доработать разметку aria-атрибутами.

Ответить
Развернуть ветку
Алексей

Небольшой вопрос по alt, если изображение и так дублирует текст (например как илюстрация к заголовку) стоит ли ей прописывать alt? 

Ответить
Развернуть ветку
Artem Petrenkov

Я бы всё равно рекомендовал ставить. Заголовок — это одно, картинка — это другое. Кажется, на большинстве сайтов alt-атрибут будет всё-таки отличаться. Например, в статье «Достоинства и недостатки Tesla Model Y» под заголовком будет изображение «Автомобиль Tesla Model Y» или даже «Белый Tesla Model Y с открытой дверью». Вдобавок, этот атрибут будет проиндексирован поисковиками, и поиск по картинкам Google покажет в выдаче эту статью.

Да, в интернет-магазинах alt картинки продукта будет совпадать с заголовком. Тут ничего другого не придумаешь. Но это вполне нормально. Так делает в том числе Amazon. Конечно, можно и не подписывать, если незрячие пользователи ничего от этого не потеряют, но тогда и скринридер не должен будет на этой картинке останавливаться. Если же картинка активная (например, это ссылка), то какое-то описание обязательно нужно.

Ответить
Развернуть ветку
Lesia Eternalduck
Ни один скринридер не поддерживает WAI-ARIA на 100%

а почему так, это технически невозможно? хотя почему тогда стандарт существует.. 

Ответить
Развернуть ветку
Artem Petrenkov

Думаю, что возможно, но, видимо, не всё в приоритете. Это же не браузеры, в которые вкладывают миллионы долларов.

Ответить
Развернуть ветку
Максим Ерёменко
вместе с незрячим экспертом банка посмотрели
Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Yury Chernov
Ответить
Развернуть ветку
Shtuintys TV

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

Ответить
Развернуть ветку
Shtuintys TV

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

Ответить
Развернуть ветку
8 комментариев
Раскрывать всегда