'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

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


Слайд 15

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


Слайд 16

доступный JavaScript


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

graceful degradation progressive enhancement два подхода к разработке:


Слайд 28

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


Слайд 29

progressive enhancement: создать полноценную версию сайта без JavaScript заменить с помощью JavaScript стандартное поведение улучшенным (динамическим)


Слайд 30

unobtrusive Javascript (ненавязчивый JavaScript) как совершать эту замену?


Слайд 31

поместить весь JS во внешние файлы привязывать функциональность к событиям DOM-элементов unobtrusive JavaScript:


Слайд 32

window.onload = function() { var form = document.getElementById('comment-form'); form.onsubmit = function() { doSomeBrilliantAjaxyStuff(); ... return false; //отмена действия по умолчанию } } банальный пример:


Слайд 33

$(function() { $(‘comment-form’).bind(‘submit’, function(e) { doSomeBrilliantAjaxyStuff(); ... e.preventDefault(); }) }) пример с jQuery:


Слайд 34

напоследок


Слайд 35

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


Слайд 36


Слайд 37


Слайд 38


Слайд 39

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


Слайд 40

спасибо! вопросы? agafonkin@gmail.com


×

HTML:





Ссылка: