开发支持屏幕读取软件的 Web 2.0 应用

核心提示： 支持读取页面信息功能屏幕读取软件的基本功能就是读取页面信息，而屏幕读取软件阅读网页的能力主要来自网页中 HTML 元素给出的相应信息，开发支持屏幕读取软件的 Web 2.0 应用(2)，比如链接 a 标记的 href 和 title 属性，屏幕读取软件通过 href 属性来识别链接标记，可以忽视

支持读取页面信息功能

屏幕读取软件的基本功能就是读取页面信息。而屏幕读取软件阅读网页的能力主要来自网页中 HTML 元素给出的相应信息，比如链接 a 标记的 href 和 title 属性。屏幕读取软件通过 href 属性来识别链接标记。例如下列 javascript 脚本片断：

清单 1. 含有链接的 javascript 片断 .

　var　link　=　document.createElement("a");　
　link.innerHTML　=　“Go　Back　to　RQM　Home”;　
　link.title　=　“Go　Back　to　RQM　Home”;　
　link.onclick　=　dojo.hitch(this,　"showHomePage");　
　link.id　=　"return-rqm-home-link";　

相应的 css 片断：

清单 2. 支持链接的 css 片断 .

　#return-rqm-home-link　
　{　
　　color:　rgb(48,　158,　158)　!important;　
　　margin-top:　5px;　
　　margin-left:　10px;　
　　font-size:　8pt;　
　}　

程序员动态生成链接标签，并且使用 css 来控制链接的颜色，用 onclick 方法控制链接的行为。但由于没有 href 属性，屏幕读取软件并不能识别 link 是一个链接标记。因此需要为它设置 href 属性，同时不影响链接的行为：

清单 3.为链接添加标识 .

　link.setAttribute("href",　"javascript:{}");　

支持页面导航功能

视力正常的用户可以很容易的分辨整个页面的布局。例如，他们可以忽视标题或者列表，从而直接获取主要内容区域的信息。如果页面组织结构合理，上述的大多数方法同样适用于屏幕读取软件。

Skip to main content

当导航条出现在页面上方或者左方时，使用屏幕读取软件的用户必需听完导航条上所有的 link 或者 button，才能获取页面主体部分的信息。当一个 Web 应用中的所有页面都保持这种统一布局风格时，用户每切换一次页面，都要重新浏览一遍导航条中的内容。这对视力正常的用户来说，可以忽视这些 link 直接阅读，而屏幕读取软件则借助 “Skip to main content”链接略过导航条的所有内容，直接将焦点设置到页面的主体部分。