创建符合逻辑的Tab序列

网站无障碍是否成功很大程度上取决于Tab序列(Tab order)

先对中国开发者说一句话,其实绝大多数的技术方案,外国同行跟我们的想法是高度的一致。通过Techniques for WCAG 2.0就会发现。如果要我说,中国的开发者除了语言以外,和国外开发者唯一的差距就是——腼腆,也就是很少参与国际上的交流。其实我也一样。大家共勉!

和W3C的信息无障碍专家张昆先生聊天的时候,他向我转达了一个W3C对腾讯的疑惑:“为什么腾讯如此大力的支持W3C,主办TPAC2013(这也是W3C第一次来中国举办会议),但是参与的却很少(去到各个工作组中和国外的技术人员一起探讨制定标准)。”

基于Techniques for WCAG 2.0 H4: Creating a logical tab order through links, form controls, and objects

有时候,特别是在登录页面,搜索页面,提交订单页面等等页面, 一个高效的、符合逻辑的Tab序列不能基于DOM本身的顺序(如果不完全理解上面这句话,请查看本站早期的文章)。相对于基于DOM的Tab序列,网站作者需要制定一个特殊的Tab序列。我们可以使用tabindex来设计各个元素的tab序列。tabindex的取值为-1,0~32767。如果一个元素的tabindex=”-1″,则无法使用tab键进行聚焦;tabindex=”0″,可以使一个非可聚焦元素“转变为”可聚焦元素,他的顺序并不优先,仍然取决于他的所在的DOM中的顺序。而1~32767则是主要负责为各个设置了tabindex的元素进行排序。数字的值越大,其数序越靠后,也就是说,如果一个元素的tabindex是1,而另一个元素的tabindex是4,那么按一下tab键首先到1,因为1小于4。

tanindex的值不必是连续的,并且不必是唯一的。也就是说你可以给多个元素设置相同的tabindex值。这些相同tabindex的元素的顺序就取决于他们在DOM中的顺序了。

下面的公式,左侧的最大:

1 > 2 > 3 > …… > 23767 > (0 = 默认可聚焦的元素)

以微信的公共平台登录页面为例,页面主要的功能是登录,所以在页面载入的时候,利用js将焦点赋予了用户名的input。

微信公共平台登录页面

接着再按Tab键,就按照DOM顺序往下继续走:密码,记住帐号,无法登录,登录。(根据DOM顺序继续移动)。但是用户名之前的可聚焦元素如何访问?比如右上角的立即注册。

如果不使用js将焦点聚焦到用户名位置,而是为用户名,密码,记住帐号,无法登录,登录这几个元素设置tabindex=”1″。结果会怎样?各位可以试试。当然这里有一个权衡。或者两者结合又是一个什么样的体验。(重点在于tab序列和普通用户与键盘用户的综合体验)

下面的三个例子是H4: Creating a logical tab order through links, form controls, and objects给出的,可以体会一下。

Exa1:典型的表格,表格默认是从左到右,从上到下。利用tabindex,让键盘操作(Tab序列)更加有逻辑

<form action="#" method="post">
 <table summary="第一列是新郎的搜索条件,第二列是新娘的搜索条件">
 <caption>搜索结婚记录</caption>
 <tr>
   <th>搜索条件</th>
   <th>新郎</th>
   <th>新娘</th>
 </tr>
 <tr>
  <th>姓</th>
  <td><input type="text" size="30" value="" name="groomxing" 
      title="新郎的姓氏" tabindex="1"></td>
  <td><input type="text" size="30" value="" name="bridexing" 
       title="新娘的姓氏" tabindex="4"></td>
 </tr>
 <tr>
  <th>名</th>
  <td><input type="text" size="30" value="" name="groomming" 
      title="新郎的名字" tabindex="2"></td>
  <td><input type="text" size="30" value="" name="brideming" 
      title="新娘的名字" tabindex="5"></td>
 </tr>
 <tr>
  <th>Place of birth</th>
  <td><input type="text" size="30" value="" name="groombirth" 
      title="新郎的出生日期" tabindex="3"></td>
  <td><input type="text" size="30" value="" name="bridebirth" 
      title="新娘的出生日期" tabindex="6"></td>
 </tr>
</table>
</form>

Exa2:一个网页中包含了一个搜索域,它在页面的右上角。为这个搜索域设置tabindex=”1″,那么页面再入后按tab会首先将焦点移动到这个搜索域中。再按tab,会到原有的序列,也就是DOM中第一个可聚焦的元素。

Exa3

 <a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long 
  after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
  ...
<a href="xxx" tabindex = "1">Twentieth link in list</a>

实际工作中,可以先检测是否有tabindex属性,如果没有的话,一定是基于DOM。如果有tabindex,查看代码。最后无论是否使用,都可以利用人工或者工具来检测和标注当前页面的Tab顺序。

关于 rockywen

平等、美好、安逸、自由 Accessibility Strategist 你已经努力的创造了一个伟大的应用,不要错过这个让他能服务更多用户的机会。还有,这是一件对的事情。
此条目发表在 技术 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注