SlideShare una empresa de Scribd logo
1 de 41
JavaScript  и доступность веб-сайтов Владимир Агафонкин
Доступность : степень того,  насколько возможно  пользоваться сайтом как можно более широкой аудитории людей
Доступность : степень того,  насколько возможно  пользоваться сайтом как можно более широкой аудитории людей  независимо  от их физических или технических возможностей
представьте себе среднестатического пользователя Интернет
 
а что, если ты  не  среднестатический пользователь?
технические ограничения
[object Object],[object Object],[object Object],технические ограничения
физические ограничения
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],физические ограничения
как такие люди вообще пользуются  Web ?
вспомогательные технологии
[object Object],[object Object],[object Object],[object Object],[object Object],вспомогательные технологии
[object Object],[object Object],[object Object],как сделать сайт доступным?
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],с чем могут быть проблемы при использовании  JavaScript ?
[object Object],[object Object],два шага к доступности:
доступный  JavaScript
[object Object]
события в  JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
как сделать сайт с кучей  JavaScript- кода работающим  без него ?
[object Object],[object Object],два подхода к разработке:
graceful degradation : «плавное упрощение» доработка полной версии сайта для функционирования без  JavaScript  в отдельных местах
progressive enhancement : ,[object Object],[object Object]
[object Object],[object Object],как совершать эту замену?
[object Object],[object Object],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]

Más contenido relacionado

La actualidad más candente

Chrome push notifications. Анатомия и разработка
Chrome push notifications. Анатомия и разработкаChrome push notifications. Анатомия и разработка
Chrome push notifications. Анатомия и разработкаAlexandr Mikhaylenko
 
Оптимизация времени загрузки сайта: проблемы и решения
Оптимизация времени загрузки сайта: проблемы и решенияОптимизация времени загрузки сайта: проблемы и решения
Оптимизация времени загрузки сайта: проблемы и решенияMedia Gorod
 
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил РеенкоJSib
 
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10OdessaFrontend
 
Особенности разработки браузерных расширений для Single Page Application
Особенности разработки браузерных расширений для Single Page ApplicationОсобенности разработки браузерных расширений для Single Page Application
Особенности разработки браузерных расширений для Single Page Applicationchaykaborya
 
Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.Vladimir Malyk
 
Веб-компоненты в веб-разработке на примере Polymer
Веб-компоненты в веб-разработке на примере PolymerВеб-компоненты в веб-разработке на примере Polymer
Веб-компоненты в веб-разработке на примере PolymerArturDr
 
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...QAFest
 
Ошибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений КонцевойОшибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений КонцевойЛеонид Гроховский
 
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...JSib
 
Appium+Cucumber+Ruby: мобильная автоматизация малой кровью, Андрей Малых, Аб...
 Appium+Cucumber+Ruby: мобильная автоматизация малой кровью, Андрей Малых, Аб... Appium+Cucumber+Ruby: мобильная автоматизация малой кровью, Андрей Малых, Аб...
Appium+Cucumber+Ruby: мобильная автоматизация малой кровью, Андрей Малых, Аб...it-people
 
Реактивный фронтенд фреймворк для людей (Константин Комелин)
Реактивный фронтенд фреймворк для людей (Константин Комелин)Реактивный фронтенд фреймворк для людей (Константин Комелин)
Реактивный фронтенд фреймворк для людей (Константин Комелин)DrupalYug
 
Beminar js
Beminar jsBeminar js
Beminar jsYandex
 
Вебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проектаВебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проектаYandex
 
Vue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людейVue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людейKonstantin Komelin
 

La actualidad más candente (20)

Bootstrap3 basics
Bootstrap3 basicsBootstrap3 basics
Bootstrap3 basics
 
Chrome push notifications. Анатомия и разработка
Chrome push notifications. Анатомия и разработкаChrome push notifications. Анатомия и разработка
Chrome push notifications. Анатомия и разработка
 
Оптимизация времени загрузки сайта: проблемы и решения
Оптимизация времени загрузки сайта: проблемы и решенияОптимизация времени загрузки сайта: проблемы и решения
Оптимизация времени загрузки сайта: проблемы и решения
 
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
 
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
 
Особенности разработки браузерных расширений для Single Page Application
Особенности разработки браузерных расширений для Single Page ApplicationОсобенности разработки браузерных расширений для Single Page Application
Особенности разработки браузерных расширений для Single Page Application
 
website optimization on client side
website optimization on client sidewebsite optimization on client side
website optimization on client side
 
Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.
 
Веб-компоненты в веб-разработке на примере Polymer
Веб-компоненты в веб-разработке на примере PolymerВеб-компоненты в веб-разработке на примере Polymer
Веб-компоненты в веб-разработке на примере Polymer
 
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...
 
Ошибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений КонцевойОшибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений Концевой
 
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
 
Appium+Cucumber+Ruby: мобильная автоматизация малой кровью, Андрей Малых, Аб...
 Appium+Cucumber+Ruby: мобильная автоматизация малой кровью, Андрей Малых, Аб... Appium+Cucumber+Ruby: мобильная автоматизация малой кровью, Андрей Малых, Аб...
Appium+Cucumber+Ruby: мобильная автоматизация малой кровью, Андрей Малых, Аб...
 
Реактивный фронтенд фреймворк для людей (Константин Комелин)
Реактивный фронтенд фреймворк для людей (Константин Комелин)Реактивный фронтенд фреймворк для людей (Константин Комелин)
Реактивный фронтенд фреймворк для людей (Константин Комелин)
 
AngularJS
AngularJSAngularJS
AngularJS
 
Ruby on Rails. Ajax-обработка html-форм
Ruby on Rails. Ajax-обработка html-формRuby on Rails. Ajax-обработка html-форм
Ruby on Rails. Ajax-обработка html-форм
 
Beminar js
Beminar jsBeminar js
Beminar js
 
Вебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проектаВебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проекта
 
Vue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людейVue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людей
 
Cakephp
CakephpCakephp
Cakephp
 

Destacado

National Security and Strategic Communications
National Security and Strategic CommunicationsNational Security and Strategic Communications
National Security and Strategic CommunicationsBob Crawshaw
 
MINI Electrophysiology and CARMEN
MINI Electrophysiology and CARMENMINI Electrophysiology and CARMEN
MINI Electrophysiology and CARMENguest469de8
 
Technology+Use+Vs[1]
Technology+Use+Vs[1]Technology+Use+Vs[1]
Technology+Use+Vs[1]Dvolta
 
Seeds In The Fieldf
Seeds In The FieldfSeeds In The Fieldf
Seeds In The Fieldfguest06acc9
 
Kayla Dykstra
Kayla DykstraKayla Dykstra
Kayla Dykstrakdykstra
 
Erosion del Tiempo
Erosion del TiempoErosion del Tiempo
Erosion del Tiempofasago
 
Media Releases for Lions Clubs
Media Releases for Lions ClubsMedia Releases for Lions Clubs
Media Releases for Lions ClubsBob Crawshaw
 
Google Apps for High School
Google Apps for High SchoolGoogle Apps for High School
Google Apps for High Schooldevoncadams
 
Open House
Open HouseOpen House
Open Housejacmeyer
 
Media Success For Small Sporting Clubs
Media Success For Small Sporting ClubsMedia Success For Small Sporting Clubs
Media Success For Small Sporting ClubsBob Crawshaw
 
Create Your Content Marketing Team
Create Your Content Marketing TeamCreate Your Content Marketing Team
Create Your Content Marketing TeamBob Crawshaw
 
Measure Your Not For Profit Marketing
Measure Your Not For Profit MarketingMeasure Your Not For Profit Marketing
Measure Your Not For Profit MarketingBob Crawshaw
 
Alemania 1 7 08
Alemania 1   7   08Alemania 1   7   08
Alemania 1 7 08amfelisa
 
SoftWhere'08: Anne Helmond
SoftWhere'08: Anne HelmondSoftWhere'08: Anne Helmond
SoftWhere'08: Anne HelmondAnne Helmond
 

Destacado (20)

Once
OnceOnce
Once
 
National Security and Strategic Communications
National Security and Strategic CommunicationsNational Security and Strategic Communications
National Security and Strategic Communications
 
MINI Electrophysiology and CARMEN
MINI Electrophysiology and CARMENMINI Electrophysiology and CARMEN
MINI Electrophysiology and CARMEN
 
Technology+Use+Vs[1]
Technology+Use+Vs[1]Technology+Use+Vs[1]
Technology+Use+Vs[1]
 
Seeds In The Fieldf
Seeds In The FieldfSeeds In The Fieldf
Seeds In The Fieldf
 
Kayla Dykstra
Kayla DykstraKayla Dykstra
Kayla Dykstra
 
Thesis Defense
Thesis DefenseThesis Defense
Thesis Defense
 
Erosion del Tiempo
Erosion del TiempoErosion del Tiempo
Erosion del Tiempo
 
Makam Nabi Saw
Makam Nabi SawMakam Nabi Saw
Makam Nabi Saw
 
Media Releases for Lions Clubs
Media Releases for Lions ClubsMedia Releases for Lions Clubs
Media Releases for Lions Clubs
 
Maryam 2D Computer
Maryam  2D ComputerMaryam  2D Computer
Maryam 2D Computer
 
Google Apps for High School
Google Apps for High SchoolGoogle Apps for High School
Google Apps for High School
 
Ekzameny 12kl
Ekzameny 12klEkzameny 12kl
Ekzameny 12kl
 
Open House
Open HouseOpen House
Open House
 
Media Success For Small Sporting Clubs
Media Success For Small Sporting ClubsMedia Success For Small Sporting Clubs
Media Success For Small Sporting Clubs
 
Social Bookmark Api
Social Bookmark ApiSocial Bookmark Api
Social Bookmark Api
 
Create Your Content Marketing Team
Create Your Content Marketing TeamCreate Your Content Marketing Team
Create Your Content Marketing Team
 
Measure Your Not For Profit Marketing
Measure Your Not For Profit MarketingMeasure Your Not For Profit Marketing
Measure Your Not For Profit Marketing
 
Alemania 1 7 08
Alemania 1   7   08Alemania 1   7   08
Alemania 1 7 08
 
SoftWhere'08: Anne Helmond
SoftWhere'08: Anne HelmondSoftWhere'08: Anne Helmond
SoftWhere'08: Anne Helmond
 

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

Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5Provectus
 
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едятHappyDev-lite
 
История развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другиеИстория развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другиеlugnsk
 
белогорцев глеб белогорцев
белогорцев глеб белогорцевбелогорцев глеб белогорцев
белогорцев глеб белогорцевrit2010
 
Язык Javascript language Кантор Часть 3.pdf
Язык Javascript language Кантор Часть 3.pdfЯзык Javascript language Кантор Часть 3.pdf
Язык Javascript language Кантор Часть 3.pdfMarcAureleEmmanuel
 
FPUG Dzyga presentation
FPUG Dzyga presentationFPUG Dzyga presentation
FPUG Dzyga presentationIvan Filimonov
 
Кир Белевич "Touch it: универсальные тач-события и слайдер"
Кир Белевич "Touch it: универсальные тач-события и слайдер"Кир Белевич "Touch it: универсальные тач-события и слайдер"
Кир Белевич "Touch it: универсальные тач-события и слайдер"Yandex
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10Technopark
 
Mobile accessibility Testing / Тестирование доступности мобильного веба
Mobile accessibility Testing / Тестирование доступности мобильного вебаMobile accessibility Testing / Тестирование доступности мобильного веба
Mobile accessibility Testing / Тестирование доступности мобильного вебаDiana Shymbaliova
 
Адаптивный веб-дизайн на практике (Антон Епрев)
Адаптивный веб-дизайн на практике (Антон Епрев)Адаптивный веб-дизайн на практике (Антон Епрев)
Адаптивный веб-дизайн на практике (Антон Епрев)Ontico
 
создание живых сайтов
создание живых сайтовсоздание живых сайтов
создание живых сайтовmetaform
 
iOS and Android Mobile Test Automation
iOS and Android Mobile Test AutomationiOS and Android Mobile Test Automation
iOS and Android Mobile Test AutomationAndrii Dzynia
 
Mobile automation uamobile
Mobile automation uamobileMobile automation uamobile
Mobile automation uamobileUA Mobile
 
Appium для народа
Appium для народаAppium для народа
Appium для народаSQALab
 
Разработка мобильных приложений на HTML5
Разработка мобильных приложений на HTML5Разработка мобильных приложений на HTML5
Разработка мобильных приложений на HTML5DevDay
 
Воюем за ресурсы (ZFConf2011)
Воюем за ресурсы (ZFConf2011)Воюем за ресурсы (ZFConf2011)
Воюем за ресурсы (ZFConf2011)Alexey Kachayev
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.Igor Shkulipa
 
Систематизация экспрешнов в IE
Систематизация экспрешнов в IEСистематизация экспрешнов в IE
Систематизация экспрешнов в IERoman Komarov
 

Similar a JavaScript и доступность web-сайтов (20)

Selenium vs AJAX
Selenium vs AJAXSelenium vs AJAX
Selenium vs AJAX
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5
 
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
 
История развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другиеИстория развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другие
 
белогорцев глеб белогорцев
белогорцев глеб белогорцевбелогорцев глеб белогорцев
белогорцев глеб белогорцев
 
Язык Javascript language Кантор Часть 3.pdf
Язык Javascript language Кантор Часть 3.pdfЯзык Javascript language Кантор Часть 3.pdf
Язык Javascript language Кантор Часть 3.pdf
 
FPUG Dzyga presentation
FPUG Dzyga presentationFPUG Dzyga presentation
FPUG Dzyga presentation
 
Кир Белевич "Touch it: универсальные тач-события и слайдер"
Кир Белевич "Touch it: универсальные тач-события и слайдер"Кир Белевич "Touch it: универсальные тач-события и слайдер"
Кир Белевич "Touch it: универсальные тач-события и слайдер"
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
 
Mobile accessibility Testing / Тестирование доступности мобильного веба
Mobile accessibility Testing / Тестирование доступности мобильного вебаMobile accessibility Testing / Тестирование доступности мобильного веба
Mobile accessibility Testing / Тестирование доступности мобильного веба
 
Адаптивный веб-дизайн на практике (Антон Епрев)
Адаптивный веб-дизайн на практике (Антон Епрев)Адаптивный веб-дизайн на практике (Антон Епрев)
Адаптивный веб-дизайн на практике (Антон Епрев)
 
создание живых сайтов
создание живых сайтовсоздание живых сайтов
создание живых сайтов
 
iOS and Android Mobile Test Automation
iOS and Android Mobile Test AutomationiOS and Android Mobile Test Automation
iOS and Android Mobile Test Automation
 
Gwt jug basic
Gwt jug basicGwt jug basic
Gwt jug basic
 
Mobile automation uamobile
Mobile automation uamobileMobile automation uamobile
Mobile automation uamobile
 
Appium для народа
Appium для народаAppium для народа
Appium для народа
 
Разработка мобильных приложений на HTML5
Разработка мобильных приложений на HTML5Разработка мобильных приложений на HTML5
Разработка мобильных приложений на HTML5
 
Воюем за ресурсы (ZFConf2011)
Воюем за ресурсы (ZFConf2011)Воюем за ресурсы (ZFConf2011)
Воюем за ресурсы (ZFConf2011)
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.
 
Систематизация экспрешнов в IE
Систематизация экспрешнов в IEСистематизация экспрешнов в IE
Систематизация экспрешнов в IE
 

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