JavaScript и доступность веб-сайтов Владимир Агафонкин

Доступность:
степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории

Доступность:
степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории

представьте себе среднестатического пользователя Интернет

а что, если ты не среднестатический пользователь?

технические ограничения

браузер, в котором не поддерживается или отключён JavaScript
ограниченные или нестандартные устройства

физические ограничения

зрительной функции
(слепота, плохое зрение, дальтонизм)
двигательных функций
(в частности движения рук)
когнитивные

как такие люди вообще пользуются Web?

вспомогательные технологии

скрин-ридеры
терминалы Брайля
распознаватели речи
экранные увеличители
множество других

вспомогательные технологии

семантическая вёрстка
(привет, Вадим :)
правильное использование JavaScript

как сделать сайт доступным?

навигация
(чаще всего строгая зависимость от мыши)
скрытый контент
оповещение пользователя о динамических

предоставить не требующую JavaScript альтернативу всего содержимого и функциональности
сделать саму JavaScript-функциональность

доступный JavaScript

в качестве элементов, принимающих важные действия от пользователя, используйте только элементы,

события в JavaScript

устройство-зависимые
onclick
ondoubleclick
onmouseover
onmouseout
onmousedown
onmouseup
onkeypress
onkeyup
onkeydown

устр.-независимые
onfocus
onblur
onchange
onselect
onclick*
* только для ссылок и элементов форм

используйте по возможности только независимые от устройств события onclick*, onfocus, onblur, onchange,

при необходимости использовать устройство-зависимые события, применяйте сразу группы аналогичных событий, например: onmouseover

убедитесь, что на сайте можно попасть куда угодно и сделать что

обрабатывайте location.hash (чтобы работали ссылки на любой контент) website.com/blabla#tab1 website.com/blabla#tab2 website.com/gallery#photo1 website.com/gallery#photo2

используйте JS-библиотеки для реализации Ajax history - Really Simple History - jQuery history

избегайте использования всплывающих окон

избегайте использования CSS-only решений для динамической функциональности (например, dropdown menus) они обычно

как сделать сайт с кучей JavaScript-кода работающим без него?

graceful degradation
progressive enhancement

два подхода к разработке:

graceful degradation:
«плавное упрощение»
доработка полной версии сайта для функционирования без JavaScript в

progressive enhancement:

создать полноценную версию сайта без JavaScript
заменить с помощью JavaScript стандартное

unobtrusive Javascript
(ненавязчивый JavaScript)

как совершать эту замену?

поместить весь JS во внешние файлы
привязывать функциональность к событиям 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:

напоследок

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

дайте каждому шанс воспользоваться вашим сайтом