你好,欢迎来到电脑编程技巧与维护杂志社! 杂志社简介广告服务读者反馈编程社区  
合订本订阅
 
 
您的位置:技术专栏 / Web开发
Web 2.0应用程序最佳实践(2)
 

2.适应性

通过UI呈现给用户的网站结构应该有一套替代方法来满足盲人用户的需求,通过UI展现给用户的信息、结构和元素关系应该能由程序控制或有替代文本。以下两个例子描述了确认UI上的表单之间的关系的方法。

2.1 如果一个表单旁边有标签,可以使用“for”来确定标签和表单间的关系

本例子可用于大多数典型的表单结构,即每个条目字段旁都有标签。使用与相关数据条目元素的id属性相匹配的值为标签添加for属性。如果for属性未设置,仅当焦点位于输入表单时,用户才会听到“编辑器”。然而,如果为标签设置了for属性,用户将会听到“用户名列编辑器”。这能帮助用户明确表单的用处和应该输入什么。清单4是这些标签的代码。

表单旁边有一个标签 
图5.表单旁边有一个标签

清单4.表单中“for”参数的用法 

  1. <div> 
  2. <labelforlabelfor="user">Username:</label> 
  3. <inputidinputid="user"class="lotusText"type="text"name="j_username"/> 
  4. </rdiv><div> 
  5. <labelforlabelfor="password">Password:</label><inputidinputid="password" 
  6. class="lotusText"type="password"name="j_password"/> 
  7. </div>
  8.  

2.2 如果一个表单没有标签,则为“title”、“aria_title”或“aria_labelledby”设置参数。

表单的数据输入字段旁没有标签 
图6.表单的数据输入字段旁没有标签

图6显示了一个表单,称为“AddRelatedActivity”。数据输入字段旁没有标签,但有一段长描述,因此应当为此表单设置title属性。

清单5.使用“title”属性 

  1. <selecttitleselecttitle="AddRelatedActivity"style="width:530px;"size="5" 
  2. name="target"dojoattachpoint="targetSelect_AP"/> 
  3.  

此外,设置另外两个属性也可以达到同样效果:aria_title和aria_labelledby。可以通过WAI-ARIA技术来使用这两个属性,我们将在本文中稍后讨论。

3.颜色

颜色是用户界面中一个重要的元素。有时,你宁愿使用颜色而不是意思相同的文字来表示某些功能性含义。这就违反了WCAGSC1.4.1,它指出颜色只能用于装饰;功能性含义不能只用颜色标记。以下两个例子就指出并解决了违反颜色相关规定的情况。

图7和8显示了一个此类违背的例子并提供了一个可行的解决方案。如果用颜色来表示特定的含义,视力受损的用户或使用高对比模式系统的用户就无法了解只通过颜色传达的信息。图7中的第一个例子显示了一个高对比屏幕,所有条目的颜色都消失了。因此用户无法看到条目间的区别。图8显示了一个解决方案,只需添加一些简单的有意义的文字,如[RequiringApproval]或[Draft],就可以区分不同类型的条目。

颜色的不合理使用 
图7.颜色的不合理使用

颜色的合理使用 
图8.颜色的合理使用

图9显示的是另一个颜色可用性的问题。普通模式下,选项卡活动时会高亮显示,但如果系统设置为高对比模式,则无法确定哪个选项卡页是活动的。解决方法是在每个选项卡页上加上选项卡名称。这样,当用户进入某页时,就能知道该页是活动的。

高对比模式下的颜色问题
 图9.高对比模式下的颜色问题

  推荐精品文章

·2024年9月目录 
·2024年8月目录 
·2024年7月目录 
·2024年6月目录 
·2024年5月目录 
·2024年4月目录 
·2024年3月目录 
·2024年2月目录 
·2024年1月目录
·2023年12月目录
·2023年11月目录
·2023年10月目录
·2023年9月目录 
·2023年8月目录 

  联系方式
TEL:010-82561037
Fax: 010-82561614
QQ: 100164630
Mail:gaojian@comprg.com.cn

  友情链接
 
Copyright 2001-2010, www.comprg.com.cn, All Rights Reserved
京ICP备14022230号-1,电话/传真:010-82561037 82561614 ,Mail:gaojian@comprg.com.cn
地址:北京市海淀区远大路20号宝蓝大厦E座704,邮编:100089