ОБЩЕДОСТУПНАЯ ПРОВЕРКА НА ОБЩЕДОСТУПНОСТЬ

ОБЩЕДОСТУПНАЯ ПРОВЕРКА НА
ОБЩЕДОСТУПНОСТЬ
О каких ограничениях идет речь?




По зрению (острота, восприятие цвета)
Моторные
Когнитивные
...?
Доступность и ограничения?
 Растет рынок
мобильных устройств
 Продукты
увеличиваются по
сложности
 Интернет
распространяется, но
скорости в регионах
растут меньше
в части доступности
ВСЕ ОГРАНИЧЕНЫ В
ВОЗМОЖНОСТЯХ
НЕТ, ПРАВДА
Направления доступности
 На уровне информации
– Я знаю, что такая информация есть и я хочу ее
найти/я знаю, что я могу выполнить такую задачу,
теперь мне надо найти, где это сделать
 На уровне задач
– Я нашел нужный сервис, теперь мне надо в нем
сориентироваться и найти мою
информацию/выполнить мою задачу
 На механическом уровне
– Я нашел все, что мне нужно – теперь мне вэтом
надо разобраться и воспользоваться этим
Направления доступности
 На уровне информации
– Я знаю, что такая информация есть и я хочу ее
найти/я знаю, что я могу выполнить такую задачу,
теперь мне надо найти, где это сделать
 На уровне задач
– Я нашел нужный сервис, теперь мне надо в нем
сориентироваться и найти мою
информацию/выполнить мою задачу
 На механическом уровне
– Я нашел все, что мне нужно – теперь мне вэтом
надо разобраться и воспользоваться этим
Направления доступности
 На уровне информации
– Я знаю, что такая информация есть и я хочу ее
найти/я знаю, что я могу выполнить такую задачу,
теперь мне надо найти, где это сделать
 На уровне задач
– Я нашел нужный сервис, теперь мне надо в нем
сориентироваться и найти мою
информацию/выполнить мою задачу
 На механическом уровне
– Я нашел все, что мне нужно – теперь мне вэтом
надо разобраться и воспользоваться этим
Направления доступности
 На уровне информации
– Я знаю, что такая информация есть и я хочу ее
найти/я знаю, что я могу выполнить такую задачу,
теперь мне надо найти, где это сделать
 На уровне задач
– Я нашел нужный сервис, теперь мне надо в нем
сориентироваться и найти мою
информацию/выполнить мою задачу
 На механическом уровне
– Я нашел все, что мне нужно – теперь мне вэтом
надо разобраться и воспользоваться этим
Инструменты проверки
 На уровне информации
– голова
 На уровне задач
– Тестирование с пользователями, экспертная
оценка и т.п.
 На механическом уровне
– Инструменты и чеклисты – прорка иерархии,
контрастности, валидности и т.п.
Инструменты? Да, причем бесплатно
МЕХАНИЧЕСКИЙ УРОВЕНЬ
ПРОВЕРКИ
ОБОЛОЧКА ДЛЯ ВСЕХ
ИНСТРУМЕНТОВ – БРАУЗЕР.
Цветовой контраст
 Это не просто «разобрать цвета» для
человека с нарушениями цветового
восприятия
Цветовой контраст
 Возможность вообще
понять, что
происходит на
странице
 Возможность
разобрать текст при
разных освещениях
 Анализатор цветового
контраста
– Color Contrast Analyser
– Colorblind simulator
– Check my colors!
Визуальная иерархия и струкура
 Это не просто «в каком порядке
скринридер прочитает страницу»!
Визуальная иерархия и структура
 Определяет
направление
сканирования страницы
 Организует поведение
пользоваеля
 Позволяет
ориентироваться
 Помогает различать
ссылки и находить их
 ...
 WAVE
– Структура заголовков
– Вложенность
– Структура и порядок
блоков на странице
 FANGS
– Эмулятор скринридера
Визуальная иерархия
CSS, скрипты и картинки
 Это не просто «сможет ли пользователь
работать без картинок»
CSS, скрипты и картинки
 Сможем ли работать
на слабом интернетсоединении?
 А что будет, если не
загрузится скрипт?
 А если я зайду с
мобильного
устройства?
 ...
 Web Developer Toolbar,
WAVE
– Отключение JS
– Отключение CSS
– Проверка alt
CSS, скрипты и картинки
CSS, скрипты и картинки
WCAG, валидность, веб-стандарты, семантика
 Это не пустой звук и не красивый значок. И
даже не предмет спорта для яйцеголовых
WCAG, валидность, веб-стандарты, семантика
 Некоторая гарантия
того, что вашим
сайтом можно
пользоваться почти в
любых условиях
 Web Developer Toolbar
 WAVE
 HTML Validator
Спасибо!
[email protected]
www.usabilitylab.ru
БОНУС: АЛГОРИТМ ПРОВЕРКИ В
ШАГАХ
Firefox
 Утилиты разработчика
– Web Developer Toolbar
 Линеаризатор контента
– Fangs
 Анализатор цветового контраста
– Color Contrast Analyser
– Colorblind simulator
– Check my colors!
Web-сервисы
 Анализатор цветового контраст
– Juicy Studio Color Analyzer (для равномерно
окрашенных картинок)
– Vischeck (для всех остальных
 Валидатор
– http://validator.w3.org/
ПРОВЕРКА ГРАФИЧЕСКИХ
ЭЛЕМЕНТОВ
Проверить наличие "alt" у картинок
 В Web Developer:
– Images > Outline images
without “ALT” attribute
– Images > Replace images
with “ALT”
 Ожидаемый результат:
– страница не потеряет
информативности
Отключить цвета на странице
 В Web Developer:
– Disable > Disable page
colours
– Images > Disable all
images
 Ожидаемый результат:
– страница не потеряет
информативности
Отключить изображения на
странице
 В Web Developer:
– Images > Disable Images
> All images
 Ожидаемый результат:
– страница не потеряет
информативности
Проверить цветовой контраст
 Для равномерных
изображений
– в зависимости от
инструмента
 Для всех остальных:
– Vischeck
 Ожидаемый результат:
цветовой контраст
находится в
допустимых пределах
Проверить отсутствие двигающихся
частей страницы
 Не должно быть:
– миганий
– потряхиваний
– "бегущих строк”
НЕМНОГО ПРО КОД
Отключить CSS
 В Web Developer:
– CSS > Disable styles > All
styles
 Ожидаемый результат:
– документ все еще
можно понять и
прочитать
Проверить наличие фреймов
 Открыть страницу и убедиться, что:
– фреймов нет, или
– они есть правильно размеченные, и есть
<noframe>
Проверить на валидность
 В Web Developer:
– Tools > Validate HTML
– Tools > Validate CSS
 или
– http://validator.w3.org/
Проверить на отсутствие deprecated
elements
 В Web Developer:
– Outline > Outline
deprecated elements
 Ожидаемый результат:
– ни один элемент не
обведен
Проверить таблицы

В Web Developer:
– Miscellaneous > Linearize
page
– Information > Table
information
 Ожидаемый результат:
– таблицы не должны
использоваться для
разметки (в крайнем случае
в них не должны
использоваться <summary>,
<th>, <caption>)
– таблицы должны быть
правильно прописаны (<th>,
<caption>
Проверить работу без JavaScript
 В Web Developer:
– Disable > Disable
JavaScript > All
JavaScript
– Disable Java
 Ожидаемый результат:
– страница работает,
документ читаем,
ссылки работают
Проверить, в чем задаются размеры
элементов
 Ожидаемый результат: элементы задаются
в % или в em (исключение: margin, padding)
КОНТЕНТ
Проверить таблицы с данными

В Web Developer:
– в случае таблицы с одним
логическим уровнем:
– Information > Display table
information
– в случае таблицы с большим
количеством уровней:
– проверить код страницы
вручную
 Ожидаемый результат:
– для таблицы прописаны
заголовки строк и столбцов,
указаны id
– заголовки и ячейки
ассоциированы с помощью id
Проверить заголовки
 В Web Developer:
– Outline > Headings
 Ожидаемый результат:
– документ содержит
заголовки и подзаголовки,
иерархия логична и
отражает смысловую
иерархию контента
Проверить метаданные
 В Web Developer:
– Information > View
Metatags information
 Ожидаемый результат:
– адекватные
метаданные
Проверить абревиатуры
 В Web Developer:
– Information > Display
abbreviation
 Ожидаемый результат:
– все аббревитаруы
объяснены,
неизвестных нет
Проверить ссылки
 В Web Developer:
– Information > Display
abbreviation
 Ожидаемый результат:
– нет ссылок с target"=_blank"
– нет ссылок, ведущих в
разные места, но с
одинаковыми названиями
...И ЭТО ЕЩЕ НЕ ВСЕ!
Материалы








Доступные веб-формы
WCAG1.0
WCAG2.0
Вводная в WAI
О WAI и ссылки на ресурсы W3C
Технологии реализации
Чеклист по WCAG1.0
Разработчики Fangs