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

1. Роль бизнес-аналитика при
разработке доступного веб-контента
Евгения Лученок,
Екатерина Кичкайло,
Coherent Solutions Inc./ISsoft

2. План
1. Что такое доступность?
2. Первые шаги. Успехи и неудачи
3. Задачи и роль бизнес-аналитика

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

5. • АктоРеабилитацииИнвалидов(Section508ofthe
Rehabilitation Act,1998)
o 16правил,которымдолженсоответствоватьвеб-сайт
• Руководство по обеспечению доступности веб-
контента 2.0, 2008 (Web Content Accessibility
Guidelines - WCAG)
o 12рекомендаций.Каждаяимеет рядкритериеввыполненияс
приоритетами«обязательно»,«желательно»или
«опционально»

6. Воспринимаемость Управляемость
Понятность Надежность

7. Наш проект
Фаза 1 Цель
Доступный портал,
соответствующий
стандарту США
Проверка разметки с помощью
Comply First
Критерии приемки:
• Отсутствие ошибок в отчете
2015

8. Пример отчета

9. Наш проект – Фаза 1
• Позволяет выявить несоответствия
требованиям стандарта
НО
• Не учитывает поведение и потребности
пользователя
• Пропускает динамически подгружаемый
контент
• Заимствованные элементы интерфейса не
соответствуют стандартам доступности

10. Наш проект
Фаза 2 Цель
Доступный портал,
соответствующий
стандарту США
Критерии приемки:
• Можно управлять контентом с помощью клавиатуры
• Контент страниц воспринимаем для пользователей
2016

11. Трудности
• Отсутствие коммуникации с конечными
пользователями
• Недостаточное понимание некоторыми ЗЛ
важности веб-доступности
• Сложности в согласовании изменений
существующего интерфейса
• Новая терминология

12. БА активности
Анализ
пользователей
Анализ
поведения
пользователей
Понимание
проблем
доступности
Документиро-
вание

13. Используемые БА техники
Интервью
Анализ
докумен-
тации
Анализ
интер-
фейсов
Мозговой
штурм
Глоссарий
Сквозной
структурный
контроль

14. Интервью
•Кто наши пользователи, в чем их особенности,
ограничения?
•Самостоятельно ли наши пользователи будут
пользоваться порталом?
•Кто или что им помогает использовать
интернет/портал?
•Знают ли терминологию?
•Какие действия они хотят выполнять на портале?

15. Категории ограничений
ЗРИТЕЛЬНЫЕ
СЛУХОВЫЕ
МОТОРНЫЕ
КОГНИТИВНЫЕ

16. Доступ к веб-контенту
Программа
экранного доступа
(скринридер)
Устройство Брайля
Распознавание
голоса
Touch-скрин +
стилус
Веб-браузер +
специальная
программа,
увеличивающая часть
экрана
Текстовый браузер
(отображает только
текстовое содержание
веб-сайта)

17. Группы пользователей
- IE 11, Firefox
- Уверенные
пользователи
компьютера
- Используют горячие
клавиши
Те, кто
использует
клавиатуру - IE 11, Firefox
- Используют
скринридеры, чтобы
слушать содержимое
страниц
- Используют shortcuts
(однобуквенная
навигация)
- Известна используемая
терминология
- Хорошее владение
скринридером
Слабовидя
щие/
Слепые

18. Персоны

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

20. Разработка решения
Анализ Согласование Решение

21. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?

22. Механизм для пропуска
блоков навигации
Позволяет мне пропустить горизонтальную
и вертикальную навигацию и перейти сразу
к полям для ввода данных

23. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?

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

25. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?

26. Использование карусели
Возможность остановить автоматическую ротацию

27. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?

28. Атрибуты элементов на форме
Что
необходимо
заполнить?
Подсказки при
заполнении

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

30. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?

31. Всплывающие подсказки
Подсказки, принимая фокус,
автоматически раскрываются и я
могу их прочесть

32. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?

33. Описание картинок
Предыдущий
слайд
Следующий
слайд
Понимаю, как управлять
слайдами

34. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?

35. Выводы
• Конечно лучше всего сразу задуматься о
принципах доступности
• Изменения будут не заметны для
существующих пользователей
• Простые изменения помогут улучшить
usability вашего сайта
• Старайтесь привлекать реальных конечных
пользователей

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

37. Спасибо за внимание
Евгения Лученок,
Екатерина Кичкайло,
Coherent Solutions Inc./ISsoft
www.facebook.com/evgeniya.luchenok
www.facebook.com/katya.kichkailo

38. Полезные ссылки
• https://www.w3.org/TR/WCAG20/ -
руководство по обеспечению доступности
веб-контента
• http://www.section508.gov/ - раздел 508
• http://webaim.org/ - примеры и практики
реализации