![Accessibility 实施指引 产品使用无障碍 杜欢 ,[object Object],[object Object]](https://image.slidesharecdn.com/accessibilityguide-110713011624-phpapp02/85/accessibility-guide-1-320.jpg)
Recommended
More Related Content
Viewers also liked
Viewers also liked (9)
More from taobao.com
More from taobao.com (20)
Accessibility guide
- 6. 产品项目 原型设计 UE 设计 可用性 设计 项目 实施 可用性 文档 可用性 高对 比度 测试 视觉 高对 比度 设计
- 8. 全局设定 Tab 键的访问顺序 由上到下 由左到右
- 10. 细节设定 Tab 键的访问顺序 交互中的操作需要在交互面板展开后按照全局设定继续进行 交互面板中最后一个元素之后将使 Focus 回到无交互状态下的自然顺序
Editor's Notes
- 社会保障 Americans with Disabilities Act (ADA), Section 255 of the U.S. Telecommunications Act U.K. Disability Discrimination Act 中华人民共和国通信行业标准 - 信息无障碍 - 身体机能差异人群 - 网站设计无障碍技术要求
- <h1> 静态的 DOM 文档流顺序 </ h1> <div class=&quot;ffoot-col&quot;> <div class=&quot;ffoot-block&quot;> <h3><a href=&quot;#&quot;>1.DOM 文档流顺序保证 </ a></h3> <ul> <li><a href=&quot;#&quot;>1A</a></li> <li><a href=&quot;#&quot;>1B</a></li> <li><a href=&quot;#&quot;>1C</a></li> </ul> </div> <div class=&quot;ffoot-block&quot;> <h3><a href=&quot;#&quot;>2.DOM 文档流顺序保证 </ a></h3> <div id=&quot;industriesmenu&quot; class=&quot;ffoot-menucontent&quot;> <ul> <li><a href=&quot;#&quot;>2A</a></li> <li><a href=&quot;#&quot;>2B</a></li> <li><a href=&quot;#&quot;>2C</a></li> <li><a href=&quot;#&quot;>2D</a></li> <li><a href=&quot;#&quot;>2E</a></li> <li><a href=&quot;#&quot;>2F</a></li> </ul> </div> </div> <div class=&quot;ffoot-block&quot;> <h3><a href=&quot;#&quot;>3.DOM 文档流顺序保证 </ a></h3> <ul> <li><a href=&quot;#&quot;>3A</a></li> <li><a href=&quot;#&quot;>3B</a></li> <li><a href=&quot;#&quot;>3C</a></li> </ul> </div> </div>
- <style> ul,li{list-style:none;margin:0;padding:0;} .ffoot-col{position:relative;} #submenu{position:absolute;left:220px;top:60px;z-index:10;width:100px;padding:15px;background:#ccc;} </style> <h1> 交互中的 DOM 文档流顺序 </ h1> <div class=&quot;ffoot-col&quot;> <div class=&quot;ffoot-block&quot;> <h3><a href=&quot;#&quot;>1.DOM 文档流顺序保证 </ a></h3> <ul> <li><a href=&quot;#&quot;>1A</a></li> <li><a href=&quot;#&quot;>1B</a></li> <li><a href=&quot;#&quot;>1C</a></li> </ul> </div> <div class=&quot;ffoot-block&quot;> <h3><a id=&quot;menu&quot; href=&quot;#&quot;>2.DOM 文档流顺序保证 </ a></h3> <div id=&quot;submenu&quot; class=&quot;ffoot-menucontent&quot;> <ul> <li><a href=&quot;#&quot;>2A</a></li> <li><a href=&quot;#&quot;>2B</a></li> <li><a href=&quot;#&quot;>2C</a></li> <li><a href=&quot;#&quot;>2D</a></li> <li><a href=&quot;#&quot;>2E</a></li> <li><a href=&quot;#&quot;>2F</a></li> </ul> </div> </div> <div class=&quot;ffoot-block&quot;> <h3><a href=&quot;#&quot;>3.DOM 文档流顺序保证 </ a></h3> <ul> <li><a href=&quot;#&quot;>3A</a></li> <li><a href=&quot;#&quot;>3B</a></li> <li><a href=&quot;#&quot;>3C</a></li> </ul> </div> </div> <script> var dMenu = document.getElementById('menu'), dSubmenu = document.getElementById('submenu'), dSLink = dSubmenu.getElementsByTagName('a'); dSubmenu.style.display = 'none'; var showSubmenu = function(){ dSubmenu.isOpen = true; dSubmenu.style.display = 'block'; },hideSubmenu = function(){ if(hideSubmenu.timer){window.clearTimeout(hideSubmenu.timer);} dSubmenu.isOpen = false; hideSubmenu.timer = window.setTimeout(function(){ if(!dSubmenu.isOpen){dSubmenu.style.display = 'none';} },100); }; dMenu.onfocus = dMenu.onmouseover = showSubmenu; dMenu.onmouseout = hideSubmenu; dSubmenu.onmouseover = showSubmenu; dSubmenu.onmouseout = hideSubmenu; dSLink[dSLink.length-1].onblur = hideSubmenu; </script>
- <style> div{margin:30px;} a{font-size:300%;} #x{color:red;} </style> <div> <a href=&quot;#&quot;>A</a> <a href=&quot;#&quot; id=&quot;x&quot;>X</a> <a href=&quot;#&quot;>C</a> </div> <div> <button onclick=&quot;document.getElementById('x').setAttribute('tabIndex', '2');&quot;> 调整 X 优先级 </ button> <button onclick=&quot;document.getElementById('x').setAttribute('tabIndex', '0');&quot;> 恢复 X 自然顺序 </ button> <button onclick=&quot;document.getElementById('x').setAttribute('tabIndex', '-1');&quot;> 禁止 X 得到焦点 </ button> <button onclick=&quot;document.getElementById('x').removeAttribute('tabIndex');&quot;> 恢复 X 得到焦点 </ button> </div>
- 替代文本的用法： 参见： Cisco Web ADRs ACC-WEB 1.1.1 ： 非文本内容最佳实践 http://www.w3cgroup.com/article.asp?id=324 表单元素的一些细节： 所有表单项都需要有 label 元素，通过 for=“# id” 与之关联 <label for=“username”>User Name:</label><input type=“text” id=“username” name=“username” /> 在不需要 label 元素的场景中，可以为表单元素添加 title 属性 <label for=“vscard-first-part”> 信用卡号码 :</label><input type=“text” id=“vscard-first-part” title=&quot; 前四位 &quot; /><input type=“text” title=“ 中间四位” /><input type=“text” title=“ 最后四位” />
- 高对比度检测： 可以通过设置读取一个 background 样式来判断当前是否为高对比度模式。 Image Sprite VS Background Sprite Background Sprite: <style> html,body{background:#ccc;} .cisco-logo{ display:block; width:100px; height:75px; background:url(http://www.cisco.com/web/fw/i/mb-sprite.png) 0 -1650px no-repeat; text-indent:-200px; text-decoration:none; overflow:hidden; } </style> <a href=&quot;?&quot; class=&quot;cisco-logo&quot;>Cisco.com Worldwide Home</a> Image Sprite: <style> html,body{background:#ccc;} .cisco-logo{ position:relative; display:block; width:100px; height:75px; overflow:hidden; text-decoration:none; } .cisco-logo img{ position:relative; left:0; top:-1650px; border:none; } </style> <a href=&quot;?&quot; class=&quot;cisco-logo&quot;><img src=&quot;http://www.cisco.com/web/fw/i/mb-sprite.png&quot; alt=&quot;&quot; />Cisco.com Worldwide Home</a>
- WAVE: http://wave.webaim.org/ JAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.asp
- 常用 HTML 元素及按键列表 : <a> 链接 TAB 和 SHIFT+TAB 进行导航， ENTER 激活 <button> <input type = &quot;button&quot;> <input type = &quot;submit&quot;> <input type = &quot;reset&quot;> <input type = &quot;image&quot;> 按钮 TAB 和 SHIFT+TAB 进行导航， ENTER 或 SPACE BAR 激活 <input type = &quot;text&quot;> <input type = &quot;password&quot;> <textarea> 可编辑文本框 TAB 和 SHIFT+TAB 进行导航，然后输入文本 <input type=&quot;checkbox&quot;> 复选框 TAB 和 SHIFT+TAB 进行导航， SPACE BAR 进行选中和反选 <input type=&quot;radio&quot;> 单选框 TAB 和 SHIFT+TAB 进行导航， UP/DOWN/LEFT/RIGHT 方向键进行切换选择 <select> 下拉选框 TAB 和 SHIFT+TAB 进行导航， ALT+DOWN 方向键展开下拉列表 , ECS 关闭下拉列表 , UP/DOWN 方向键进行选择 交互中一些 popup, dialog 操作 : 记住它们的 Trigger 节点，以便在它们关闭的时候焦点能够回到触发的节点 一些关于 Focus 的 BUG: <meta http-equiv=&quot;Content-type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <h1> 设置了 overflow auto 的盒子在 FF4 下会获得焦点 </ h1> <div style=&quot;width:200px;overflow:auto;zoom:1;background:gray;&quot;> <input type=&quot;text&quot; /><a href=&quot;?&quot;>test</a>hello world, hello JAWS. </div> Tips for fix it: 设置该容器的 tabindex 属性值为 -1 <meta http-equiv=&quot;Content-type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <h1>innerHTML 中设置为选中状态的 radio ， 在 IE 中不能第一个获得焦点 </ h1> <a href=&quot;javascript:void(0);&quot; id=&quot;x&quot;>show/hide</a> <div id=&quot;y&quot; style=&quot;display:none;&quot;></div> <SCRIPT LANGUAGE=&quot;JavaScript&quot;> var dx = document.getElementById('x'), dy = document.getElementById('y'), html = '<input name=&quot;radio&quot; type=&quot;radio&quot; value=&quot;1&quot;/>11111<input name=&quot;radio&quot; type=&quot;radio&quot; value=&quot;2&quot;/>22222<input name=&quot;radio&quot; type=&quot;radio&quot; value=&quot;2&quot;/>33333<input name=&quot;radio&quot; type=&quot;radio&quot; value=&quot;2&quot;/>44444<input name=&quot;radio&quot; id=&quot;spark&quot; type=&quot;radio&quot; value=&quot;2&quot; checked=&quot;checked&quot;/>55555'; dx.onclick = function() { if (dy.style.display == 'none') { dy.innerHTML = html; dy.style.display = 'block'; } else { dy.style.display = 'none'; } } </SCRIPT> Tips for fix it: 在插入 innerHTML 内容并显示时重置选中 radio 的状态： if (dy.style.display == 'none') { dy.innerHTML = html; dy.style.display = 'block'; dRadio = dy.getElementsByTagName('input'); for(var i=0;i<dRadio.length;i++){ if(dRadio[i].checked){idx=i;break;} } dRadio[0].checked = true; dRadio[idx].checked = true; } else { dy.style.display = 'none'; }