Enviar pesquisa
Carregar
何一鸣:【无障碍访问】Aria in taobao
•
3 gostaram
•
1,227 visualizações
taobao.com
Seguir
Tecnologia
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 46
Baixar agora
Baixar para ler offline
Recomendados
ARIA in taobao
ARIA in taobao
yiming he
Can Steven Hawking Use your Dojo App?
Can Steven Hawking Use your Dojo App?
bgibson
Introduction to ARIA
Introduction to ARIA
Vinod Tiwari
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
Dirk Ginader
Berpikir Kreatif I
Berpikir Kreatif I
guest361b2c
Introductory Note on International Construction Contracts
Introductory Note on International Construction Contracts
Francis Ho
Tb Ly And Html5
Tb Ly And Html5
taobao.com
Préparation continue des applications en six étapes
Préparation continue des applications en six étapes
Flexera
Recomendados
ARIA in taobao
ARIA in taobao
yiming he
Can Steven Hawking Use your Dojo App?
Can Steven Hawking Use your Dojo App?
bgibson
Introduction to ARIA
Introduction to ARIA
Vinod Tiwari
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
Dirk Ginader
Berpikir Kreatif I
Berpikir Kreatif I
guest361b2c
Introductory Note on International Construction Contracts
Introductory Note on International Construction Contracts
Francis Ho
Tb Ly And Html5
Tb Ly And Html5
taobao.com
Préparation continue des applications en six étapes
Préparation continue des applications en six étapes
Flexera
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
shriniwaskashalikar
Mrs Tabby Gray
Mrs Tabby Gray
Eunice Rivera
Superliving Dr
Superliving Dr
shriniwaskashalikar
Belchfire Torch Seo Ranking Report
Belchfire Torch Seo Ranking Report
SEO, LLC dba www.SplinternetMarketing.com
Competencias Basicas
Competencias Basicas
guestd5b40b
force
force
UKM
WISP ASSIGNMENT 2
WISP ASSIGNMENT 2
beijia
Creativity of cellphone ads
Creativity of cellphone ads
Josephine C
1. sop pengelolaan pemb tematik terpadu ks
1. sop pengelolaan pemb tematik terpadu ks
Sanda Zyrechsmart
Master key system part 16
Master key system part 16
canei2day
Samyak Vaidyak Dr. Shriniwas Kashalikar
Samyak Vaidyak Dr. Shriniwas Kashalikar
shriniwaskashalikar
Report Splinternetmarketing.Com Internet Marketing Services 5 9 2012
Report Splinternetmarketing.Com Internet Marketing Services 5 9 2012
SEO, LLC dba www.SplinternetMarketing.com
Tips for a successful Salesforce.com implementation
Tips for a successful Salesforce.com implementation
Kathy Herrmann
Y O G A A N D S T R E S S Dr
Y O G A A N D S T R E S S Dr
shriniwaskashalikar
Techspo 2010 ver. 2
Techspo 2010 ver. 2
MHS
电子商务网站前端开放实战
电子商务网站前端开放实战
taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
Berserk js
Berserk js
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
Mais conteúdo relacionado
Destaque
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
shriniwaskashalikar
Mrs Tabby Gray
Mrs Tabby Gray
Eunice Rivera
Superliving Dr
Superliving Dr
shriniwaskashalikar
Belchfire Torch Seo Ranking Report
Belchfire Torch Seo Ranking Report
SEO, LLC dba www.SplinternetMarketing.com
Competencias Basicas
Competencias Basicas
guestd5b40b
force
force
UKM
WISP ASSIGNMENT 2
WISP ASSIGNMENT 2
beijia
Creativity of cellphone ads
Creativity of cellphone ads
Josephine C
1. sop pengelolaan pemb tematik terpadu ks
1. sop pengelolaan pemb tematik terpadu ks
Sanda Zyrechsmart
Master key system part 16
Master key system part 16
canei2day
Samyak Vaidyak Dr. Shriniwas Kashalikar
Samyak Vaidyak Dr. Shriniwas Kashalikar
shriniwaskashalikar
Report Splinternetmarketing.Com Internet Marketing Services 5 9 2012
Report Splinternetmarketing.Com Internet Marketing Services 5 9 2012
SEO, LLC dba www.SplinternetMarketing.com
Tips for a successful Salesforce.com implementation
Tips for a successful Salesforce.com implementation
Kathy Herrmann
Y O G A A N D S T R E S S Dr
Y O G A A N D S T R E S S Dr
shriniwaskashalikar
Techspo 2010 ver. 2
Techspo 2010 ver. 2
MHS
电子商务网站前端开放实战
电子商务网站前端开放实战
taobao.com
Destaque
(16)
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
Mrs Tabby Gray
Mrs Tabby Gray
Superliving Dr
Superliving Dr
Belchfire Torch Seo Ranking Report
Belchfire Torch Seo Ranking Report
Competencias Basicas
Competencias Basicas
force
force
WISP ASSIGNMENT 2
WISP ASSIGNMENT 2
Creativity of cellphone ads
Creativity of cellphone ads
1. sop pengelolaan pemb tematik terpadu ks
1. sop pengelolaan pemb tematik terpadu ks
Master key system part 16
Master key system part 16
Samyak Vaidyak Dr. Shriniwas Kashalikar
Samyak Vaidyak Dr. Shriniwas Kashalikar
Report Splinternetmarketing.Com Internet Marketing Services 5 9 2012
Report Splinternetmarketing.Com Internet Marketing Services 5 9 2012
Tips for a successful Salesforce.com implementation
Tips for a successful Salesforce.com implementation
Y O G A A N D S T R E S S Dr
Y O G A A N D S T R E S S Dr
Techspo 2010 ver. 2
Techspo 2010 ver. 2
电子商务网站前端开放实战
电子商务网站前端开放实战
Mais de taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
Berserk js
Berserk js
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Kind editor设计思路
Kind editor设计思路
taobao.com
Java script physical engine
Java script physical engine
taobao.com
Html5环保小游戏
Html5环保小游戏
taobao.com
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
taobao.com
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
taobao.com
张平:JavaScript引擎实现
张平:JavaScript引擎实现
taobao.com
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
taobao.com
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
taobao.com
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
Mais de taobao.com
(20)
编辑器设计U editor
编辑器设计U editor
Berserk js
Berserk js
淘宝开放产品前端实践
淘宝开放产品前端实践
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
第三方内容开发最佳实践
第三方内容开发最佳实践
编辑器设计Kissy editor
编辑器设计Kissy editor
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
Kind editor设计思路
Kind editor设计思路
Java script physical engine
Java script physical engine
Html5环保小游戏
Html5环保小游戏
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
张平:JavaScript引擎实现
张平:JavaScript引擎实现
高力:19楼现有前端架构
高力:19楼现有前端架构
李成银:前端编译平台
李成银:前端编译平台
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
何一鸣:【无障碍访问】Aria in taobao
1.
ARIA with TaoBao
承玉@淘宝 yiminghe@gmail.com
2.
起于”投诉” • 发布页面编辑器更新,控制了焦点
3.
• 1. WCAG •
2.语音验证码研究 • 3.无障碍实验室 • 4.社会责任部的关注
4.
5.
• WAI ARIA
简介 • ARIA 基础 • ARIA 淘宝实践
6.
问题
7.
问题 盲人需要 AT (可访问性工具)
8.
问题 • 但更需要的是”盲道”
9.
现实 • 你的网站 ”提供”
了么?
10.
• WAI ARIA
简介
11.
WAI ARIA 简介 •
W • A • I • A • R • I • A
12.
WAI ARIA 简介 •
Web • Accessibility • Initiative • Accessible • Rich • Internet • Application
13.
How • ARIA :
web app 与 AT(可访问性工具) 的桥梁. ARIA javascript css html
14.
• ARIA 基础
15.
ARIA 基础 • Role
: 描述区域作用或组件类型。侧重语义 信息. • State/property : 描述状态与属性. • keydown + tabIndex
16.
role
17.
State/property
18.
国外
19.
国外
20.
21.
22.
ARIA with TaoBao •
首页实践
23.
路标角色
24.
吊顶 ARIA aria-haspopup
aria-label role=‘menu’ aria-hidden=‘false’ 1. Tab 到顶部导航链接 2. 在链接上键盘右键弹出当前链接子菜单 3. Tab 继续在当前子菜单导航 4. Esc 关闭子菜单回到当前链接
25.
Search tab ARIA
26.
右侧区域 ARIA
27.
demo
28.
• KISSY 的一些尝试
29.
组件级别 • KISSY.Overlay • KISSY.MenuButton •
KISSY.Tabs • KISSY.Carousel • …..
30.
KISSY.Overlay • role=‘dialog’ • aria-labelledby •
aria-hidden • 捕获焦点
31.
Overlay demo
32.
KISSY.MenuButton •
role = ‘button’ • aria-haspopup aria-expanded • aria-pressed aria-disabled • aria-activedescendant • aria-labelledby
33.
KISSY.Menu •
role = ‘menu’ / ‘menuitem’ • aria-haspopup • aria-activedescendant • aria-disabled aria-pressed
34.
35.
基础架构 • MVC 分层
: ARIA -> View Controller 1 -model : Model -view : View +onClick() 1 +onKeydown() 1 1 View Model -el -data +onClick() +getValue() -updateHtml() +setValue() -updateClass() -updateAria()
36.
Tabs Transform • ARIA
in KISSY.Tabs
37.
KISSY.Tabs practice • 1.
挑选合适的角色 – Role=‘tablist’ – Role=‘tab’ – Role=‘tabpanel’
38.
• 2. 设置
aria 状态(属性)的初始值 – Tabpanel • aria-hidden • aria-labelledby – Tab • tabindex , current active = 0 , others = -1
39.
• 3. 绑定键盘事件,转移 逻辑状态.
– keydown / keypress
40.
• 4. 同组件逻辑状态 与
aria 状态(属性) 并设置焦点. – AOP Event-Driven
41.
ARIA问题 • 兼容性问题:读屏器*浏览器 • ARIA
组件交互规范数量不足
42.
tools • Ie8,9 :
http://windows.microsoft.com/en- US/internet-explorer/products/ie/home • Firefox : http://www.mozilla.com/ • Chrome : http://www.google.com/chrome/ • 争渡读屏 : http://www.zdsr.net/ • Nvda screen render : http://www.nvda-project.org/ • firefox accessibility extension : http://firefox.cita.uiuc.edu/ • WAVE : http://wave.webaim.org/
43.
Refer • WAI-ARIA -
w3.org/TR/wai-aria • Overview - w3.org/WAI/intro/aria • ARIA Primer - www.w3.org/TR/waiaria-primer/ • ARIA Best Practices - www.w3.org/TR/wai-aria- practices/ • Gez Lemon's tutorial - dev.opera.com/articles/view/introduction-to-wai- aria/ • Codetalks - http://wiki.codetalks.org
44.
refer • Mozilla -
http://developer.mozilla.org/en/docs/Accessible_DH TML • UIUC tests - http://test.cita.uiuc.edu/aria • Live regions - http://accessibleajax.clcworld.net • A List Apart - http://alistapart.com/articles/waiaria • IBM - http://www.csun.edu/cod/conf/2005/proceedings/2 524.htm • Webaim - http://webaim.org/
45.
Thanks to WAI
46.
But
Baixar agora