FrontTalks #1: Владимир Старков – Зачем и как сделать сайт доступным?

Ограничения людей, какие бывают ограничения? Кто эти люди? Зачем вообще тратить на это время и как убедить начальника, что это нужно делать?

Transcript

1. Зачем? и Как?
2. 1. «Зачем нужен доступный сайт?»
3. Сайт будет удобен бо́льшему количеству людей
4. Сайт принесёт больше денег
5. А теперь поговорим о людях
6. Ограничения людей
7. Какие бывают ограничения? • Слабовидящие • Незрячие • Когнитивные расстройства • Глухие • Глухонемые • Нарушения памяти • Нарушения опорнодвигательного аппарата • Нарушения моторики речи • Повышенная фоточувствительность • Комбинация перечисленных нарушений 07
8. — Хорошо, сколько этих — Хорошо, сколько этих людей? людей?
9. «Всего» один из пяти «Всего» один из пяти
10. 19% пользователей Сумма IE8+IE9 на 15 февраля 13 года равняется 9.1% http://www.liveinternet.ru/stat/… 10
11. — Как убедить начальника начать менять сайт? Привет. Мы готовы и дальше отказываться от девятнадцати процентов аудитории? “ 11
12. — Окей, мы готовы. Есть какие-то наработки в этой области? 12
13. Стандарты и бренды: • WCAG • Section 508 • ГОСТ Р 52872 • Опытное креативное бюро 13
14. Минутка MTV • Валиден, значит доступен • Доступный сайт должен быть уродливым • Доступный сайт нужен только слепым • Забота о доступности - дорогой и сложный процесс • Текстовой версии достаточно • Технологии доступности обычно доступны • Инвалидов в интернете нет • Доступный сайт неудобен 14
15. Делая сайт доступным, вы делаете его
17. 2. «Как делать доступный сайт?»
18. Обязательно держите в уме • Семантичность • Капча не нужна! • Флеш не нужен! • Крупные активные области (Закон Фитса) • Доступность с клавиатуры • Следите за структурой заголовков • Порядок контента на сайте 18
19. Маленькие помощники из бойлерплейта
20. / * С к р ы т о в и з у а л ь н о , д о с т у п н о д л я с к р и н р и д е р о в * / / * h 5 b p . c o m / v * / . v i s u a l l y h i d d e n { b o r d e r : 0 ; c l i p : r e c t ( 0 0 0 0 ) ; h e i g h t : 1 p x ; w i d t h : 1 p x ; m a r g i n : - 1 p x ; p a d d i n g : 0 ; o v e r f l o w : h i d d e n ; p o s i t i o n : a b s o l u t e ; } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 .20
21. / * П о к а з а н ы п о л ь з о в а т е л ю п р и п о л у ч е н и и ф о к у с а * / / * h 5 b p . c o m / p * / . v i s u a l l y h i d d e n . f o c u s a b l e : a c t i v e , . v i s u a l l y h i d d e n . f o c u s a b l e : f o c u s { c l i p : a u t o ; h e i g h t : a u t o ; w i d t h : a u t o ; m a r g i n : 0 ; o v e r f l o w : v i s i b l e ; p o s i t i o n : s t a t i c ; } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 .21
22. Основы
23. Основы • Заголовки • Текст • Картинки • Таблицы • WAI-ARIA 23
24. Заголовки Должна существовать строгая архитектура — По заголовкам ним можно воссоздать навигацию на странице 24
25. Текст • Интерлиньяж не меньше 1.2 • Отступы не b r, а p + p { m a r g i n - t o p : 1 e m ; } • Не делайте меньше 16 пикселей — 16 Pixels For Body Copy. Anything Less Is A Costly Mistake • Следите за контрастностью — http://contrastrebellion.com/ • И ещё раз контраст! — http://snook.ca/technical/colour_contrast/colour.html 25
26. Картинки • a l t должен быть всегда! • Если картинка декоративная, то a l t пустой и r o l e = " p r e s e n t a t i o n " • Если описание картинки повторяет, a l t пустой • Иначе зачитывается имя файла 26
27. Таблицы • Только для табличных данных • t a b l e [ s u m m a r y = " S M T H " ] • c a p t i o n • t h e a d > t h • t b o d y может быть несколько • t f o o t 27
28. 2.3. WAI-ARIA
29. Accessible Rich Internet Applications
30. Мы научились создавать крутые приложения,
31. но вместе с тем, также научились создавать
32. Accessible Rich Internet Applications • для каждого примера использования особенно в современных веб- приложениях, есть условия для применения АРИА тегов. • Посмотрите исходники jQuery 32
33. ARIA Document Structure article columnheader definition directory document group heading img list listitem math note presentation region row rowheader separator 33
34. ARIA Landmarks http://www.w3.org/TR/wai-aria/roles#landmark_roles application banner complementary contentinfo form main navigation search 34
35. ARIA Widget Roles alert alertdialog button checkbox combobox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio option progressbar radio radiogroup scrollbar slider spinbutton status tab tabpanel textbox timer tooltip treeitem 35
36. ARIA Widget Container Roles grid listbox menu menubar tablist toolbar tree treegrid 36
37. ARIA Widget Properties Все свойства начинаются с a r i a - … activedescendant atomic autocomplete controls describedby dropeffect flowto haspopup label labelledby level live multiline multiselectable orientation owns posinset readonly relevant required setsize sort valuemax valuemin 37
38. — Этого мало. Нужно больше материала! Я собирал несколько месяцев: — vstarkov.ru/big-a11y-digest/ 38
39. «Зачем вам нужен доступный сайт или, как показать сайт незрячему? Владимир Старков, Цифровая собственность. • vstarkov.ru Не стесняйтесь задавать вопросы в твиттере и на почту: • twitter.com/matmuchrapna • github.com/matmuchrapna • matmuchrapna@gmail.com 39