2.适应性
通过UI呈现给用户的网站结构应该有一套替代方法来满足盲人用户的需求,通过UI展现给用户的信息、结构和元素关系应该能由程序控制或有替代文本。以下两个例子描述了确认UI上的表单之间的关系的方法。
2.1 如果一个表单旁边有标签,可以使用“for”来确定标签和表单间的关系
本例子可用于大多数典型的表单结构,即每个条目字段旁都有标签。使用与相关数据条目元素的id属性相匹配的值为标签添加for属性。如果for属性未设置,仅当焦点位于输入表单时,用户才会听到“编辑器”。然而,如果为标签设置了for属性,用户将会听到“用户名列编辑器”。这能帮助用户明确表单的用处和应该输入什么。清单4是这些标签的代码。
图5.表单旁边有一个标签
清单4.表单中“for”参数的用法 - <div>
- <labelforlabelfor="user">Username:</label>
- <inputidinputid="user"class="lotusText"type="text"name="j_username"/>
- </rdiv><div>
- <labelforlabelfor="password">Password:</label><inputidinputid="password"
- class="lotusText"type="password"name="j_password"/>
- </div>
-
2.2 如果一个表单没有标签,则为“title”、“aria_title”或“aria_labelledby”设置参数。
图6.表单的数据输入字段旁没有标签
图6显示了一个表单,称为“AddRelatedActivity”。数据输入字段旁没有标签,但有一段长描述,因此应当为此表单设置title属性。
清单5.使用“title”属性 - <selecttitleselecttitle="AddRelatedActivity"style="width:530px;"size="5"
- name="target"dojoattachpoint="targetSelect_AP"/>
-
此外,设置另外两个属性也可以达到同样效果:aria_title和aria_labelledby。可以通过WAI-ARIA技术来使用这两个属性,我们将在本文中稍后讨论。
3.颜色
颜色是用户界面中一个重要的元素。有时,你宁愿使用颜色而不是意思相同的文字来表示某些功能性含义。这就违反了WCAGSC1.4.1,它指出颜色只能用于装饰;功能性含义不能只用颜色标记。以下两个例子就指出并解决了违反颜色相关规定的情况。
图7和8显示了一个此类违背的例子并提供了一个可行的解决方案。如果用颜色来表示特定的含义,视力受损的用户或使用高对比模式系统的用户就无法了解只通过颜色传达的信息。图7中的第一个例子显示了一个高对比屏幕,所有条目的颜色都消失了。因此用户无法看到条目间的区别。图8显示了一个解决方案,只需添加一些简单的有意义的文字,如[RequiringApproval]或[Draft],就可以区分不同类型的条目。
图7.颜色的不合理使用
图8.颜色的合理使用
图9显示的是另一个颜色可用性的问题。普通模式下,选项卡活动时会高亮显示,但如果系统设置为高对比模式,则无法确定哪个选项卡页是活动的。解决方法是在每个选项卡页上加上选项卡名称。这样,当用户进入某页时,就能知道该页是活动的。
图9.高对比模式下的颜色问题
|