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

1、信息无障碍网站的学习与设计无障碍网站表单的设计【摘要】：表单（form）的设计在网站建设过程中算是属于“怎么做都行的”范畴，各个网站设计表单的方 法带有很大的随意性，没有考虑到表单无障碍设计的问题，从而造成使用屏幕阅读器的视障学习者以及缺 乏动作协调能力的学习者（使用键盘或类似辅助装置操控表单）操作表单时存在障碍。【关键词】：信息无障碍表单 设计一、概述表单的无障碍设计主要就是方便视障学习者和缺乏动作协调能力的学习者操控表单。具 体来说，要解决两个问题:确保视障学习者利用屏幕阅读器“听”网页时，能在脑海中将 每个表单域和它的标签一一对应起来;强化表单的键盘操作功能，确保缺乏动作协调能力 的学习

2、者在进入表单页面时，可以通过键盘顺利地将光标移动到表单处，并且可以方便地在 表单内的各个表单域之间进行切换。、一般的表单设计对于用户来说：意味可以参与其中，对于商业来说：增加用户数量，并且增进联系。 表单设计虽然看似简单，却是“见证”用户体验“功力”的地方。“HTML权威指南”对表单有如 下描述：“输入要素应该被有逻辑地组织，这样大脑才能根据表格的布局理解和处理相关领 域的信息。”这么说来，看似没有技术含量的表单，如何能够引导用户，如何使大脑快速捕捉 理解处理信息里面的学问很值得研究。那么如何设计表单，让用户快速掌握并使用必须遵循一定的“潜规则”。填表的时间需要尽量压缩，收集所需的信息也是用户

3、熟悉的时候（例如：名字，地址， 结账流程中的支付信息），垂直布局的标签和输入框效果最好（如下图）。每个标签和输入框 连接紧密，布局的连贯性也减少视觉移动和处理时间。用户仅需要朝一个方向移动，那就是 向下。标签（label）放在上面的优势在标签与输入框相邻，用户快速进行填表。缺点在于增 加垂直空间。在布局上，最好标签采用粗体。这增加了用户的视觉重量，并让标签更醒目。如果不加 粗，标签还要和输入框？虬在用户看来他们的视觉重量差不多。如果表单里面有用户不熟悉的信息，或者不容易处理的类型（比如地址所包含的各类信 息），放在输入框左侧，左对齐的标签栏让用户扫视信息更容易。用户仅需要上下扫视至于 左侧的标

4、签栏就可以了，不会被输入框打断。然而，标签和输入框之间的距离也会延长用户 找寻时间。用户不得不在输入框和标签间“跳来跳去”来找寻其中的联系。右对齐的标签栏和输入框的关系相对清晰些（如下图）。然而，降低了扫描表格相关信 息的效率。我们的习惯是从左至右阅读，眼睛喜欢左对齐的阅读。使用视觉要素由于左对齐水平标签有很多优势（容易扫描输入标签，减少纵向屏幕空间）。尽量修正 它的缺陷：输入框和相关标签看上去不连贯。一种方法是增添背景色和线条（如下图所示）：不同的背景色区分标签和输入框；水平线将相关标签和输入框联系在一起。虽然这些看 起来很不错，但是它也会产生很多问题。无论是中线，背景还是水平线都会分散用户

5、的视线，使他们不容易专注重要的信息：标 签和输入框。正如视觉大师Edward Tufte所说：“信息表达出的差异产生理解差异。”也就是 说，无助于布局的视觉要素是无意义的。可以想象（如下图所示），当你扫视左侧一栏的时候， 眼睛要不断被水平线和背景色所打断诚然，也不是说背景色和线条永远不会用在表单设计中。当指出对用户有用的相关信息 的时候，细线和淡淡的背景色可以有效地区分相关信息。无论是线条还是背景色都可以强调 重要性并引导用户产生交互行为。首要行为按钮，比如“提交”，“保存”需要采用较重的视觉元素表示（比如高亮的颜色， 加粗的字体，加入背景色等等）。来启发引导用户完成表单。当表单含有多种交互行

6、为的时候，比如“继续”和“返回”，最好减少视觉重量，让这些要 素处于次要地位。这样减少用户发生潜在操作错误的风险，也可以更好地导航用户完成操作。尽管以上原则有助于设计表单，但真正表单内容设计的好坏，最好还要通过用户测试或 是数据分析(完成率，出错率等等)。那么标签的位置，可以得出以下结论：为了缩短时间或2.用户对所需内容输入比较熟悉的时候，采用标签顶部对齐的形式当垂直空间有限制时，采用标签右侧对齐方式对不不熟悉的内容输入或者需要强化的进入信息的时候，采用标签左侧对齐方式1 三、无障碍网站的表单设计创建可访问的表单Web页表单可能给视力低下的人士以及缺乏动作协调性的人士带来问题。如果通过屏幕阅

7、读器访问Web页表单，那么可能很难将表单域与其相应的标签相关联。HTML4.0中引入 lbae标记，以使表单域标签能够与表单域相关联。2、创建表单的的重点(1 )使用表格创建表单时避免表格嵌套长期以来，网站设计开发人员广泛地采用表格建构表单，用户也早就习惯了表单的一般 外观：左侧栏里是靠右对齐的文本标签(la b e l ),右侧栏里是靠左对齐表单控件”使用一 个简单的两栏的表格也就成了最容易的一种实现表单布局的方法对于一些比较复杂的包含多种控件的表单，完全依赖CSS来控制布局过于复杂，并且 常常会导致引入过多的spa n 和div标签，使得代码比使用表格还要臃肿，但是，在使用 表格创建表单时

8、，如果设计不当，就会造成使用屏幕阅读器的视障用户在操控表单时存在障 碍，所以可以使用一个嵌套了两层表格所创建的网页表单,从表单的外观上看，该表单与其 它表单没有什么区别，但是用Dreamweaver打开该表单网页，就可以发现表单设计者在利用 表格创建表单时，嵌套了两层表格，只是将表格的边框属性(border )设置为0，所以网页 运行时，用户看不到表单边框。但是这种表单给使用屏幕阅读器的视障学习者及缺乏动作 协调能力！借助键盘操控表单的学习者的使用都带来了障碍，这里先论述该表单对使用屏幕 阅读器的学习者造成的障碍，屏幕阅读器在读取表格时，一次只读取一个单元格(td )的内 容，并按照从左至右，

9、从上至下的顺序读取。由于该表单使用了三层表格，因此在读取表单 时，先从上至下，读取完左边蓝色表格中的八个单元格内容之后，再接着按从上至下的顺序 读取右边蓝色表格中的八个单元格内容并且设计者没有利用l a be l 属性为文本和相应 的表单控件建立关联，在这种情况下，视障学习者根本无法在脑海中将文本和相应控件建立 关联，无法理解这到底是一个什么样的表单(2 )将表单域标签与相应的表单域建立关联为了帮助使用屏幕阅读器的视障学习者在脑海中将表单域标签和表单域建立关联，形 成表单的清晰样式，教育网站的设计开发者可以通过设置l a beD标签的fo r属性，将表 单域标签和表单域建立明确的一对一关系以图

10、4.2 1所示表单为例，说明如何使用l a be l 建立表单域和标签之间的关联，部分代码如下如示：table border=*0*姓名：/Mbel/tdtd)Ctd您是否是在校学生?Qr是/labelX/td否/labelX/tdClabel for=*interest*感兴趣的学习内 容?option value=*0* selected)请您选择/option教育技术学理论/option(option value=*2*网络远程教育教育培训系统设计 信息化教育智能教学系统option(option value=*6*其它/叩tiontr)您对我们网站的建 i?C:*CtdXtextare

11、a 珀幅=寸 cols=2。 name=*comments*i d=*comniflr 订倒网站最新消息 input type submit* name3*submit* va1ue=提交*input type=*reset* naroe=*resetJK valueIR 消*X/td/forint通过标记将表单域标签与其相应的表单域关联起来后，表单在普通浏览器中运行 时并无什么区别，但是对使用屏幕阅读器的视障学习者却有很大的帮助，要注意的是的fo r属性值是相应表单控件的id值，而不是na l n e值(3 )将大型表单的控件进行分组如果网站中的表单比较复杂，包含较多的控件，则需要对表单控件

12、进行分组，并且为每 个分组设置快捷键,因为使用屏幕阅读器的学习者在聆听大型表单时，很容易忘记正在聆听 该表单的哪个部分，将控件分组后，便于他们理解和记忆；同时，对于缺乏动作协调能力依 赖键盘操控表单的学习者也有很大的帮助，他们可以利用快捷键将光标直接移动到目标分 组内，再在组内移动光标，选择要操作的控件，从而减少操作的难度。以图4.1 9所示表单 为例，为其表单控件进行分组后，表单控件分组主要通过(fieldset标记和(legend标记来完现 fieldset标记将表单控件划分为几个子表单，标记则用于说明这些子表单的用途， 快捷键的设置包含在标记中在浏览器中显示时，这些子表单被边框直观地划分

13、为 多个单独的区域。(4 )为表单控件设置/ aeeesskey 0值和/t ab i nd ex 0值网站中表单的设计与开发，不仅要考虑使用屏幕阅读器的视障学习者的需要，还要考虑 运动障碍学习者在使用表单时可能存在的障碍，因此在设计开发表单时，需要为每个表单域 设置aeeesskey和tab index属性Accesskey属性和ta b index属性能够提升表单的导航 性，方便运动障碍学习者使用键盘来移动表单控件的当前焦点，实现表单内导航a c c e sske y属性使学习者能够通过A l t或Ct r i +a c ce s skey值的组合键方式直接导航到任 何表单域ta b in d e x属性则能使设计开发者控制网页组件的的Ta b键顺序，例如将一个 表单域的ta b i ndex值设为1，那么当学习者第一次按Ta b键时，该页中任何出现在该表 单之前的其他元素都被跳过。四、结论目前在中国提供过于细致深入的技术和技巧，还并不很成熟,还有待于许多现实条件的发 展:如计算机的普及，网络的普及，有关基本知识的普及以及技术人员素质和数量的提升。残疾 人无疑是社会的弱势群体,一个国家一个