Роль бизнес-аналитика при разработке доступного веб-контента

Евгения Лученок,Екатерина Кичкайло,

Coherent Solutions Inc./ISsoft

План

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

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

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

• Акт о Реабилитации Инвалидов (Section 508 of the Rehabilitation Act, 1998)

o 16 правил, которым должен соответствовать веб-сайт

• Руководство по обеспечению доступности веб-контента 2.0, 2008 (Web Content Accessibility Guidelines - WCAG)

o 12 рекомендаций. Каждая имеет ряд критериев выполнения с приоритетами «обязательно», «желательно» или «опционально»

Воспринимаемость Управляемость

Понятность Надежность

Наш проект

Фаза 1 ЦельДоступный портал, соответствующий

стандарту СШАПроверка разметки с помощью Comply First

Критерии приемки:

• Отсутствие ошибок в отчете

2015

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

Наш проект – Фаза 1

• Позволяет выявить несоответствия требованиям стандарта

НО• Не учитывает поведение и потребности

пользователя• Пропускает динамически подгружаемый

контент • Заимствованные элементы интерфейса не

соответствуют стандартам доступности

Наш проект

Фаза 2 Цель

Доступный портал, соответствующий

стандарту США

Критерии приемки:• Можно управлять контентом с помощью клавиатуры• Контент страниц воспринимаем для пользователей

2016

Трудности

• Отсутствие коммуникации с конечными пользователями

• Недостаточное понимание некоторыми ЗЛ важности веб-доступности

• Сложности в согласовании изменений существующего интерфейса

• Новая терминология

БА активности

Анализ пользователе

й

Анализ поведения

пользователей

Понимание проблем

доступности

Документиро-вание

Используемые БА техники

Интервью

Анализ докумен-

тации

Анализ интер-фейсов

Мозговой штурм

Глоссарий

Сквозной структурный

контроль

Интервью•Кто наши пользователи, в чем их особенности, ограничения?

•Самостоятельно ли наши пользователи будут пользоваться порталом?

•Кто или что им помогает использовать интернет/портал?

•Знают ли терминологию?

•Какие действия они хотят выполнять на портале?

Категории ограничений

ЗРИТЕЛЬНЫЕ

СЛУХОВЫЕ

МОТОРНЫЕ

КОГНИТИВНЫЕ

Доступ к веб-контенту

Программа экранного доступа

(скринридер)Устройство Брайля Распознавание

голоса

Touch-скрин + стилус

Веб-браузер + специальная программа,

увеличивающая часть экрана

Текстовый браузер (отображает только

текстовое содержание веб-сайта)

Группы пользователей

- IE 11, Firefox- Уверенные пользователи компьютера- Используют горячие клавиши

Те, кто использует клавиатуру - IE 11, Firefox

- Используют скринридеры, чтобы слушать содержимое страниц- Используют shortcuts (однобуквенная навигация)- Известна используемая терминология- Хорошее владение скринридером

Слабовидящие/

Слепые

Персоны

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

Результаты анализа поведения

Разработка решения

Анализ Согласование Решение

Основные проблемы доступности

Как перейти к основному контенту?

Что можно понять, если скринридер

читает «Подробнее»?

Как использовать двигающиеся

объекты?

Как понять, что за ошибка на странице?

Как прочитать всплывающие подсказки без

мыши?

Как осуществить действие при

помощи клавиатуры?

Как понять что изображено на

картинке?

Пользователь на нужной странице?

Как понять состав всего контента?

Механизм для пропуска блоков навигации

Позволяет мне пропустить горизонтальную и вертикальную навигацию и перейти сразу

к полям для ввода данных

Основные проблемы доступности

Как перейти к основному контенту?

Что можно понять, если скринридер

читает «Подробнее»?

Как использовать двигающиеся

объекты?

Как понять, что за ошибка на странице?

Как прочитать всплывающие подсказки без

мыши?

Как осуществить действие при

помощи клавиатуры?

Как понять что изображено на

картинке?

Пользователь на нужной странице?

Как понять состав всего контента?

Названия гиперссылокДополнительная информация

об услуге

Перенаправляет на другую страницу для выбора

приложения

Перенаправляет на другую страницу с остальными транзакциями

Основные проблемы доступности

Как перейти к основному контенту?

Что можно понять, если скринридер

читает «Подробнее»?

Как использовать двигающиеся

объекты?

Как понять, что за ошибка на странице?

Как прочитать всплывающие подсказки без

мыши?

Как осуществить действие при

помощи клавиатуры?

Как понять что изображено на

картинке?

Пользователь на нужной странице?

Как понять состав всего контента?

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

Возможность остановить автоматическую ротацию

Основные проблемы доступности

Как перейти к основному контенту?

Что можно понять, если скринридер

читает «Подробнее»?

Как использовать двигающиеся

объекты?

Как понять, что за ошибка на странице?

Как прочитать всплывающие подсказки без

мыши?

Как осуществить действие при

помощи клавиатуры?

Как понять что изображено на

картинке?

Пользователь на нужной странице?

Как понять состав всего контента?

Атрибуты элементов на форме

Что необходимозаполнить?

Подсказки при заполнении

Валидация формы

Группировка ошибок помогает сразу понять, что я

неверно заполнила

Основные проблемы доступности

Как перейти к основному контенту?

Что можно понять, если скринридер

читает «Подробнее»?

Как использовать двигающиеся

объекты?

Как понять, что за ошибка на странице?

Как прочитать всплывающие подсказки без

мыши?

Как осуществить действие при

помощи клавиатуры?

Как понять что изображено на

картинке?

Пользователь на нужной странице?

Как понять состав всего контента?

Всплывающие подсказки

Подсказки, принимая фокус, автоматически раскрываются и я

могу их прочесть

Основные проблемы доступности

Как перейти к основному контенту?

Что можно понять, если скринридер

читает «Подробнее»?

Как использовать двигающиеся

объекты?

Как понять, что за ошибка на странице?

Как прочитать всплывающие подсказки без

мыши?

Как осуществить действие при

помощи клавиатуры?

Как понять что изображено на

картинке?

Пользователь на нужной странице?

Как понять состав всего контента?

Описание картинок

Предыдущий слайд

Следующий слайд

Понимаю, как управлять слайдами

Основные проблемы доступности

Как перейти к основному контенту?

Что можно понять, если скринридер

читает «Подробнее»?

Как использовать двигающиеся

объекты?

Как понять, что за ошибка на странице?

Как прочитать всплывающие подсказки без

мыши?

Как осуществить действие при

помощи клавиатуры?

Как понять что изображено на

картинке?

Пользователь на нужной странице?

Как понять состав всего контента?

Выводы• Конечно лучше всего сразу задуматься о

принципах доступности• Изменения будут не заметны для

существующих пользователей• Простые изменения помогут улучшить

usability вашего сайта• Старайтесь привлекать реальных конечных

пользователей

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

Спасибо за внимание

Евгения Лученок,Екатерина Кичкайло,

Coherent Solutions Inc./ISsoft www.facebook.com/evgeniya.luchenok

www.facebook.com/katya.kichkailo

Полезные ссылки

• https://www.w3.org/TR/WCAG20/ - руководство по обеспечению доступности веб-контента

• http://www.section508.gov/ - раздел 508 • http://webaim.org/ - примеры и практики

реализации