- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
JavaScript и доступность веб-сайтов презентация
Содержание
- 1. JavaScript и доступность веб-сайтов
- 2. Доступность: степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей
- 3. Доступность: степень того, насколько возможно пользоваться сайтом
- 4. представьте себе среднестатического пользователя Интернет
- 6. а что, если ты не среднестатический пользователь?
- 7. технические ограничения
- 8. браузер, в котором не поддерживается или отключён
- 9. физические ограничения
- 10. зрительной функции (слепота, плохое
- 11. как такие люди вообще пользуются Web?
- 12. вспомогательные технологии
- 13. скрин-ридеры терминалы Брайля распознаватели речи экранные увеличители множество других вспомогательные технологии
- 14. семантическая вёрстка (привет,
- 15. навигация (чаще всего строгая зависимость
- 16. предоставить не требующую JavaScript альтернативу всего содержимого
- 17. доступный JavaScript
- 18. в качестве элементов, принимающих важные действия от
- 19. события в JavaScript устройство-зависимые onclick ondoubleclick onmouseover
- 20. используйте по возможности только независимые от устройств события onclick*, onfocus, onblur, onchange, onselect
- 21. при необходимости использовать устройство-зависимые события, применяйте сразу
- 22. убедитесь, что на сайте можно попасть куда
- 23. обрабатывайте location.hash (чтобы работали ссылки на любой контент) website.com/blabla#tab1 website.com/blabla#tab2 website.com/gallery#photo1 website.com/gallery#photo2
- 24. используйте JS-библиотеки для реализации Ajax history
- 25. избегайте использования всплывающих окон
- 26. избегайте использования CSS-only решений для динамической функциональности
- 27. как сделать сайт с кучей JavaScript-кода работающим без него?
- 28. graceful degradation progressive enhancement два подхода к разработке:
- 29. graceful degradation: «плавное упрощение» доработка полной версии сайта для функционирования без JavaScript в отдельных местах
- 30. progressive enhancement: создать полноценную версию сайта без
- 31. unobtrusive Javascript (ненавязчивый JavaScript) как совершать эту замену?
- 32. поместить весь JS во внешние файлы привязывать функциональность к событиям DOM-элементов unobtrusive JavaScript:
- 33. window.onload = function() { var form =
- 34. $(function() { $(‘comment-form’).bind(‘submit’, function(e) { doSomeBrilliantAjaxyStuff(); ... e.preventDefault(); }) }) пример с jQuery:
- 35. напоследок
- 36. люди бывают разные
- 40. дайте каждому шанс воспользоваться вашим сайтом
- 41. спасибо! вопросы? agafonkin@gmail.com
Доступность: степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории людей
Слайд 2Доступность:
степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории
людей
Слайд 3Доступность:
степень того, насколько возможно пользоваться сайтом как можно более широкой аудитории
людей
независимо от их физических или технических возможностей
независимо от их физических или технических возможностей
Слайд 8браузер, в котором не поддерживается или отключён JavaScript
ограниченные или нестандартные устройства
ввода/вывода
ограничение трафика или пропускной способности канала
ограничение трафика или пропускной способности канала
технические ограничения
Слайд 10зрительной функции
(слепота, плохое зрение, дальтонизм)
двигательных функций
(в
частности движения рук)
когнитивные ограничения
(нарушения функций памяти, внимания)
множество других
когнитивные ограничения
(нарушения функций памяти, внимания)
множество других
физические ограничения
Слайд 13скрин-ридеры
терминалы Брайля
распознаватели речи
экранные увеличители
множество других
вспомогательные технологии
Слайд 14семантическая вёрстка
(привет, Вадим :)
правильное использование JavaScript
как сделать
сайт доступным?
Слайд 15навигация
(чаще всего строгая зависимость от мыши)
скрытый контент
оповещение пользователя о
динамических изменениях на странице
нестандартное поведение браузера
(например, Ajax и кнопки вперёд/назад)
нестандартное поведение браузера
(например, Ajax и кнопки вперёд/назад)
с чем могут быть проблемы при использовании JavaScript?
Слайд 16предоставить не требующую JavaScript альтернативу всего содержимого и функциональности
сделать саму JavaScript-функциональность
максимально доступной
два шага к доступности:
Слайд 18в качестве элементов, принимающих важные действия от пользователя, используйте только элементы,
которые могут принимать фокус
a, input, button, textarea, select
div.onclick
Слайд 19события в JavaScript
устройство-зависимые
onclick
ondoubleclick
onmouseover
onmouseout
onmousedown
onmouseup
onkeypress
onkeyup
onkeydown
устр.-независимые
onfocus
onblur
onchange
onselect
onclick*
* только для ссылок и элементов форм
Слайд 20используйте по возможности только независимые от устройств события onclick*, onfocus, onblur, onchange,
onselect
Слайд 21при необходимости использовать устройство-зависимые события, применяйте сразу группы аналогичных событий, например: onmouseover
+ onfocus
onmouseout + onblur
onmouseup + onkeyup
Слайд 22убедитесь, что на сайте можно попасть куда угодно и сделать что
угодно с помощью одной только клавиатуры
Слайд 23обрабатывайте location.hash
(чтобы работали ссылки на любой контент)
website.com/blabla#tab1
website.com/blabla#tab2
website.com/gallery#photo1
website.com/gallery#photo2
Слайд 24используйте JS-библиотеки для реализации Ajax history - Really Simple History - jQuery history
plugin
- Mootools HistoryManager
- YUI Browser History Manager
- Dojo dojo.back
Слайд 26избегайте использования CSS-only решений для динамической функциональности (например, dropdown menus) они обычно
работают только с мышью
Слайд 29graceful degradation:
«плавное упрощение»
доработка полной версии сайта для функционирования без JavaScript в
отдельных местах
Слайд 30progressive enhancement:
создать полноценную версию сайта без JavaScript
заменить с помощью JavaScript стандартное
поведение улучшенным (динамическим)
Слайд 32поместить весь JS во внешние файлы
привязывать функциональность к событиям DOM-элементов
unobtrusive JavaScript:
Слайд 33window.onload = function() {
var form = document.getElementById('comment-form');
form.onsubmit = function() {
doSomeBrilliantAjaxyStuff();
...
return false;
//отмена действия по умолчанию
}
}
}
}
банальный пример:
Слайд 34$(function() {
$(‘comment-form’).bind(‘submit’, function(e) {
doSomeBrilliantAjaxyStuff();
...
e.preventDefault();
})
})
пример с jQuery:
