ОБЩЕДОСТУПНАЯ ПРОВЕРКА НА ОБЩЕДОСТУПНОСТЬ. О каких ограничениях идет речь? По зрению (острота, восприятие цвета) Моторные Когнитивные...? - презентация

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

2

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

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

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

6 НЕТ, ПРАВДА

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22

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

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

25 Спасибо!

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

27 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!

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

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

30 Проверить наличие "alt" у картинок В Web Developer: – Images > Outline images without ALT attribute – Images > Replace images with ALT Ожидаемый результат: – страница не потеряет информативности Outline images without ALT attribute – Images > Replace images with ALT Ожидаемый результат: – страница не потеряет информативности">

31 Отключить цвета на странице В Web Developer: – Disable > Disable page colours – Images > Disable all images Ожидаемый результат: – страница не потеряет информативности

32 Отключить изображения на странице В Web Developer: – Images > Disable Images > All images Ожидаемый результат: – страница не потеряет информативности

33 Проверить цветовой контраст Для равномерных изображений – в зависимости от инструмента Для всех остальных: – Vischeck Vischeck Ожидаемый результат: цветовой контраст находится в допустимых пределах

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

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

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

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

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

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

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

41 Проверить работу без JavaScript В Web Developer: – Disable > Disable JavaScript > All JavaScript – Disable Java Ожидаемый результат: – страница работает, документ читаем, ссылки работают

42 Проверить, в чем задаются размеры элементов Ожидаемый результат: элементы задаются в % или в em (исключение: margin, padding)

43 КОНТЕНТ

44 Проверить таблицы с данными В Web Developer: – в случае таблицы с одним логическим уровнем: – Information > Display table information – в случае таблицы с большим количеством уровней: – проверить код страницы вручную Ожидаемый результат: – для таблицы прописаны заголовки строк и столбцов, указаны id – заголовки и ячейки ассоциированы с помощью id

45 Проверить заголовки В Web Developer: – Outline > Headings Ожидаемый результат: – документ содержит заголовки и подзаголовки, иерархия логична и отражает смысловую иерархию контента

46 Проверить метаданные В Web Developer: – Information > View Metatags information Ожидаемый результат: – адекватные метаданные

47 Проверить абревиатуры В Web Developer: – Information > Display abbreviation Ожидаемый результат: – все аббревитаруы объяснены, неизвестных нет

48 Проверить ссылки В Web Developer: – Information > Display abbreviation Ожидаемый результат: – нет ссылок с target"=_blank" – нет ссылок, ведущих в разные места, но с одинаковыми названиями

49 ...И ЭТО ЕЩЕ НЕ ВСЕ!

50 Материалы Доступные веб-формы WCAG1.0 WCAG2.0 Вводная в WAI О WAI и ссылки на ресурсы W3C Технологии реализации Чеклист по WCAG1.0 Разработчики Fangs