Web无障碍实施细节（一）跳到内容区

无障碍的具体实施过程中，测试了多家符合无障碍的国外航司。无一例外，均采用了“跳到内容区”的功能设计。

1.示例

• 法国航空
• 达美航空
• 亚航

2.分析

• 触发条件：在使用键盘切换焦点
• 触发区域：焦点进入header区域
• 触发状态：显示 “skip to content”（类似链接）
• 操作：当焦点处于“skip to content”的时候，按enter选中，焦点跳过header区域，进入内容区。

前端分析：大部分页面在跳转的时候，用户不希望反复阅读到header部分的内容。例如在表单提交时，新的页面焦点会重新从header部分开始，这就需要我们提供一种绕过障碍的机制。

3.对应规范

wcag2.0
2.4.1 绕过模块 （A级）
提供一种机制以跳过在多个网页中重复出现的内容模块。
如何符合 2.4.1
理解 2.4.1

4.具体实施

//头部隐藏标签，只有键盘focus能触发 
<a class="skip" href="#content-tag">SKIP TO CONTENT</a> 
//将这个放置于header底部，用于focus处理 
<span id="content-tag"></span>