表单和交互操作的无障碍设计.doc

信息无障碍网站的学习与设计 -------------无障碍网站表单的设计 【摘要】：表单(form)的设计在网站建设过程中算是属于“怎么做都行的”范畴，各个网站设计表单的方法带有很大的随意性，没有考虑到表单无障碍设计的问题，从而造成使用屏幕阅读器的视障学习者以及缺乏动作协调能力的学习者(使用键盘或类似辅助装置操控表单)操作表单时存在障碍。 【关键词】：信息无障碍 表单 设计 一、概述 表单的无障碍设计主要就是方便视障学习者和缺乏动作协调能力的学习者操控表单。具体来说，要解决两个问题:①确保视障学习者利用屏幕阅读器“听”网页时，能在脑海中将每个表单域和它的标签一一对应起来;②强化表单的键盘操作功能，确保缺乏动作协调能力的学习者在进入表单页面时，可以通过键盘顺利地将光标移动到表单处，并且可以方便地在表单内的各个表单域之间进行切换。 二、一般的表单设计 对于用户来说：意味可以参与其中 对于商业来说：增加用户数量，并且增进联系表单设计虽然看似简单，却是“见证”用户体验“功力”的地方。“HTML权威指南”对表单有如下描述：“输入要素应该被有逻辑地组织，这样大脑才能根据表格的布局理解和处理相关领域的信息。”这么说来,看似没有技术含量的表单，如何能够引导用户，如何使大脑快速捕捉理解处理信息……..里面的学问很值得研究。那么如何设计表单，让用户快速掌握并使用必须遵循一定的“潜规则”。 填表的时间需要尽量压缩，收集所需的信息也是用户熟悉的时候（例如：名字，地址，结账流程中的支付信息），垂直布局的标签和输入框效果最好（如下图）。每个标签和输入框连接紧密，布局的连贯性也减少视觉移动和处理时间。用户仅需要朝一个方向移动，那就是——向下。 标签（label）放在上面的优势在标签与输入框相邻，用户快速进行填表。缺点在于增加垂直空间。 在布局上，最好标签采用粗体。这增加了用户的视觉重量，并让标签更醒目。如果不加粗，标签还要和输入框PK，在用户看来他们的视觉重量差不多。 如果表单里面有用户不熟悉的信息，或者不容易处理的类型（比如地址所包含的各类信息），放在输入框左侧，左对齐的标签栏让用户扫视信息更容易。用户仅需要上下扫视至于左侧的标签栏就可以了，不会被输入框打断。然而，标签和输入框之间的距离也会延长用户找寻时间。用户不得不在输入框和标签间“跳来跳去”来找寻其中的联系。 右对齐的标签栏和输入框的关系相对清晰些（如下图）。然而，降低了扫描表格相关信息的效率。我们的习惯是从左至右阅读，眼睛喜欢左对齐的阅读。 使用视觉要素 由于左对齐水平标签有很多优势（容易扫描输入标签，减少纵向屏幕空间）。尽量修正它的缺陷：输入框和相关标签看上去不连贯。 一种方法是增添背景色和线条（如下图所示）： 不同的背景色区分标签和输入框；水平线将相关标签和输入框联系在一起。虽然这些看起来很不错，但是它也会产生很多问题。 无论是中线，背景还是水平线都会分散用户的视线，使他们不容易专注重要的信息：标签和输入框。正如视觉大师Edward Tufte所说：“信息表达出的差异产生理解差异。”也就是说，无助于布局的视觉要素是无意义的。可以想象(如下图所示），当你扫视左侧一栏的时候，眼睛要不断被水平线和背景色所打断诚然，也不是说背景色和线条永远不会用在表单设计中。当指出对用户有用的相关信息的时候，细线和淡淡的背景色可以有效地区分相关信息。无论是线条还是背景色都可以强调重要性并引导用户产生交互行为。首要行为按钮，比如“提交”，“保存”需要采用较重的视觉元素表示（比如高亮的颜色，加粗的字体，加入背景色等等）。来启发引导用户完成表单。 当表单含有多种交互行为的时候，比如“继续”和“返回”，最好减少视觉重量，让这些要素处于次要地位。这样减少用户发生潜在操作错误的风险，也可以更好地导航用户完成操作。 尽管以上原则有助于设计表单，但真正表单内容设计的好坏,最好还要通过用户测试或是数据分析（完成率，出错率等等）。 那么标签的位置，可以得出以下结论： 1.为了缩短时间或2.用户对所需内容输入比较熟悉的时候，采用标签顶部对齐的形式 当垂直空间有限制时，采用标签右侧对齐方式 对不不熟悉的内容输入或者需要强化的进入信息的时候，采用标签左侧对齐方式[1] 2、创建表单的的重点 (1 ) 使用表格创建表单时避免表格嵌套 长期以来, 网站设计开发人员广泛地采用表格建构表单, 用户也早就习惯了表单的一般外观: 左侧栏里是靠右对齐的文本标签 (la b e l ) , 右侧栏里是靠左对齐表单控件 使用一个简单的两栏的表格也就成了最容易的一种实现表单布局的方法 对于一些比较复杂的包含多种控件的表单, 完全依赖 CSS 来控制布局过于复杂, 并且常常会导致引入过多的spa n 和div标签, 使得代码比使