Download - JavaScript и доступность web-приложений
JavaScript и доступность веб-
сайтовВладимир Агафонкин
Доступность:степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей
Доступность:степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей
независимо от их физических или технических возможностей
представьте себесреднестатического пользователя Интернет
а что, если ты не среднестатический пользователь?
технические ограничения
• браузер, в котором не поддерживается или отключён JavaScript
• ограниченные или нестандартные устройства ввода/вывода
• ограничение трафика или пропускной способности канала
технические ограничения
фи
зи
чески
е
огр
ани
чени
я
• зрительной функции (слепота, плохое зрение,
дальтонизм)• двигательных функций (в частности движения рук)
• когнитивные ограничения (нарушения функций памяти,
внимания)
• множество других
физические ограничения
как такие люди вообще пользуются Web?
вспомогательные технологии
• скрин-ридеры• терминалы Брайля• распознаватели речи• экранные увеличители• множество других
вспомогательные технологии
• семантическая вёрстка (привет, Вадим :)
• правильное использование JavaScript
как сделать сайт доступным?
• навигация (чаще всего строгая зависимость от
мыши)• скрытый контент• оповещение пользователя о
динамических изменениях на странице
• нестандартное поведение браузера
(например, Ajax и кнопки вперёд/назад)
с чем могут быть проблемы при использовании JavaScript?
1. предоставить не требующую JavaScript альтернативу всего содержимого и функциональности
2. сделать саму JavaScript-функциональность максимально доступной
два шага к доступности:
доступный JavaScript
1. в качестве элементов, принимающих важные действия от пользователя, используйте только элементы, которые могут принимать фокус
a, input, button, textarea, selectdiv.onclick
события в JavaScriptустройство-
зависимые• onclick• ondoubleclick• onmouseover• onmouseout• onmousedown• onmouseup• onkeypress• onkeyup• onkeydown
устр.-независимые
• onfocus• onblur• onchange• onselect• onclick* * только для
ссылок и элементов форм
2. используйте по возможности только независимые от устройств события
onclick*, onfocus, onblur, onchange, onselect
3. при необходимости использовать устройство-зависимые события, применяйте сразу группы аналогичных событий, например:
onmouseover + onfocusonmouseout + onbluronmouseup + onkeyup
4. убедитесь, что на сайте можно попасть куда угодно и сделать что угодно с помощью одной только клавиатуры
5. обрабатывайте location.hash (чтобы работали ссылки на любой контент)
website.com/blabla#tab1website.com/blabla#tab2
website.com/gallery#photo1website.com/gallery#photo2
6. используйте JS-библиотеки для реализации Ajax history
- Really Simple History- jQuery history plugin- Mootools HistoryManager- YUI Browser History Manager- Dojo dojo.back
7. избегайте использования всплывающих окон
<a href=“…” onclick=“window.open(this.href) …
8. избегайте использования CSS-only решений для динамической функциональности (например, dropdown menus)
они обычно работают только с мышью
как сделать сайт с кучей JavaScript-кода
работающим без него?
1.graceful degradation2.progressive enhancement
два подхода к разработке:
graceful degradation:«плавное упрощение»
доработка полной версии сайта для функционирования без JavaScript в отдельных местах
progressive enhancement:
1. создать полноценную версию сайта без JavaScript
2. заменить с помощью JavaScript стандартное поведение улучшенным (динамическим)
unobtrusive Javascript(ненавязчивый JavaScript)
как совершать эту замену?
1. поместить весь JS во внешние файлы
2. привязывать функциональность к событиям DOM-элементов
unobtrusive JavaScript:
window.onload = function() {var form = document.getElementById('comment-
form');form.onsubmit = function() {
doSomeBrilliantAjaxyStuff();...return false; //отмена действия по
умолчанию}
}
банальный пример:
$(function() {$(‘comment-form’).bind(‘submit’,
function(e) {doSomeBrilliantAjaxyStuff();...e.preventDefault();
})})
пример с jQuery:
напоследок
люди бывают разные
дайте каждому шанс
воспользоваться вашим сайтом
спасибо!вопросы?