2. План
1. Что такое доступность?
2. Первые шаги. Успехи и неудачи
3. Задачи и роль бизнес-аналитика
3. В широком смысле доступность (accessibility) - это
совокупность условий и требований к создаваемой человеком
окружающей и информационной среде, позволяющая
беспрепятственно передвигаться и воспринимать жизненно
важную информацию.
Доступность означает возможность
понимать, использовать и
взаимодействовать с веб-контентом
людям с ограниченными
возможностями.
5. • АктоРеабилитацииИнвалидов(Section508ofthe
Rehabilitation Act,1998)
o 16правил,которымдолженсоответствоватьвеб-сайт
• Руководство по обеспечению доступности веб-
контента 2.0, 2008 (Web Content Accessibility
Guidelines - WCAG)
o 12рекомендаций.Каждаяимеет рядкритериеввыполненияс
приоритетами«обязательно»,«желательно»или
«опционально»
7. Наш проект
Фаза 1 Цель
Доступный портал,
соответствующий
стандарту США
Проверка разметки с помощью
Comply First
Критерии приемки:
• Отсутствие ошибок в отчете
2015
9. Наш проект – Фаза 1
• Позволяет выявить несоответствия
требованиям стандарта
НО
• Не учитывает поведение и потребности
пользователя
• Пропускает динамически подгружаемый
контент
• Заимствованные элементы интерфейса не
соответствуют стандартам доступности
10. Наш проект
Фаза 2 Цель
Доступный портал,
соответствующий
стандарту США
Критерии приемки:
• Можно управлять контентом с помощью клавиатуры
• Контент страниц воспринимаем для пользователей
2016
11. Трудности
• Отсутствие коммуникации с конечными
пользователями
• Недостаточное понимание некоторыми ЗЛ
важности веб-доступности
• Сложности в согласовании изменений
существующего интерфейса
• Новая терминология
14. Интервью
•Кто наши пользователи, в чем их особенности,
ограничения?
•Самостоятельно ли наши пользователи будут
пользоваться порталом?
•Кто или что им помогает использовать
интернет/портал?
•Знают ли терминологию?
•Какие действия они хотят выполнять на портале?
16. Доступ к веб-контенту
Программа
экранного доступа
(скринридер)
Устройство Брайля
Распознавание
голоса
Touch-скрин +
стилус
Веб-браузер +
специальная
программа,
увеличивающая часть
экрана
Текстовый браузер
(отображает только
текстовое содержание
веб-сайта)
17. Группы пользователей
- IE 11, Firefox
- Уверенные
пользователи
компьютера
- Используют горячие
клавиши
Те, кто
использует
клавиатуру - IE 11, Firefox
- Используют
скринридеры, чтобы
слушать содержимое
страниц
- Используют shortcuts
(однобуквенная
навигация)
- Известна используемая
терминология
- Хорошее владение
скринридером
Слабовидя
щие/
Слепые
21. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
22. Механизм для пропуска
блоков навигации
Позволяет мне пропустить горизонтальную
и вертикальную навигацию и перейти сразу
к полям для ввода данных
23. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
25. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
27. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
30. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
32. Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
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/ - примеры и практики
реализации