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

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

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

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

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

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

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

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

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

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

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

14. терминалы Брайля

15. распознаватели речи

16. экранные увеличители

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

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

20. доступный JavaScript

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

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

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

24. при необходимости использовать устройство-зависимые события, применяйте сразу группы аналогичных событий, например:onmouseover + onfocusonmouseout + onbluronmouseup + onkeyup

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

26. обрабатывайте location.hash (чтобы работали ссылки на любой контент)website.com/blabla#tab1website.com/blabla#tab2website.com/gallery#photo1website.com/gallery#photo2

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

28. избегайте использования всплывающих окон<a href=“…” onclick=“window.open(this.href) …

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

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

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

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

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

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

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

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

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

38. напоследок

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

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

44. спасибо! вопросы? agafonkin@gmail.com