Transcript 19 май 2007 2
Slide 1
Ползваемост срещу
достъпност в Web 2.0
Slide 2
Съдържание
• Web 2.0, достъпност и ползваемост
• Примери за лоша достъпност и методи
за решаване
• Нови пътища за развитие на
достъпността
19 май 2007
riabg.org
2
Slide 3
Ползваемост
• Качества, които правят даден продукт ...
– лесен
– удобен
– приятен
– интуитивен
• ... за използване
19 май 2007
riabg.org
3
Slide 4
Достъпност
• Качества, които правят дадено нещо
годно за пълноценно възприемане от ...
– хора
– софтуер
– хардуер
• ... с различни (ограничени) възможности
19 май 2007
riabg.org
4
Slide 5
Web 1.0 и Web 2.0
• Web 1.0
– таблици
– много картинки в HTML-a
• Web 2.0
– семантичен код и CSS
– Javascript и AJAX
– фокус върху интерфейса и
потребителското преживяване
19 май 2007
riabg.org
5
Slide 6
Нов Web, нови проблеми (1)
• Нови технологии без достъпен
еквивалент
– AJAX, Flash, Flex, Silverlight
• Динамично съдържание
• Нови уеб компоненти с непознати роли
– slider, tree, progress bar
• Повече и различни устройства с достъп
до web
19 май 2007
riabg.org
6
Slide 7
Нов Web, нови проблеми (2)
• Jakob Nielsen: “Web 2.0 пренебрегва
добрия дизайн”
– динамично съдържание
– твърде много инструменти
• сложни и неинтуитивни интерфейси
• лъскави и неефективни сайтове
• 37 Signals: “Do less”
19 май 2007
riabg.org
7
Slide 8
Нов Web, нови проблеми (3)
• “Мирният атом – е, с това ли че ореме сега?”
– Борис Ангелушев
19 май 2007
riabg.org
8
Slide 9
Подходи към проблемите
• Кои проблеми?
• N версии за N вида нужди
– версия за екран
– версия за печат
– версия за мобилни телефони
– версия за слепи
– версия за Карчо Пелев от с. Красен
• 1 версия за всички ситуации
19 май 2007
riabg.org
9
Slide 10
Примери за лоша достъпност (1)
• display: none;
– елементът се скрива и от екранните четци
– решение
• .none { position: absolute; left: -3000px; }
– несполучливи решения
• visibility: hidden;
• width: 0; height: 0; overflow: hidden;
19 май 2007
riabg.org
10
Slide 11
Примери за лоша достъпност (2)
• връзки, включващи няколко обекта
(composite links)
– JAWS: прочита първите 2 обекта
– Windows Eyes: прочита последните 2
– решения
• не повече от 2 обекта в линк
• прегрупиране на HTML елементите
• връзки, разделени само с интервал
19 май 2007
riabg.org
11
Slide 12
Примери за лоша достъпност (3)
• layout, float и мобилните
телефони
– фиксирани ширини на
елементите – хоризонтален
скрол
– ширини в проценти – нечитаем
текст
– решения
• пълно изключване на CSS-a
• избрани стилове се включват с
Javascript
19 май 2007
riabg.org
12
Slide 13
Примери за лоша достъпност (4)
• “въведи числото от картинката”
– решения
• автоматично попълване на скрито поле за
посетителите с Javascript
• ръчно попълване на полето за останалите
• по-сложни схеми с timestamp, honey pots,
хеширане и др.
– недостатък на решенията
• ниска дуракоустойчивост
19 май 2007
riabg.org
13
Slide 14
Примери за лоша достъпност (5)
• празни полета във формите
– старите и/или примитивните браузъри ги
игнорират
– решение
• стойност по подразбиране
– необходимост от триене и проблем с ползваемостта
• премахване на стойността по подразбиране с
javascript
19 май 2007
riabg.org
14
Slide 15
Примери за лоша достъпност (6)
• обновяване на съдържание с AJAX
– решение
• презареждане на страницата с маркер към
мястото, където е промяната
http://domain.com/page.php#newContent
19 май 2007
riabg.org
15
Slide 16
Нов подход към javascript (1)
• Unobtrusive javascript
– техника за пълно отделяне на javascript
като отделен слой на уеб приложението:
• structure (HTML)
• presentation (CSS)
• behaviour (javascript)
19 май 2007
riabg.org
16
Slide 17
Нов подход към javascript (2)
• Progressive enhancement
– техника за постигане на ползваемост и
достъпност
– достъп до съдържанието и основната
функционалност на сайта имат всички
– достъп до разширената функционалност и
глезотиите имат тези, които могат да ги
възприемат
19 май 2007
riabg.org
17
Slide 18
Нов подход към достъпността (1)
• Елементите, които са от значение за
потребителската интеракция, трябва да
имат
– име (name)
– роля (role) – показва какъв вид обект е това
– моментно състояние (state)
19 май 2007
riabg.org
18
Slide 19
Нов подход към достъпността (2)
• WAI-ARIA Roadmap
• aaa:required="true" />
• aaa:controls="price">change sort order
Ползваемост срещу
достъпност в Web 2.0
Slide 2
Съдържание
• Web 2.0, достъпност и ползваемост
• Примери за лоша достъпност и методи
за решаване
• Нови пътища за развитие на
достъпността
19 май 2007
riabg.org
2
Slide 3
Ползваемост
• Качества, които правят даден продукт ...
– лесен
– удобен
– приятен
– интуитивен
• ... за използване
19 май 2007
riabg.org
3
Slide 4
Достъпност
• Качества, които правят дадено нещо
годно за пълноценно възприемане от ...
– хора
– софтуер
– хардуер
• ... с различни (ограничени) възможности
19 май 2007
riabg.org
4
Slide 5
Web 1.0 и Web 2.0
• Web 1.0
– таблици
– много картинки в HTML-a
• Web 2.0
– семантичен код и CSS
– Javascript и AJAX
– фокус върху интерфейса и
потребителското преживяване
19 май 2007
riabg.org
5
Slide 6
Нов Web, нови проблеми (1)
• Нови технологии без достъпен
еквивалент
– AJAX, Flash, Flex, Silverlight
• Динамично съдържание
• Нови уеб компоненти с непознати роли
– slider, tree, progress bar
• Повече и различни устройства с достъп
до web
19 май 2007
riabg.org
6
Slide 7
Нов Web, нови проблеми (2)
• Jakob Nielsen: “Web 2.0 пренебрегва
добрия дизайн”
– динамично съдържание
– твърде много инструменти
• сложни и неинтуитивни интерфейси
• лъскави и неефективни сайтове
• 37 Signals: “Do less”
19 май 2007
riabg.org
7
Slide 8
Нов Web, нови проблеми (3)
• “Мирният атом – е, с това ли че ореме сега?”
– Борис Ангелушев
19 май 2007
riabg.org
8
Slide 9
Подходи към проблемите
• Кои проблеми?
• N версии за N вида нужди
– версия за екран
– версия за печат
– версия за мобилни телефони
– версия за слепи
– версия за Карчо Пелев от с. Красен
• 1 версия за всички ситуации
19 май 2007
riabg.org
9
Slide 10
Примери за лоша достъпност (1)
• display: none;
– елементът се скрива и от екранните четци
– решение
• .none { position: absolute; left: -3000px; }
– несполучливи решения
• visibility: hidden;
• width: 0; height: 0; overflow: hidden;
19 май 2007
riabg.org
10
Slide 11
Примери за лоша достъпност (2)
• връзки, включващи няколко обекта
(composite links)
– JAWS: прочита първите 2 обекта
– Windows Eyes: прочита последните 2
– решения
• не повече от 2 обекта в линк
• прегрупиране на HTML елементите
• връзки, разделени само с интервал
19 май 2007
riabg.org
11
Slide 12
Примери за лоша достъпност (3)
• layout, float и мобилните
телефони
– фиксирани ширини на
елементите – хоризонтален
скрол
– ширини в проценти – нечитаем
текст
– решения
• пълно изключване на CSS-a
• избрани стилове се включват с
Javascript
19 май 2007
riabg.org
12
Slide 13
Примери за лоша достъпност (4)
• “въведи числото от картинката”
– решения
• автоматично попълване на скрито поле за
посетителите с Javascript
• ръчно попълване на полето за останалите
• по-сложни схеми с timestamp, honey pots,
хеширане и др.
– недостатък на решенията
• ниска дуракоустойчивост
19 май 2007
riabg.org
13
Slide 14
Примери за лоша достъпност (5)
• празни полета във формите
– старите и/или примитивните браузъри ги
игнорират
– решение
• стойност по подразбиране
– необходимост от триене и проблем с ползваемостта
• премахване на стойността по подразбиране с
javascript
19 май 2007
riabg.org
14
Slide 15
Примери за лоша достъпност (6)
• обновяване на съдържание с AJAX
– решение
• презареждане на страницата с маркер към
мястото, където е промяната
http://domain.com/page.php#newContent
19 май 2007
riabg.org
15
Slide 16
Нов подход към javascript (1)
• Unobtrusive javascript
– техника за пълно отделяне на javascript
като отделен слой на уеб приложението:
• structure (HTML)
• presentation (CSS)
• behaviour (javascript)
19 май 2007
riabg.org
16
Slide 17
Нов подход към javascript (2)
• Progressive enhancement
– техника за постигане на ползваемост и
достъпност
– достъп до съдържанието и основната
функционалност на сайта имат всички
– достъп до разширената функционалност и
глезотиите имат тези, които могат да ги
възприемат
19 май 2007
riabg.org
17
Slide 18
Нов подход към достъпността (1)
• Елементите, които са от значение за
потребителската интеракция, трябва да
имат
– име (name)
– роля (role) – показва какъв вид обект е това
– моментно състояние (state)
19 май 2007
riabg.org
18
Slide 19
Нов подход към достъпността (2)
• WAI-ARIA Roadmap
• aaa:required="true" />
• aaa:controls="price">change sort order
•
price
– Основен проблем – липса на поддръжка
19 май 2007
riabg.org
19
Slide 20
Да бъдем ли достъпни и защо?
• Колко и кои хора ще се възползват
• Въпрос на избор...
• ... и законово регулиране
19 май 2007
riabg.org
20
Slide 21
Благодаря!
• Димо Димов
• [email protected]
• http://dimodi.com/
19 май 2007
riabg.org
21