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

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

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

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

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

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

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

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

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

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

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

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

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

навигация (чаще всего строгая зависимость от мыши) скрытый контент оповещение пользователя о динамических изменениях на странице нестандартное поведение браузера (например, Ajax и кнопки вперёд/назад) с чем могут быть проблемы при использовании JavaScript?

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

доступный JavaScript

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

события в JavaScript устройство- зависимые onclick ondoubleclick onmouseover onmouseout onmousedown onmouseup onkeypress onkeyup onkeydown устр.-независимые onfocus onblur onchange onselect onclick* * только для ссылок и элементов форм

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

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

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

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

6. используйте JS-библиотеки для реализации Ajax history - Really Simple History - jQuery history plugin - Mootools HistoryManager - YUI Browser History Manager - Dojo dojo.back

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

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

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

1. graceful degradation 2. 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:

напоследок

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

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

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