accessibility: "跳过导航栏"链接
大多数情况下web页面代码中首先出现的都不是主要内容部分. 这导致键盘用户和读屏器用户在到达真正需要的内容前花费不少精力. 所以在文档最开始部分添加一个<a>指向页面主体部分将大大提高accessibility
这种链接通常可以有多种方案可选:
- 在页面顶部提供可见链接: 对页面布局产生影响, 对普通用户产生迷惑
- 在页面顶部提供不可见链接: 有效克服第一条的缺点
- 在页面顶部提供不可见链接, 当获得键盘焦点时设置为可见: 在第二条基础上提高弱视力用户体验
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta name="description" content=""> 8 <meta name="author" content=""> 9 10 <title>Template Index</title> 11 12 <style> 13 * { 14 margin: 0; 15 padding: 0; 16 } 17 .sr-only { 18 width: 1px; 19 height: 1px; 20 position: absolute; 21 padding: 0; 22 border: 0; 23 margin: -1px; 24 overflow: hidden; 25 clip: rect(0 0 0 0); 26 } 27 #skiptocontent { 28 position: relative; 29 } 30 #skiptocontent a { 31 position: absolute; 32 top: -1000px; 33 left: -1000px; 34 background: #D03C3C; 35 } 36 #skiptocontent a:focus { 37 top: 0; 38 left: 0; 39 z-index: 1000; 40 } 41 </style> 42 43 </head> 44 <body> 45 46 <header> 47 <div id="skiptocontent"> 48 <a href="#content">跳到内容</a> 49 </div> 50 51 <h2 class="sr-only">导航栏</h2> 52 <nav> 53 <ul> 54 <li><a href="#">主页</a></li> 55 <li><a href="#">关于</a></li> 56 </ul> 57 </nav> 58 59 </header> 60 61 <div id="content"> 62 <h2>大家好</h2> 63 <p>快乐的一天</p> 64 </div> 65 66 <footer> 67 </footer> 68 </body> 69 </html>
以上是第三种实现方法, 跳转链接默认隐藏, 使用tab或者方向键导航, 当链接获得焦点时会显示在屏幕对应位置, 此时按回车键跳转到#content 读屏器此时开始读对应内容
