Доступная цифровая среда

Презентация Дмитрия Силаева и Антона Парамонова с РИФ+КИБ 2017. В презентации показаны проблемы, с которыми сталкиваются слабовидящие пользователи различных российских сайтов: госуслуги, заказ сопровождения в метро, Яндекс.Афиша. Разобраны основные проблемы доступности. В конце презентации приведен перечень стандартов, регламентирующих доступность интерфейсов, и инструментов, позволяющих ее оценить.

Transcript

1. ДОСТУПНАЯ ЦИФРОВАЯ СРЕДА
3. Редко заводит новые знакомства. Любит заводить новые знакомства. Предпочитает не выходить из дома. Ненавидит сидеть дома и плевать в потолок. Считает, что мир враждебен и полон опасностей. Считает, что в мире так много возможностей! Живет вместе с родителями. Ценит свободу и независимость. Не занимается бытовыми вопросами. Стремится к самостоятельности. Мечтает устроиться на стабильную работу. Обожает все новое и интересное.
5. Пригласить на концерт Купить билеты Добраться до места Приятно провести время Познакомиться
6. Экранные дикторы NVDA JAWS VOICE OVER TALKBACK
7. Поиск и покупка билетов
8. Поиск и покупка билетов
9. Поиск и покупка билетов КОНЦЕРТ ПАНК РОК АНОНС 18+ Ленинград Концерт в Мосве 13 июля В топе жанра русский рок А Facebook ВКонтакте Twitter
10. Поиск и покупка билетов. Вторая попытка 1 2 3 4
11. Поиск и покупка билетов. Вторая попытка 1 2 3 4
12. Заявка на сопровождение в метро
13. Заявка на сопровождение в метро
14. Заявка на сопровождение в метро
15. Нарушения моторики Слабовидящие и слепые Комплексные нарушения Ментальные нарушения Нарушения речи Слабослышащие и глухие Web Content Accessibility Guidelines 2.0
16. Проблемы доступности Невозможно установить фокус с помощью клавиатурных команд.
17. Проблемы доступности
18. Проблемы доступности Регистрация вертикальная линия Тачбанк. Тачбанк. Объектов пять пробел пробел пробел. Заполните анкету и мы бесплатно доставим карту ссылка восклицательный знак. Десять минут. Желаемая сумма кредита в рублях. Кредитный лимит не нужен. Не установлен. Не нужен. Фамилия Имя Отчество Отчество не указано в паспорте. Не установлен. Плюс семь подчеркивание подчеркивание подчеркивание. Подчеркивание подчеркивание подчеркивание подчеркивание подчеркивание подчеркивание подчеркивание. Мобильный телефон. Имейл У меня есть промокод. Вопрос. Нажимая кнопку «Продолжить», я подтверждаю соответствие мин. требованиям Банка к Заемщику косая черта Вкладчику и свое согласие на обработку персональных данных и обращение в бюро кредитных историй и порядком взыскания просроченной задолженности, на использование аналога собственноручной подписи и ознакомление с Общими условиями и Программой лояльности "Touch Bank». Продолжить, кнопка. 2 2 2 2 2 2 2 2 2 2 Шаг один из четыре. Шаг один из четыре. Общая информация. Не озвучиваются сообщения о некорректном воде данных.
19. Проблемы доступности Подтверждение персонального номера телефона. Для завершения регистрации вам необходимо ввести код подтверждения, который вы получите в смс-подтверждении. Ваш номер телефона. Плюс семь подчеркивание подчеркивание подчеркивание. Подчеркивание подчеркивание подчеркивание подчеркивание подчеркивание подчеркивание подчеркивание. Мобильный телефон. Код подтверждения Прислать код повторно. Вернуться к форме. Лого Отп пиэнджи. Услуги предоставляются АО «ОТП Банк». Генеральная лицензия Банка России № 2766. 3
20. Проблемы доступности Ссылка. Сёрч Просмотренная, ссылка. Косая черта.
21. Проблемы доступности Ссылка, notification- setup Вкладка без названия.
22. Проблемы доступности • Некорректное название элемента. • Отсутствует название элемента. • Озвучиваются не отображаемые на экране элементы. • Не устанавливается фокус на элемент. • Используется сложный для восприятия на слух термин. • Отсутствует название элемента на русском языке. • При открытии вкладки фокус не переключается автоматически на ее контент. • Сложный или долгий доступ с использованием экранного диктора. • Отсутствует обратная связь при авторизации. • Используется некорректный тип элемента • Не озвучивается состояние элемента (выбран/ не выбран/недоступен…). • Используется всплывающее (блокирующее) сообщение.
26. • Компетенции. • Культура разработки. • Внимание. • Запросы на разработку. • Требования. • Стандарты. • Контроль. • Потребности. • Желания. • Возможности.
27. Стандарты Инструменты • ГОСТ Р 52872-2012. • WCAG 2.0. • Section 508 Amendment to the U.S. Rehabilitation Act Standards for Web-based content (§1194.22). • Mozilla Developer Network. • 18F Guides. • Рекомендации по проектированию сайтов для людей с деменцией. • Рекомендации по проектированию сайтов для дислексиков. • Автоматическии• чекер на соответствие саи•та рекомендациям WCAG 2.0 (например, AChecker) – позволит вам увидеть по большеи• части, проблемы, связанные с кодом (обычно, проблемы кода влияют на людеи• с нарушениями зрения, использующих экранныи• диктор). • Средство автоматическои• проверки достаточности контраста текста в соответствии с требованиям WCAG 2.0 (например, Contrast Ratio Checker) – позволит вам выяснить, насколько читаемыи• текст на вашем саи•те для людеи• с нарушениями зрения. • Средство просмотра содержимого страницы глазами дальтоника (например, I want to see like the colour blind) – позволит вам увидеть, как воспринимают контент на странице люди с различными нарушениями цветовосприятия.
28. Базовые рекомендации • Элементы управления и контент должны быть крупными и контрастными. • Для видеоконтента должны быть доступны субтитры, аудиоописание или тифлокомментарии. • Контент и элементы управления должны быть доступны для обработки специальным ПО и аппаратными средствами (программами экранного доступа, браи•левскими дисплеями и тп.). • Ко всему аудио- и видеоконтенту должны быть предоставлены субтитры. • Если пользователь на саи•те может оставить запрос или обращение, то должен быть предусмотрен способ обратнои• связи с пользователем в письменнои• форме.
29. Базовые рекомендации • Элементы управления и их интерактивные области должны быть достаточно крупными. • Должна быть обеспечена возможность полного управления с клавиатуры. • Если пользователь на саи•те может оставить запрос или обращение, то должен быть предусмотрен способ обратнои• связи с пользователем в письменнои• форме. • Текст должен быть сформулирован простыми предложениями (конкретные формулировки). • Объемныи• текст должен быть дополнен подходящими по смыслу изображениями, информация должна быть также представлена в нетекстовом формате (схемы, диаграммы и пр.). • Для предотвращения эпилептических припадков, на экране не должно быть мерцающих элементов.
30. Спасибо! Дмитрий Силаев +7 926 492 05 50 d.silaev@usabilitylab.net Антон Парамонов +7 965 378 34 18 a.paramonov@usabilitylab.net ЮЗАБИЛИТИЛАБ Москва, ул. Годовикова, д. 9, стр. 12 +7 (495) 933 01 37 www.usabilitylab.ru facebook.com/usabilitylab