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

xiaozhi7616

浏览: 196652 次
性别:
来自: 北京

最近访客更多访客>>

javabang

wjiayun

nicholaskong

ymgjava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

JSF IE CSS Go Firefox

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

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

(当然这种情况在比较复杂的页面才有可能发生，不是所有的页面都会出现这个问题，而且问题发生的前提也不仅仅是使用JSF控件才会出现，使用其他的一些控件或者JavaScript类库同样有可能出现上述情况)

整理了一下解决这个问题的方法，以供遇到同样问题的朋友参考，这里仅使用一个简单的例子来说明问题，至于重现Tab键进入页面的时候要跳很多次的现象，这个工作就不做了，也没有必要。我准备了一个这样的界面：

给页面加上第一个元素，实际上很简单，在<body>标签后面加上一组标签，要紧接着<body>。

<body>
		<div class="first">
			<a href="#content" accesskey="2">Go Content</a>
		</div>

接下来定义它的CSS样式，这一步是最关键的

.first a{
	position:absolute;  /* 相对定位 */
	overflow:hidden;	/* 隐藏溢出部分 */
	width:0;			
	height:0;				
}

.first a:active, .first a:focus{

	position:absolute;
	overflow:visible;  /* 显示出部分 */
	width:65px;
	height:auto;
	
	/* 以下是定义显示样式 */
	padding:10px;
	top:5px;
	left:5px;
	z-index:100;
	background-color:yellow;
	border:2px dotted red;
	color:red;
	font-weight:bold;
}

把文字 Go Content 放在<a>标签中构成链接，链接指向 ID 为 “content” 的页面元素。
accessKey，为页面元素定义accessKey，在IE中访问的时候可以使用 Alt 键加上定义的数字键组合起来就可以直接访问到该页面元素。
定义它的样式长宽均为0，超出内容部分隐藏(overflow:hidden)，实际上标签<a>中所有的内容都溢出了，都会被隐藏掉，也就是正常状态下在页面中根本就看不到这个链接，这样的目的是正常显示的时候该链接并不会影响所在页面本身的内容，不会给用户造成内容上混淆。
定义链接在激活和得到焦点时的样式，超出<a>标签内容的部分会被显示(overflow:visible)，并指定显示部分的样式。

来看一下效果，当进入页面的时候，使用Tab键（或者在IE中使用 Alt+2 组合键）进入页面访问到页面内容部分第一个可获得焦点的元素就可以显示出来刚才定义的这个部分（仅是用Tab键访问的情况，鼠标操作是没有效果的）

IE中的效果：

FireFox中的效果：

看到在这两个主流的浏览器中显示的效果基本是一致的，但是还一个小小的区别，在IE中第一个获得焦点的页面元素是之前定义的链接“Go Content”，而在FireFox中，第一个获得焦点的页面元素是body，第二个才是“Go Content”，但是这并没有什么影响，我们要的效果已经达到了。

这样使用屏幕读取软件读到的页面内容就是从链接"Go Content"开始，可以直接跳到内容部分，绕过了其他控件生成的页面元素，使整个页面内容保持了一致性。

最后附上两个文件的代码，有兴趣的朋友可以试一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>Accessibility</title>
	</head>
	<body>
		<div class="first">
			<a href="#content" accesskey="2">Go Content</a>
		</div>
		<div id="header">
			<h1>Accessibility</h1>
		</div>
		<div id="content">
			<p>Accessibility is a general term used to describe the degree to which a product (e.g., device, service, environment) is accessible by as many people as possible. Accessibility can be viewed as the "ability to access" the functionality, and possible benefit, of some system or entity. Accessibility is often used to focus on people with disabilities and their right of access to entities, often through use of assistive technology. Several definitions of accessibility refer directly to access-based individual rights laws and regulations. Products or services designed to meet these regulations are often termed Easy Access or Accessible.</p>
		</div>
		<div id="footer">
			<p>Accessibility</p>
		</div>
	</body>
</html>

body {background-color:white; margin: 20px; font-family:Arial; font-size: 11px;}
a{text-decoration:none;}
a:visited {color:black;}
h1{color: skyblue; font-size:3em; }
p{font-size:1.5em; line-height:1.2;	word-spacing: 5px;}

.first a{
	position:absolute;  /* 相对定位 */
	overflow:hidden;	/* 隐藏溢出部分 */
	width:0;			
	height:0;				
}

.first a:active, .first a:focus{

	position:absolute;
	overflow:visible;  /* 显示出部分 */
	width:65px;
	height:auto;
	
	/* 以下是定义显示样式 */
	padding:10px;
	top:5px;
	left:5px;
	z-index:100;
	background-color:yellow;
	border:2px dotted red;
	color:red;
	font-weight:bold;
}