Tab键获得页面第一焦点 - 可访问性问题

如果有视力障碍的用户访问系统时，通常是使用某些屏幕读取软件来读页面中的内容(如 Screen Reader)，屏幕读取软件通过页面中的某些标志性标记来读出相对应的内容，这类用户通常是使用键盘来进行操作的而非鼠标。

 

在项目中遇到了一个比较奇怪的问题，现象是这样，在使用键盘控制进入页面的时候，焦点应该停留在页面第一个能够获得焦点的元素上（<a>, <input>等等都是可以获得焦点的元素，而<div><span>则不能够获得焦点），但是因为我们的View层使用了经过封装后的JSF，JSF在实现界面展示的时候内部做了许多工作，因此导致在我们一进入页面的时候，焦点很可能落在JSF自己生成的元素上面，而我们却不得而知，导致焦点定位不准确，屏幕读取软件读到的内容不是正常情况下我们想得到的。

 

In order to meet accessibility requirements, every SSP page needs a hidden link just after the <body> tag that cannot be seen but allows users with screen readers to bypass all of the repetitive top navigation elements everytime they hit a page, 

The following code should appear in the style sheet: 
#skip a, #skip a:hover, #skip a:visited 
{ 
position:absolute; 
left:0px; 
top:-500px; 
width:1px; 
height:1px; 
overflow:hidden; 
} 

#skip a:active, #skip a:focus 
{ 
position:static; 
width:auto; 
height:auto; 
}

The CSS id should then be referenced from within the element tag: 

<body> 
<div id="skip"><a href="#maincontent">Skip to Main Content</a></div>

and finally the anchor, BELOW the top navigation area... 

<h1><a name="maincontent" id="maincontent"></a>Heading</h1>

Rest of page...

posted @ 2012-08-28 16:03  scieart  阅读(241)  评论(0)    收藏  举报