Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

视觉隐藏内容

  • Login to see the comments

视觉隐藏内容

  1. 1. 视觉隐藏内容<br />Jace / 进步博客<br />
  2. 2.
  3. 3. 概述<br />第一部分<br />
  4. 4. - 文本替代<br />- 为基于时间的媒体提供替代品<br />- 适应性强<br />- 可辨别<br />Perceivable<br />Perceivable<br />- 键盘操作<br />- 足够的时间<br />- 癫痫发作<br />- 导览<br />- 兼容<br />Accessibility<br />Operable<br />Robust<br />- 可读<br />- 可预见<br />- 输入辅助<br />Understandable<br />
  5. 5.
  6. 6. 人名链接<br />头像链接<br /><ul><li>头像链接的作用:
  7. 7. 明眼用户快速辨识好友,于视障用户无益
  8. 8. 链接至好友主页,与人名链接的作用一致
  9. 9. 减少干扰:使用tabindex=“-1”,将头像链接从屏幕阅读器访问序列中移除</li></li></ul><li>视觉隐藏文本思路<br />1.为屏幕阅读器提供补充文本<br />2.通过CSS隐藏这些文本<br />
  10. 10. css加载失败时<br />SEO and Accessibility<br />High Accessibility Is Effective Search Engine Optimization<br />
  11. 11. 隐藏方式对可访问性的影响<br />第二部分<br />
  12. 12. 纯文本<br />label文本<br />链接<br />链接文本<br />视觉隐藏<br />
  13. 13. 视觉隐藏的关注点<br /><ul><li>它应使元素消失(仿佛文档中不存在该元素)
  14. 14. 应该没有多余的空白、没有滚动条、不能出现与层叠相关的问题(不可点击)等。
  15. 15. 当隐藏容器中的元素获得焦点时,应防止出现意外的滚动。
  16. 16. 即当用户使用tab导航到隐藏容器内的可聚焦的元素时,网页不应该跳跃。
  17. 17. 双向(bidi-directional )字符集语言友好。
  18. 18. 即应该同时支持从右到左,从左到右的界面,如阿拉伯文和希伯来文。</li></li></ul><li>如何检测屏幕阅读器能否访问你隐藏的内容?<br /><ul><li>使用键盘来访问隐藏容器内的可聚焦元素(可以在容器中添加一条链接)。
  19. 19. 如果键盘导航能够跳至隐藏容器内的元素,那么内容是可以访问的。</li></li></ul><li>text-indent: -999em;<br />作用元素:文本 | inline元素<br />a.hide-indent {<br /> display: inline-block;<br /> width: 120px;<br /> height: 30px;<br /> text-indent: -10px;<br /> overflow: hidden;<br />}<br />点我啊 <br />点我啊 <br />IE6/IE7下,使用负缩进的方法隐藏inline-block元素内的文本,该元素也会缩进相同的值。<br />缩进值<br />
  20. 20.
  21. 21. 存疑:<br />text-indent方法不适用于<br />right-to-left 方向的语言<br />(阿拉伯语、希伯来语)<br />
  22. 22. line-height:999;<br />
  23. 23. height: 0;<br />apple的voice Over无法读出高度为0元素内的内容<br />.hide-h0{<br /> width: 0;<br />height: 0;<br /> overflow: hidden;<br /> display: inline-block;<br />}<br />
  24. 24. Positioning content off-screen<br />.hide-offscreen-top{<br /> position: absolute;<br />top:-10000px;<br /> left: auto;<br /> width:1px;<br /> height:1px;<br /> overflow: hidden;<br />}<br />文档流中抽出<br />内容垂直往上移动10000px<br />水平位置与内容原位置相同<br />
  25. 25. Positioning content off-screen<br />点我啊<br />焦点问题<br />获得焦点时<br />向上滚动<br />定位后<br />原位置<br />点我啊<br />
  26. 26. Positioning content off-screen<br />.hide-offscreen-top{<br /> position: absolute;<br />top: auto;<br /> left: -10000px;<br /> width:1px;<br /> height:1px;<br /> overflow: hidden;<br />}<br />文档流中抽出<br />垂直位置与内容原位置相同<br />内容水平向左移动10000px<br />
  27. 27. Positioning content off-screen<br />焦点问题<br />(此种情况很少出现)<br />点我啊<br />点我啊<br />原位置<br />定位后<br />获得焦点时<br />向左滚动<br />
  28. 28. a元素<br />Techniques for WCAG 2.0<br />H30: Providing link text that describes the purpose of a link for anchor elements.<br />
  29. 29. a元素<br /><ul><li>一个链接在脱离语境时仍然有意义;
  30. 30. 链接文本在它出现的页面上应该是唯一的;</li></ul>(即不同资源不要使用相同的链接文本)<br /><ul><li>链接文本千万不要使用“点击此处”或“更多”;
  31. 31. 不要使用一个长URL作为链接文本;</li></ul>(屏幕阅读器会全部读出来,用户会很烦躁的)。<br />
  32. 32. a元素<br /> Using the alt attribute for the img element to <br />describe the purpose of a graphical link.<br /><a href="routes.html"> <br /> <imgsrc=“topo.gif“ alt=“查看丽江美景" /><br /></a><br /><a href="routes.html"> <br /> <imgsrc=“topo.gif“ alt=“” title=“查看丽江美景” /><br /></a><br /><a href="routes.html“ title=“查看丽江美景” > <br /> <imgsrc=“topo.gif“ alt=“” /><br /></a><br /> IE 、chrome读title值,Firefox读“空白”<br />
  33. 33. a元素<br /><a href="routes.html"> <br /> <imgsrc=“topo.gif“ alt=“查看成都美景” title=“查看丽江美景” /><br /></a><br /><a href="routes.html“ title=“查看丽江美景” > <br /> <imgsrc=“topo.gif“ alt=“查看成都美景” /><br /></a><br /><a href=“http://www.topcss.org”></a> AT在IE下读“www.topcss.org”<br /> Firefox 、chrome下忽略<br /><a href=“http://www.topcss.org” title=“进步博客”></a> <br />AT在IE下读“进步博客”<br /> Firefox、chrome下忽略<br />
  34. 34. a元素<br /><ul><li>Using an empty alt attribute when the anchor (a) </li></ul> element contains text that describes the purpose of <br /> the link in addition to the img element. Note that the <br /> link text will appear on the page next to the image.<br /><a href="routes.html"><br /> <imgsrc=“topo.gif” alt=“” />小马哥<br /></a><br />
  35. 35. a元素<br />H67: Using null alt text and no title attribute on img elements for images that AT should ignore.<br />“null” alt ≠ have no alt<br /><imgsrc=“p.jpg” alt=“” />  AT 忽略图片<br /><imgsrc=“p.jpg” />  AT忽略图片,但不符合规范<br /><imgsrc=“p.jpg” alt=“” title=“翘臀美女” /> <br /> IE、chrome 忽略图片<br /> Firefox 读title值<br />
  36. 36. a元素<br />Techniques for WCAG 2.0<br />H33: Supplementing link text with the title attribute<br />谨慎使用:<br /><ul><li>tool tip形式出现,大约5秒后消失
  37. 37. 无法控制title属性的内容,如对比度、字体大小、位置,放大器用户可能不能理解
  38. 38. Title旨在提供辅助信息,mouse over元素时出现; alt是在元素无法正常渲染时出现。IE6/IE7会在无title时以tooltip的形式显式alt的值。
  39. 39. 屏幕阅读器需要用户手动设置才能读出title值,有的根本就不能。</li></li></ul><li>label元素<br /><label for="firstname">First name:</label><br /><input type="text" name="firstname" id="firstname" /><br /><label>First name: <input type="text" name="firstname" /></label><br /><ul><li>IE6不支持</li></ul><label for="firstname">First name:<br /> <input type="text" name="firstname" id="firstname" /><br /></label><br /><ul><li>nvda会重复读label文本内容</li></li></ul><li>label元素<br /><h3 id="search-header">Search your contact list</h3><br /><input type=“input“ aria-labelledby="search-header"><br /><ul><li>IE7 | IE8 | IE9 | Firefox 支持</li></ul><input type=“input“ aria-label="search-header"><br /><ul><li>IE9不支持| Firefox 支持
  40. 40. 优先级:aria-labelledby > aria-label</li></li></ul><li>label元素<br /><input type="input“ title="找图片" /><br /><ul><li>IE7 | IE8 | IE9 | Firefox 支持</li></ul><input type="input“ placeholder="输入名字" /><br /><ul><li>IE9不支持 | Firefox 支持</li></li></ul><li>
  41. 41. 使用clip属性隐藏元素<br />第三部分<br />
  42. 42. Clip属性<br />定义一个绝对定位 元素的可见区域。clip: rect(top, right, bottom, left);<br />top/bottom:定义与盒子顶部边框边缘的距离;<br />left/right:定义与盒子左边框边缘的距离;<br />
  43. 43. Clip属性<br />.element-invisible {<br />position: absolute !important;<br />clip: rect(1px 1px 1px 1px); /* IE6, IE7 */<br />clip: rect(1px, 1px, 1px, 1px);<br /> padding:0 !important;<br /> border:0 !important;<br /> height: 1px !important;<br /> width: 1px !important;<br /> overflow: hidden;<br />}<br />
  44. 44. Clip属性<br />焦点问题<br />原位置/定位后<br />点我啊<br />
  45. 45. 谢 谢 !www.topcss.org<br />

×