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

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

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

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

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

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

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

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

ограниченные или нестандартные устройства ввода/вывода

ограничение трафика или пропускной способности канала

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

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

зрительной функции

(слепота, плохое зрение, дальтонизм )

двигательных функций

(в частности движения рук)

когнитивные ограничения

(нарушения функций памяти, внимания)

множество других

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

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

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

скрин-ридеры

терминалы Брайля

распознаватели речи

экранные увеличители

множество других

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

семантическая вёрстка

(привет, Вадим :)

правильное использование JavaScript

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

навигация

(чаще всего строгая зависимость от мыши)

скрытый контент

оповещение пользователя о динамических изменениях на странице

нестандартное поведение браузера

(например, Ajax и кнопки вперёд/назад)

с чем могут быть проблемы при использовании JavaScript ?

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

сделать саму JavaScript- функциональность максимально доступной

два шага к доступности:

доступный JavaScript

в качестве элементов, принимающих важные действия от пользователя, используйте только элементы, которые могут принимать фокус a, input, button, textarea, select div.onclick

события в JavaScript

устройство-зависимые

onclick

ondoubleclick

onmouseover

onmouseout

onmousedown

onmouseup

onkeypress

onkeyup

onkeydown

устр.-независимые

onfocus

onblur

onchange

onselect

onclick *

* только для ссылок и элементов форм

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

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

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

обрабатывайте 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 plugin - Mootools HistoryManager - YUI Browser History Manager - Dojo dojo.back

избегайте использования всплывающих окон <a href= “…” onclick= “ window.open(this.href) …

избегайте использования 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:

напоследок

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

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

спасибо! вопрос ы? [email_address]