Accessibility guide

  • 687 views
Uploaded on

Accessibility guide

Accessibility guide

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
687
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
36
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 社会保障 Americans with Disabilities Act (ADA), Section 255 of the U.S. Telecommunications Act U.K. Disability Discrimination Act 中华人民共和国通信行业标准 - 信息无障碍 - 身体机能差异人群 - 网站设计无障碍技术要求
  • <h1> 静态的 DOM 文档流顺序 </ h1> <div class="ffoot-col"> <div class="ffoot-block"> <h3><a href="#">1.DOM 文档流顺序保证 </ a></h3> <ul> <li><a href="#">1A</a></li> <li><a href="#">1B</a></li> <li><a href="#">1C</a></li> </ul> </div> <div class="ffoot-block"> <h3><a href="#">2.DOM 文档流顺序保证 </ a></h3> <div id="industriesmenu" class="ffoot-menucontent"> <ul> <li><a href="#">2A</a></li> <li><a href="#">2B</a></li> <li><a href="#">2C</a></li> <li><a href="#">2D</a></li> <li><a href="#">2E</a></li> <li><a href="#">2F</a></li> </ul> </div> </div> <div class="ffoot-block"> <h3><a href="#">3.DOM 文档流顺序保证 </ a></h3> <ul> <li><a href="#">3A</a></li> <li><a href="#">3B</a></li> <li><a href="#">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="ffoot-col"> <div class="ffoot-block"> <h3><a href="#">1.DOM 文档流顺序保证 </ a></h3> <ul> <li><a href="#">1A</a></li> <li><a href="#">1B</a></li> <li><a href="#">1C</a></li> </ul> </div> <div class="ffoot-block"> <h3><a id="menu" href="#">2.DOM 文档流顺序保证 </ a></h3> <div id="submenu" class="ffoot-menucontent"> <ul> <li><a href="#">2A</a></li> <li><a href="#">2B</a></li> <li><a href="#">2C</a></li> <li><a href="#">2D</a></li> <li><a href="#">2E</a></li> <li><a href="#">2F</a></li> </ul> </div> </div> <div class="ffoot-block"> <h3><a href="#">3.DOM 文档流顺序保证 </ a></h3> <ul> <li><a href="#">3A</a></li> <li><a href="#">3B</a></li> <li><a href="#">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="#">A</a> <a href="#" id="x">X</a> <a href="#">C</a> </div> <div> <button onclick="document.getElementById('x').setAttribute('tabIndex', '2');"> 调整 X 优先级 </ button> <button onclick="document.getElementById('x').setAttribute('tabIndex', '0');"> 恢复 X 自然顺序 </ button> <button onclick="document.getElementById('x').setAttribute('tabIndex', '-1');"> 禁止 X 得到焦点 </ button> <button onclick="document.getElementById('x').removeAttribute('tabIndex');"> 恢复 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=" 前四位 " /><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="?" class="cisco-logo">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="?" class="cisco-logo"><img src="http://www.cisco.com/web/fw/i/mb-sprite.png" alt="" />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 = "button"> <input type = "submit"> <input type = "reset"> <input type = "image"> 按钮 TAB 和 SHIFT+TAB 进行导航, ENTER 或 SPACE BAR 激活 <input type = "text"> <input type = "password"> <textarea> 可编辑文本框 TAB 和 SHIFT+TAB 进行导航,然后输入文本 <input type="checkbox"> 复选框 TAB 和 SHIFT+TAB 进行导航, SPACE BAR 进行选中和反选 <input type="radio"> 单选框 TAB 和 SHIFT+TAB 进行导航, UP/DOWN/LEFT/RIGHT 方向键进行切换选择 <select> 下拉选框 TAB 和 SHIFT+TAB 进行导航, ALT+DOWN 方向键展开下拉列表 , ECS 关闭下拉列表 , UP/DOWN 方向键进行选择 交互中一些 popup, dialog 操作 : 记住它们的 Trigger 节点,以便在它们关闭的时候焦点能够回到触发的节点 一些关于 Focus 的 BUG: <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/> <h1> 设置了 overflow auto 的盒子在 FF4 下会获得焦点 </ h1> <div style="width:200px;overflow:auto;zoom:1;background:gray;"> <input type="text" /><a href="?">test</a>hello world, hello JAWS. </div> Tips for fix it: 设置该容器的 tabindex 属性值为 -1 <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/> <h1>innerHTML 中设置为选中状态的 radio , 在 IE 中不能第一个获得焦点 </ h1> <a href="javascript:void(0);" id="x">show/hide</a> <div id="y" style="display:none;"></div> <SCRIPT LANGUAGE="JavaScript"> var dx = document.getElementById('x'), dy = document.getElementById('y'), html = '<input name="radio" type="radio" value="1"/>11111<input name="radio" type="radio" value="2"/>22222<input name="radio" type="radio" value="2"/>33333<input name="radio" type="radio" value="2"/>44444<input name="radio" id="spark" type="radio" value="2" checked="checked"/>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'; }

Transcript

  • 1. Accessibility 实施指引 产品使用无障碍 杜欢
    • Architect of F2E
    • 07/05/2011
  • 2.  
  • 3. 企业愿景 社会保障 技术实现
  • 4. 更好的技术将有助于视觉障碍人群,和其他人更好地使用互联网。
  • 5.  
  • 6. 产品项目 原型设计 UE 设计 可用性 设计 项目 实施 可用性 文档 可用性 高对 比度 测试 视觉 高对 比度 设计
  • 7.  
  • 8. 全局设定 Tab 键的访问顺序 由上到下 由左到右
  • 9.  
  • 10. 细节设定 Tab 键的访问顺序 交互中的操作需要在交互面板展开后按照全局设定继续进行 交互面板中最后一个元素之后将使 Focus 回到无交互状态下的自然顺序
  • 11.  
  • 12.
    • 大于等于 1 的值将打乱文档流中的正常顺序
    • 等于 0 的值相当于没有设置,或者说将恢复到自然顺序
    • 小于 0 的值,将使得被设置的节点不再能够获得焦点
  • 13.  
  • 14.
    • 所有非文本内容呈现给用户时必须提供一个可供选择的替代文本去表达这些内容
    • 所设置的替代文本必须具有语义,能够使用户清楚它所要传达的意义。
    • 每张图片都需要有替代文本:
    • 1. 纯粹修饰性质的图片设置其为空
    • 2. 与语义文本相邻的图片设置其为空
    • 3. 组合图片只需为第一副图片设置替代文本,其他图片设置为空
  • 15.  
  • 16.
    • CSS background 不可用
    • 所有在 CSS 中设定的带有 background 属性都不可用
    • 白色的图片在白色系高对比度模式下无法看到,黑色的图片在黑色系高对比度模式下无法看到
    • 兼容高对比度模式的两种方式:
    • 1. 添加无 background 支持时将替代文本显示的 CSS 样式
    • 2. 将部分 background 替换为 image ,将 background sprite 替换为 image sprite
  • 17.  
  • 18.  
  • 19.  
  • 20.  
  • 21.  
  • 22.