JavaScript и доступность web-сайтов

1,655 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,655
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript и доступность web-сайтов

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

×