Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript и доступность веб-сайтов<br />Владимир Агафонкин<br />
Доступность:<br />степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей <br />
Доступность:<br />степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей <br />незав...
представьте себесреднестатического пользователя Интернет<br />
а что, если ты не среднестатический пользователь?<br />
технические ограничения<br />
технические ограничения<br />браузер, в котором не поддерживается или отключён JavaScript<br />ограниченные или нестандарт...
физические ограничения<br />
физические ограничения<br />зрительной функции<br />(слепота, плохое зрение, дальтонизм)<br />двигательных функций<br />(в...
как такие люди вообще пользуются Web?<br />
вспомогательные технологии<br />
вспомогательные технологии<br /><ul><li>скрин-ридеры
терминалы Брайля
распознаватели речи
экранные увеличители
множество других</li></li></ul><li>как сделать сайт доступным?<br />семантическая вёрстка <br />(привет, Вадим :)<br />пра...
с чем могут быть проблемы при использовании JavaScript?<br />навигация<br />(чаще всего строгая зависимость от мыши)<br />...
два шага к доступности:<br />предоставить не требующую JavaScriptальтернативу всего содержимого и функциональности<br />сд...
доступный JavaScript<br />
в качестве элементов, принимающих важные действия от пользователя, используйте толькоэлементы, которые могут принимать фок...
события в JavaScript<br />устройство-зависимые<br />onclick<br />ondoubleclick<br />onmouseover<br />onmouseout<br />onmou...
используйте по возможности только независимые от устройств событияonclick*, onfocus, onblur, onchange, onselect<br />
при необходимости использовать устройство-зависимые события, применяйте сразу группы аналогичных событий, например:onmouse...
убедитесь, что на сайте можно попасть куда угодно и сделать что угодно с помощью одной только клавиатуры<br />
обрабатывайте location.hash (чтобы работали ссылки на любой контент)website.com/blabla#tab1website.com/blabla#tab2website....
используйте JS-библиотеки для реализации Ajax history-  Really Simple History- jQuery history plugin-  Mootools HistoryMan...
избегайте использования всплывающих окон<a href=“…” onclick=“window.open(this.href) …<br />
избегайте использования CSS-only решений для динамической функциональности (например, dropdown menus)они обычно работают т...
как сделать сайт с кучей JavaScript-кода работающим без него?<br />
два подхода к разработке:<br />graceful degradation<br />progressive enhancement<br />
graceful degradation:<br />«плавное упрощение»<br />доработка полной версии сайта для функционирования без JavaScript в от...
progressive enhancement:<br />создать полноценную версию сайта без JavaScript<br />заменить с помощью JavaScript стандартн...
как совершать эту замену?<br />unobtrusive Javascript<br />(ненавязчивый JavaScript)<br />
unobtrusive JavaScript:<br />поместить весь JS во внешние файлы<br />привязывать функциональность к событиям DOM-элементов...
банальный пример:<br />window.onload = function() {<br />var form = document.getElementById('comment-form');<br />form.ons...
пример с jQuery:<br />$(function() {<br />$(‘comment-form’).bind(‘submit’, function(e) {<br />		doSomeBrilliantAjaxyStuff(...
напоследок<br />
люди бываютразные<br />
Upcoming SlideShare
Loading in …5
×

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

996 views

Published on

Published in: Technology, Design
  • Be the first to comment

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 />

×