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