JavaScript и доступность web-приложений

899 views
829 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
899
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript и доступность web-приложений

  1. 1. JavaScript и доступность веб-сайтов<br />Владимир Агафонкин<br />
  2. 2. Доступность:<br />степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей <br />
  3. 3. Доступность:<br />степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей <br />независимо от их физических или технических возможностей<br />
  4. 4. представьте себесреднестатического пользователя Интернет<br />
  5. 5.
  6. 6. а что, если ты не среднестатический пользователь?<br />
  7. 7. технические ограничения<br />
  8. 8. технические ограничения<br />браузер, в котором не поддерживается или отключён JavaScript<br />ограниченные или нестандартные устройства ввода/вывода<br />ограничение трафика или пропускной способности канала<br />
  9. 9. физические ограничения<br />
  10. 10. физические ограничения<br />зрительной функции<br />(слепота, плохое зрение, дальтонизм)<br />двигательных функций<br />(в частности движения рук)<br />когнитивные ограничения<br />(нарушения функций памяти, внимания)<br />множество других<br />
  11. 11. как такие люди вообще пользуются Web?<br />
  12. 12. вспомогательные технологии<br />
  13. 13. вспомогательные технологии<br /><ul><li>скрин-ридеры
  14. 14. терминалы Брайля
  15. 15. распознаватели речи
  16. 16. экранные увеличители
  17. 17. множество других</li></li></ul><li>как сделать сайт доступным?<br />семантическая вёрстка <br />(привет, Вадим :)<br />правильное использование JavaScript<br />
  18. 18. с чем могут быть проблемы при использовании JavaScript?<br />навигация<br />(чаще всего строгая зависимость от мыши)<br />скрытый контент<br />оповещение пользователя о динамических изменениях на странице<br />нестандартное поведение браузера<br />(например, Ajax и кнопки вперёд/назад)<br />
  19. 19. два шага к доступности:<br />предоставить не требующую JavaScriptальтернативу всего содержимого и функциональности<br />сделать саму JavaScript-функциональность максимально доступной<br />
  20. 20. доступный JavaScript<br />
  21. 21. в качестве элементов, принимающих важные действия от пользователя, используйте толькоэлементы, которые могут принимать фокусa, input, button, textarea, selectdiv.onclick<br />
  22. 22. события в JavaScript<br />устройство-зависимые<br />onclick<br />ondoubleclick<br />onmouseover<br />onmouseout<br />onmousedown<br />onmouseup<br />onkeypress<br />onkeyup<br />onkeydown<br />устр.-независимые<br />onfocus<br />onblur<br />onchange<br />onselect<br />onclick*<br />* только для ссылок и элементов форм<br />
  23. 23. используйте по возможности только независимые от устройств событияonclick*, onfocus, onblur, onchange, onselect<br />
  24. 24. при необходимости использовать устройство-зависимые события, применяйте сразу группы аналогичных событий, например:onmouseover + onfocusonmouseout + onbluronmouseup + onkeyup<br />
  25. 25. убедитесь, что на сайте можно попасть куда угодно и сделать что угодно с помощью одной только клавиатуры<br />
  26. 26. обрабатывайте location.hash (чтобы работали ссылки на любой контент)website.com/blabla#tab1website.com/blabla#tab2website.com/gallery#photo1website.com/gallery#photo2<br />
  27. 27. используйте JS-библиотеки для реализации Ajax history- Really Simple History- jQuery history plugin- Mootools HistoryManager- YUI Browser History Manager- Dojo dojo.back<br />
  28. 28. избегайте использования всплывающих окон<a href=“…” onclick=“window.open(this.href) …<br />
  29. 29. избегайте использования CSS-only решений для динамической функциональности (например, dropdown menus)они обычно работают только с мышью<br />
  30. 30. как сделать сайт с кучей JavaScript-кода работающим без него?<br />
  31. 31. два подхода к разработке:<br />graceful degradation<br />progressive enhancement<br />
  32. 32. graceful degradation:<br />«плавное упрощение»<br />доработка полной версии сайта для функционирования без JavaScript в отдельных местах<br />
  33. 33. progressive enhancement:<br />создать полноценную версию сайта без JavaScript<br />заменить с помощью JavaScript стандартное поведение улучшенным (динамическим)<br />
  34. 34. как совершать эту замену?<br />unobtrusive Javascript<br />(ненавязчивый JavaScript)<br />
  35. 35. unobtrusive JavaScript:<br />поместить весь JS во внешние файлы<br />привязывать функциональность к событиям DOM-элементов<br />
  36. 36. банальный пример:<br />window.onload = function() {<br />var form = document.getElementById('comment-form');<br />form.onsubmit = function() { <br /> doSomeBrilliantAjaxyStuff();<br /> ...<br />return false;//отмена действия по умолчанию<br /> }<br />}<br />
  37. 37. пример с jQuery:<br />$(function() {<br />$(‘comment-form’).bind(‘submit’, function(e) {<br /> doSomeBrilliantAjaxyStuff();<br /> ...<br />e.preventDefault();<br /> })<br />})<br />
  38. 38. напоследок<br />
  39. 39. люди бываютразные<br />
  40. 40.
  41. 41.
  42. 42.
  43. 43. дайте каждому шанс воспользоваться вашим сайтом<br />
  44. 44. спасибо!<br />вопросы? <br />agafonkin@gmail.com<br />

×