1. Киев 2017
Первый в Украине фестиваль тестирования
О тестировании
доступности
Зачем, как, к чему быть готовым
Шепелева Екатерина

2. Киев 2017
Обо мне
О тестировании доступности
Екатерина Шепелева
Lead Software Testing Engineer
В IT с 2009 года
6.5+ лет в тестировании
Работала в компаниях
• EPAM (Киев)
• Ciklum (Киев, Одесса)
• Lohika (Одесса)
• GeeksForLess (Николаев)

3. Киев 2017
План на сегодня
• О доступности
• Что, зачем, почему
• Законодательства и стандарты
• Подход к тестированию
• Что и как проверять
• Основные проверки и баги
• Инструменты
• Напоследок
• Challenges, benefits
• Мифы о тестировании доступности
О тестировании доступности

4. Киев 2017
О доступности
О тестировании доступности

5. Киев 2017
Тестирование веб доступности
• ЧТО ЭТО?
• Тестирование веб-доступности (Web-Accessibility testing) - это
подмножество usability тестирования
• Люди с ограниченными возможностями должны иметь
возможность пользоваться Интернетом
• Когда сайты правильно спроектированы и разработаны, все
пользователи имеют равный доступ к информации и
функциональности
• ЗАЧЕМ?
• Существующие законодательства или потенциальные судебные
иски
• Около 20% людей имеют ограниченные возможности
О тестировании доступности

6. Киев 2017
Законодательства
• АКТЫ:
• США: Americans with Disabilities Act – 1990 | https://www.ada.gov/
• Австралия: Disability Discrimination Act - 1992
• Великобритания: Disability Discrimination Act - 1995
• Ирландия: Disability Act of 2005
• СТАНДАРТЫ:
• WCAG (Web Content Accessibility Guidelines) |
https://www.w3.org/TR/WCAG20/
• Section 508 | http://www.section508.va.gov/support/html/index.asp
• WAI-ARIA (с точки зрения разработки) |
https://www.w3.org/WAI/intro/aria.php
О тестировании доступности

7. Киев 2017
Виды ограниченных возможностей
О тестировании доступности
ТИП НАРУШЕНИЯ ОПИСАНИЕ
Нарушения зрения • Полная слепота, дальтонизм, низкая острота зрения
• Различные нарушения визуального восприятия
Физическая
недееспособность
• Неспособность использовать мышку или клавиатуру
• Такие ослабленные моторные навыки, как замедленность
движений и работы мышц
Когнитивное расстройство Трудности с приобретением знаний, расстройство памяти,
неспособность усвоить более сложные сценарии
Нарушение способности
читать и писать
Проблемы с чтением
Нарушения слуха • Такие слуховые нарушения, как глухота или ухудшение слуха
• Неспособность слышать или неспособность слышать отчетливо

8. Киев 2017
кому нужна доступность?
Доступность популярна?
О тестировании доступности

9. Киев 2017
Доступность популярна!
О тестировании доступности

10. Киев 2017
Подход к тестированию
О тестировании доступности

11. Киев 2017
Прежде, чем начать, мы
• Получили одобрение заказчика
• Определили, каким стандартам должны
соответствовать
• Определили желаемый уровень соответствия (А, АА,
ААА)
• Добавили accessibility в DOD
• Определили, что мы делаем, что не делаем
В процессе:
• Выбрали инструменты
• Провели тренинги
О тестировании доступности

12. Киев 2017
Что мы не делаем
• Тестирование доступности на мобильных
устройствах
• Тестирование продукта пользователями с
ограниченными возможностями
О тестировании доступности

13. Киев 2017
Что мы делаем
• Ручное + автоматизированное = semi-automated тестирование с
использование как инструментов, так и человеческой оценки
(для определенных проверок, например, навигации с помощью
клавиатуры)
• Без тест кейсов, только чек листы
• А, АА, ААА уровни используются для определения приоритета
бага (например, А – минимальный уровень, покрывающий
основные проблемы)
• Критерии доступности, которые мы покрываем:
• Perceivability
• Operability
• Understandability
• Robustness
О тестировании доступности

14. Киев 2017
Пример чеклиста
О тестировании доступности

15. Киев 2017
Пример чеклиста
О тестировании доступности

16. Киев 2017
Основные проверки
1. Гипертекст (HTML валидаторы – изображения,
таблицы, формы, ссылки, стили, структура, doctype)
2. Навигация с помощью клавиатуры
3. Цвета и контрастность
4. Увеличение, растягивание и разрешение
5. Мультимедиа
6. Аббревиатуры
7. Кодировка (не ASCII)
8. JavaScript
9. Диалоговые окна и переадресация
10.Мигающий или двигающийся контент
О тестировании доступности

17. Киев 2017
Примеры багов
О тестировании доступности

18. Киев 2017
Инструменты
О тестировании доступности

19. Киев 2017
WAVE
WAVE - инструмент для оценки веб доступности, который обеспечивает
визуальную обратную связь о доступности веб-контента, отображая
иконки и индикаторы на странице.
• Online инструмент | http://wave.webaim.org/
• Дополнение к Chrome / FireFox | http://wave.webaim.org/extension/
• Бесплатный
О тестировании доступности

20. Киев 2017
WAVE
О тестировании доступности

21. Киев 2017
WAVE
О тестировании доступности

22. Киев 2017
WAVE
О тестировании доступности

23. Киев 2017
WAVE
О тестировании доступности

24. Киев 2017
tota11y
Tota11y is an accessibility visualization toolkit which helps visualize how
your site performs with assistive technologies and makes it easy to spot
some of the most common accessibility violations.
• http://khan.github.io/tota11y/
• Дополнение к Chrome |
https://chrome.google.com/webstore/search/tota11y
• Бесплатный
О тестировании доступности

25. Киев 2017
JAWS
JAWS (Job Access With Speech) — программа для чтения с экрана компьютера,
предназначенная для людей с ослабленным зрением.
Чтение происходит путём предоставления пользователю информации,
отображаемой на экране, через озвучивание текста на экране (text-to-speech) и
с помощью шрифта Брайля, позволяющего без ограничений пользоваться
клавиатурой.
©Википедия
О тестировании доступности
http://www.freedomscientific.com/Products/Blindness/JAWS
Цены:
Professional: 1100$
Home edition: 900$
90 days license: 179$

26. Киев 2017
Сравнение скрин ридеров
О тестировании доступности
http://alternativeto.net/software/jaws-for-windows/
https://en.wikipedia.org/wiki/List_of_screen_readers

27. Киев 2017
NVDA и ChromeVox
• NVDA | https://www.nvaccess.org/
• ChromeVox | http://www.chromevox.com/
О тестировании доступности

28. Киев 2017
NVDA и ChromeVox
О тестировании доступности

29. Киев 2017
Статистика
О тестировании доступности
http://webaim.org/projects/screenreadersurvey5/

30. Киев 2017
Еще больше инструментов
• Markup Validation Service | https://validator.w3.org/
• AChecker | https://achecker.ca/checker/
• AInspector Sidebar for Firefox | https://addons.mozilla.org/ru/firefox/addon/ainspector-
sidebar/
• No Coffee | https://accessgarage.wordpress.com/2013/02/09/458/
• Colour Contrast Check | https://snook.ca/technical/colour_contrast/colour.html
+ RGB-to-Hex Converter | http://www.javascripter.net/faq/rgbtohex.htm
• Web Accessibility Evaluation Tools List | https://www.w3.org/WAI/ER/tools/
• Chrome Accessibility |
https://chrome.google.com/webstore/category/collection/accessibility
• …
О тестировании доступности

31. Киев 2017
Мобильное тестирование
На мобильных устройствах:
• Встроенные возможности
• Screen readers:
• Android TalkBack | Settings > Accessibility > TalkBack
• iOS VoiceOver | General > Accessibility > VoiceOver
• Встроенные опции (увеличение/уменьшение, инверсия цветов и пр.)
• Ручные проверки
На компьютере:
• Валидация HTML
• Анализ контрастности цветов
• …
О тестировании доступности
https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/Mobile_Resources
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile

32. Киев 2017
И напоследок
О тестировании доступности

33. Киев 2017
Чего ожидать - challenges
• Низкий приоритет этого вида тестирования
• Чем позже начинается тестирование доступности, тем больше
придется переделывать:
• Если проект не новый, устаревшие или 3rd party компоненты может быть
невозможно изменить и сделать их compliant. План обхода (хоть и
нежелательный) – создать альтернативную страницу без использования
такого компонента
• UX дизайн может быть создан без учета требований доступности > многие
элементы (например, функциональность, появляющаяся по наведению мыши)
должны быть переделаны
• Если стили (цвета, шрифты), которые используются в продукте, одинаковы
для нескольких продуктов заказчика, будет весьма проблематично их
изменить
• Тестировщикам сложнее найти проблемы, чем представителям
target audience | https://dou.ua/lenta/interviews/blind-programmer/
• Разные инструменты могут найти разные баги
О тестировании доступности

34. Киев 2017
Как предложить заказчику - benefits
• Пройти аудит / сертификацию
• Стать более конкурентноспособными > привлечь
больше клиентов > заработать больше денег
• Улучшить usability и производительность продукта в
целом
• Улучшить автоматизацию на проекте
• Максимальная выгода при минимальных усилиях:
• основные юзер сценарии
• наиболее посещаемые страницы
• исправление основных проблем (уровень А)
О тестировании доступности

35. Киев 2017
Мифы о тестировании доступности
О тестировании доступности
Доступные сайты некрасивые
и скучные
Не предполагается, что доступные сайты черно-белые и без дизайна
Для доступности нужно много
денег, времени и усилий
Сделать сайт доступным – просто означает “сделать правильно”, а не
как-то совершенно иначе
• Доступность сайта
принесет пользу только
небольшому количеству
человек
• Нет никаких
дополнительных
преимуществ у того, чтобы
сделать сайт доступным
Около 20% людей имеют ограниченные возможности
В какой-то момент каждый из нас сталкивается с тем, что какая-то
ссылка не работает, текст слишком мелкий, звук не проигрывается,
невозможно попасть курсором на нужную кнопку и так далее.
• Улучшение usability и производительности для всех
пользователей
• Позитивное влияние на репутацию компании
Доступность - это по желанию Доступность требуется законом
Инструментов достаточно для
того, чтобы проанализировать
сайт на доступность
Многие из проверок по доступности не достаточно объективны для
того, чтобы проверять их автоматизировано, так как нужна
человеческая оценка, чтобы определить, например, достаточно ли
какая-то формулировка понятна

36. Киев 2017
Вопросы?
О тестировании доступности
Контакты:
eshepelieva@gmail.com
eshepelieva
search for Kateryna Shepelieva
search for eshepelieva
Подходите за визитками 
Спасибо за внимание!