开发支持屏幕读取软件的 Web 2.0 应用-2 支持页面导航功能

look_w

支持页面导航功能视力正常的用户可以很容易的分辨整个页面的布局。例如，他们可以忽视标题或者列表，从而直接获取主要内容区域的信息。如果页面组织结构合理，上述的大多数方法同样适用于屏幕读取软件。
Skip to main content
当导航条出现在页面上方或者左方时，使用屏幕读取软件的用户必需听完导航条上所有的 link 或者 button，才能获取页面主体部分的信息。当一个 Web 应用中的所有页面都保持这种统一布局风格时，用户每切换一次页面，都要重新浏览一遍导航条中的内容。这对视力正常的用户来说，可以忽视这些 link 直接阅读，而屏幕读取软件则借助 “Skip to main content”链接略过导航条的所有内容，直接将焦点设置到页面的主体部分。
例如下面的 One-page 的 Web 应用由四部分构成：上部全局任务条，左部导航条，右部帮助区域以及中间主体部分：
图 1. One-page Web 应用示例图整个页面的 html 结构为：
清单 4.页面 html 结构 .

1 2 3 4 5 6

<div class="com-ibm-rqm-web-home" dojoAttachPoint="_homepageArea">     <div id="rqm-global-task-bar" dojoAttachPoint="_globalTaskBarArea"></div>     <div id="rqm-right-help-bar" dojoAttachPoint="_rightHelpBarArea"></div>     <div id="rqm-left-navigation-bar" dojoAttachPoint="_leftNavigationBarArea"></div>     <div id="content-area" dojoAttachPoint="_contentArea"> </div>

其中，发生变化的是中间主体部分 _contentArea，因此需要在页面顶部添加”Skip to main content”链接，使得屏幕读取软件可以直接跳转到主体部分：
清单 5. 添加 Skip to main content 链接 .

1 2 3 4 5 6

<div style="left:-200px; position:absolute; display: inline;">     <a id="_mainContentHref" name="_mainContentHref"     dojoAttachPoint="_mainContentHref" href=”#content-area”>        Skip to main content     </a> </div>

其中， style="left:-200px; position: absolute; display: inline;"是为了在视图中隐藏此链接，目的是不影响页面的视觉效果。这样，屏幕读取软件用户在使用左方导航条切换页面时，能够快速的定位到主体内容。
Skip to Navigation
当一个页面由若干个结构风格相似的 section 组成时，程序开发人员需要为每个 section 添加一个链接，这样屏幕读取软件用户就可以方便的跳转到他所关心的 section 中。
例如下图页面由 General Info, Hardware, Operating System, Software 四个 section 组成：
图 2. 多 section 的 Web 应用示例图Web 应用开发人员需要在当前页面最上部添加四个链接：
清单 6. 添加 skip to navigation 链接 .

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div style="position: absolute; left: -3000px; width: 500px;">     <a dojoattachevent="onclick:_onSkipActivation, onfocus:_onFocusItem" href="#">        Skip To General Info     </a>     <a dojoattachevent="onclick:_onSkipActivation, onfocus:_onFocusItem" href="#">        Skip To Hardware     </a>     <a dojoattachevent="onclick:_onSkipActivation, onfocus:_onFocusItem" href="#">        Skip To Operating System     </a>     <a dojoattachevent="onclick:_onSkipActivation, onfocus:_onFocusItem" href="#">        Skip To Software     </a> </div>

同样的，这四个链接不会影响页面视图。当屏幕读取软件用户触发链接时，就会调用 onclick 事件，程序自动地将焦点设置到相应 section 的标题上，从而用户可以方便的浏览此 section 中的内容。