JavaScript и доступность веб- сайтов Владимир Агафонкин. - презентация

1 JavaScript и доступность веб- сайтов Владимир Агафонкин

2 Доступность: степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей

3 Доступность: степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей независимо от их физических или технических возможностей

4 представьте себе среднестатического пользователя Интернет

5

6 а что, если ты не среднестатистический пользователь?

7 технические ограничения

8 браузер, в котором не поддерживается или отключён JavaScript ограниченные или нестандартные устройства ввода/вывода ограничение трафика или пропускной способности канала технические ограничения

9 физические ограничения

10 зрительной функции (слепота, плохое зрение, дальтонизм ) двигательных функций (в частности движения рук) когнитивные ограничения (нарушения функций памяти, внимания) множество других физические ограничения

11 как такие люди вообще пользуются Web?

12 вспомогательные технологии

13 скрин-ридеры терминалы Брайля распознаватели речи экранные увеличители множество других вспомогательные технологии

14 семантическая вёрстка (привет, Вадим :) правильное использование JavaScript как сделать сайт доступным?

15 навигация (чаще всего строгая зависимость от мыши) скрытый контент оповещение пользователя о динамических изменениях на странице нестандартное поведение браузера (например, Ajax и кнопки вперёд/назад) с чем могут быть проблемы при использовании JavaScript?

16 1. предоставить не требующую JavaScript альтернативу всего содержимого и функциональности 2. сделать саму JavaScript- функциональность максимально доступной два шага к доступности:

17 доступный JavaScript

18 1. в качестве элементов, принимающих важные действия от пользователя, используйте только элементы, которые могут принимать фокус a, input, button, textarea, select div.onclick

19 события в JavaScript устройство- зависимые onclick ondoubleclick onmouseover onmouseout onmousedown onmouseup onkeypress onkeyup onkeydown устр.-независимые onfocus onblur onchange onselect onclick* * только для ссылок и элементов форм

20 2. используйте по возможности только независимые от устройств события onclick*, onfocus, onblur, onchange, onselect

21 3. при необходимости использовать устройство- зависимые события, применяйте сразу группы аналогичных событий, например: onmouseover + onfocus onmouseout + onblur onmouseup + onkeyup

22 4.убедитесь, что на сайте можно попасть куда угодно и сделать что угодно с помощью одной только клавиатуры

23 5. обрабатывайте location.hash (чтобы работали ссылки на любой контент) website.com/blabla#tab1 website.com/blabla#tab2 website.com/gallery#photo1 website.com/gallery#photo2

24 6. используйте JS-библиотеки для реализации Ajax history - Really Simple History - jQuery history plugin - Mootools HistoryManager - YUI Browser History Manager - Dojo dojo.back

25 7. избегайте использования всплывающих окон

26 8. избегайте использования CSS- only решений для динамической функциональности (например, dropdown menus) они обычно работают только с мышью

27 как сделать сайт с кучей JavaScript-кода работающим без него?

28 1. graceful degradation 2. progressive enhancement два подхода к разработке:

29 graceful degradation: «плавное упрощение» доработка полной версии сайта для функционирования без JavaScript в отдельных местах

30 progressive enhancement: 1. создать полноценную версию сайта без JavaScript 2. заменить с помощью JavaScript стандартное поведение улучшенным (динамическим)

31 unobtrusive Javascript (ненавязчивый JavaScript) как совершать эту замену?

32 1. поместить весь JS во внешние файлы 2. привязывать функциональность к событиям DOM-элементов unobtrusive JavaScript:

33 window.onload = function() { var form = document.getElementById('comment-form'); form.onsubmit = function() { doSomeBrilliantAjaxyStuff();... return false; //отмена действия по умолчанию } банальный пример:

34 $(function() { $(comment-form).bind(submit, function(e) { doSomeBrilliantAjaxyStuff();... e.preventDefault(); }) пример с jQuery:

35 напоследок

36 люди бывают разные

37

38

39

40 дайте каждому шанс воспользоваться вашим сайтом

41 спасибо ! вопросы?