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:

напоследок

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

дайте каждому шанс

воспользоваться вашим сайтом

спасибо!вопросы?

agafonkin@gmail.com