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

О каких ограничениях идет речь? По зрению (острота, восприятие цвета) Моторные Когнитивные...?

Доступность и ограничения? Растет рынок мобильных устройств Продукты увеличиваются по сложности Интернет распространяется, но скорости в регионах растут меньше

ВСЕ ОГРАНИЧЕНЫ В ВОЗМОЖНОСТЯХ в части доступности

НЕТ, ПРАВДА

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

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

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

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

Инструменты проверки На уровне информации – голова На уровне задач – Тестирование с пользователями, экспертная оценка и т.п. На механическом уровне – Инструменты и чеклисты – прорка иерархии, контрастности, валидности и т.п.

МЕХАНИЧЕСКИЙ УРОВЕНЬ ПРОВЕРКИ Инструменты? Да, причем бесплатно

ОБОЛОЧКА ДЛЯ ВСЕХ ИНСТРУМЕНТОВ – БРАУЗЕР.

Цветовой контраст Это не просто «разобрать цвета» для человека с нарушениями цветового восприятия

Цветовой контраст Возможность вообще понять, что происходит на странице Возможность разобрать текст при разных освещениях Анализатор цветового контраста – Color Contrast Analyser – Colorblind simulator – Check my colors!

Визуальная иерархия и струкура Это не просто «в каком порядке скринридер прочитает страницу»!

Визуальная иерархия и структура Определяет направление сканирования страницы Организует поведение пользоваеля Позволяет ориентироваться Помогает различать ссылки и находить их... WAVE – Структура заголовков – Вложенность – Структура и порядок блоков на странице FANGS – Эмулятор скринридера

Визуальная иерархия

CSS, скрипты и картинки Это не просто «сможет ли пользователь работать без картинок»

CSS, скрипты и картинки Сможем ли работать на слабом интернет- соединении? А что будет, если не загрузится скрипт? А если я зайду с мобильного устройства?... Web Developer Toolbar, WAVE – Отключение JS – Отключение CSS – Проверка alt

CSS, скрипты и картинки

WCAG, валидность, веб-стандарты, семантика Это не пустой звук и не красивый значок. И даже не предмет спорта для яйцеголовых

WCAG, валидность, веб-стандарты, семантика Некоторая гарантия того, что вашим сайтом можно пользоваться почти в любых условиях Web Developer Toolbar WAVE HTML Validator

Спасибо!

БОНУС: АЛГОРИТМ ПРОВЕРКИ В ШАГАХ

Firefox Утилиты разработчика – Web Developer Toolbar Web Developer Toolbar Линеаризатор контента – Fangs Fangs Анализатор цветового контраста – Color Contrast Analyser Color Contrast Analyser – Colorblind simulator Colorblind simulator – Check my colors! Check my colors!

Web-сервисы Анализатор цветового контраст – Juicy Studio Color Analyzer (для равномерно окрашенных картинок) Juicy Studio Color Analyzer – Vischeck (для всех остальных Vischeck Валидатор –

ПРОВЕРКА ГРАФИЧЕСКИХ ЭЛЕМЕНТОВ

Проверить наличие "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 Vischeck Ожидаемый результат: цветовой контраст находится в допустимых пределах

Проверить отсутствие двигающихся частей страницы Не должно быть: – миганий – потряхиваний – "бегущих строк

НЕМНОГО ПРО КОД

Отключить CSS В Web Developer: – CSS > Disable styles > All styles Ожидаемый результат: – документ все еще можно понять и прочитать

Проверить наличие фреймов Открыть страницу и убедиться, что: – фреймов нет, или – они есть правильно размеченные, и есть

Проверить на валидность В Web Developer: – Tools > Validate HTML – Tools > Validate CSS или –

Проверить на отсутствие deprecated elements В Web Developer: – Outline > Outline deprecated elements Ожидаемый результат: – ни один элемент не обведен

Проверить таблицы В Web Developer: – Miscellaneous > Linearize page – Information > Table information Ожидаемый результат: – таблицы не должны использоваться для разметки (в крайнем случае в них не должны использоваться,, ) – таблицы должны быть правильно прописаны (,

Проверить работу без 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