表單和交互操作的無(wú)障礙設(shè)計(jì)

1、信息無(wú)障礙網(wǎng)站的學(xué)習(xí)與設(shè)計(jì)無(wú)障礙網(wǎng)站表單的設(shè)計(jì)【摘要】：表單（form）的設(shè)計(jì)在網(wǎng)站建設(shè)過(guò)程中算是屬于“怎么做都行的”范疇，各個(gè)網(wǎng)站設(shè)計(jì)表單的方 法帶有很大的隨意性，沒(méi)有考慮到表單無(wú)障礙設(shè)計(jì)的問(wèn)題，從而造成使用屏幕閱讀器的視障學(xué)習(xí)者以及缺 乏動(dòng)作協(xié)調(diào)能力的學(xué)習(xí)者（使用鍵盤(pán)或類(lèi)似輔助裝置操控表單）操作表單時(shí)存在障礙?！娟P(guān)鍵詞】：信息無(wú)障礙表單 設(shè)計(jì)一、概述表單的無(wú)障礙設(shè)計(jì)主要就是方便視障學(xué)習(xí)者和缺乏動(dòng)作協(xié)調(diào)能力的學(xué)習(xí)者操控表單。具 體來(lái)說(shuō)，要解決兩個(gè)問(wèn)題:確保視障學(xué)習(xí)者利用屏幕閱讀器“聽(tīng)”網(wǎng)頁(yè)時(shí)，能在腦海中將 每個(gè)表單域和它的標(biāo)簽一一對(duì)應(yīng)起來(lái);強(qiáng)化表單的鍵盤(pán)操作功能，確保缺乏動(dòng)作協(xié)調(diào)能力 的學(xué)習(xí)

2、者在進(jìn)入表單頁(yè)面時(shí)，可以通過(guò)鍵盤(pán)順利地將光標(biāo)移動(dòng)到表單處，并且可以方便地在 表單內(nèi)的各個(gè)表單域之間進(jìn)行切換。、一般的表單設(shè)計(jì)對(duì)于用戶(hù)來(lái)說(shuō)：意味可以參與其中，對(duì)于商業(yè)來(lái)說(shuō)：增加用戶(hù)數(shù)量，并且增進(jìn)聯(lián)系。 表單設(shè)計(jì)雖然看似簡(jiǎn)單，卻是“見(jiàn)證”用戶(hù)體驗(yàn)“功力”的地方?！癏TML權(quán)威指南”對(duì)表單有如 下描述：“輸入要素應(yīng)該被有邏輯地組織，這樣大腦才能根據(jù)表格的布局理解和處理相關(guān)領(lǐng) 域的信息?！边@么說(shuō)來(lái)，看似沒(méi)有技術(shù)含量的表單，如何能夠引導(dǎo)用戶(hù)，如何使大腦快速捕捉 理解處理信息里面的學(xué)問(wèn)很值得研究。那么如何設(shè)計(jì)表單，讓用戶(hù)快速掌握并使用必須遵循一定的“潛規(guī)則”。填表的時(shí)間需要盡量壓縮，收集所需的信息也是用戶(hù)

3、熟悉的時(shí)候（例如：名字，地址， 結(jié)賬流程中的支付信息），垂直布局的標(biāo)簽和輸入框效果最好（如下圖）。每個(gè)標(biāo)簽和輸入框 連接緊密，布局的連貫性也減少視覺(jué)移動(dòng)和處理時(shí)間。用戶(hù)僅需要朝一個(gè)方向移動(dòng)，那就是 向下。標(biāo)簽（label）放在上面的優(yōu)勢(shì)在標(biāo)簽與輸入框相鄰，用戶(hù)快速進(jìn)行填表。缺點(diǎn)在于增 加垂直空間。在布局上，最好標(biāo)簽采用粗體。這增加了用戶(hù)的視覺(jué)重量，并讓標(biāo)簽更醒目。如果不加 粗，標(biāo)簽還要和輸入框？虬在用戶(hù)看來(lái)他們的視覺(jué)重量差不多。如果表單里面有用戶(hù)不熟悉的信息，或者不容易處理的類(lèi)型（比如地址所包含的各類(lèi)信 息），放在輸入框左側(cè)，左對(duì)齊的標(biāo)簽欄讓用戶(hù)掃視信息更容易。用戶(hù)僅需要上下掃視至于 左側(cè)的標(biāo)

4、簽欄就可以了，不會(huì)被輸入框打斷。然而，標(biāo)簽和輸入框之間的距離也會(huì)延長(zhǎng)用戶(hù) 找尋時(shí)間。用戶(hù)不得不在輸入框和標(biāo)簽間“跳來(lái)跳去”來(lái)找尋其中的聯(lián)系。右對(duì)齊的標(biāo)簽欄和輸入框的關(guān)系相對(duì)清晰些（如下圖）。然而，降低了掃描表格相關(guān)信 息的效率。我們的習(xí)慣是從左至右閱讀，眼睛喜歡左對(duì)齊的閱讀。使用視覺(jué)要素由于左對(duì)齊水平標(biāo)簽有很多優(yōu)勢(shì)（容易掃描輸入標(biāo)簽，減少縱向屏幕空間）。盡量修正 它的缺陷：輸入框和相關(guān)標(biāo)簽看上去不連貫。一種方法是增添背景色和線(xiàn)條（如下圖所示）：不同的背景色區(qū)分標(biāo)簽和輸入框；水平線(xiàn)將相關(guān)標(biāo)簽和輸入框聯(lián)系在一起。雖然這些看 起來(lái)很不錯(cuò)，但是它也會(huì)產(chǎn)生很多問(wèn)題。無(wú)論是中線(xiàn)，背景還是水平線(xiàn)都會(huì)分散用戶(hù)

5、的視線(xiàn)，使他們不容易專(zhuān)注重要的信息：標(biāo) 簽和輸入框。正如視覺(jué)大師Edward Tufte所說(shuō)：“信息表達(dá)出的差異產(chǎn)生理解差異。”也就是 說(shuō)，無(wú)助于布局的視覺(jué)要素是無(wú)意義的?？梢韵胂螅ㄈ缦聢D所示），當(dāng)你掃視左側(cè)一欄的時(shí)候， 眼睛要不斷被水平線(xiàn)和背景色所打斷誠(chéng)然，也不是說(shuō)背景色和線(xiàn)條永遠(yuǎn)不會(huì)用在表單設(shè)計(jì)中。當(dāng)指出對(duì)用戶(hù)有用的相關(guān)信息 的時(shí)候，細(xì)線(xiàn)和淡淡的背景色可以有效地區(qū)分相關(guān)信息。無(wú)論是線(xiàn)條還是背景色都可以強(qiáng)調(diào) 重要性并引導(dǎo)用戶(hù)產(chǎn)生交互行為。首要行為按鈕，比如“提交”，“保存”需要采用較重的視覺(jué)元素表示（比如高亮的顏色， 加粗的字體，加入背景色等等）。來(lái)啟發(fā)引導(dǎo)用戶(hù)完成表單。當(dāng)表單含有多種交互行

6、為的時(shí)候，比如“繼續(xù)”和“返回”，最好減少視覺(jué)重量，讓這些要 素處于次要地位。這樣減少用戶(hù)發(fā)生潛在操作錯(cuò)誤的風(fēng)險(xiǎn)，也可以更好地導(dǎo)航用戶(hù)完成操作。盡管以上原則有助于設(shè)計(jì)表單，但真正表單內(nèi)容設(shè)計(jì)的好壞，最好還要通過(guò)用戶(hù)測(cè)試或 是數(shù)據(jù)分析(完成率，出錯(cuò)率等等)。那么標(biāo)簽的位置，可以得出以下結(jié)論：為了縮短時(shí)間或2.用戶(hù)對(duì)所需內(nèi)容輸入比較熟悉的時(shí)候，采用標(biāo)簽頂部對(duì)齊的形式當(dāng)垂直空間有限制時(shí)，采用標(biāo)簽右側(cè)對(duì)齊方式對(duì)不不熟悉的內(nèi)容輸入或者需要強(qiáng)化的進(jìn)入信息的時(shí)候，采用標(biāo)簽左側(cè)對(duì)齊方式1 三、無(wú)障礙網(wǎng)站的表單設(shè)計(jì)創(chuàng)建可訪(fǎng)問(wèn)的表單Web頁(yè)表單可能給視力低下的人士以及缺乏動(dòng)作協(xié)調(diào)性的人士帶來(lái)問(wèn)題。如果通過(guò)屏幕閱

7、讀器訪(fǎng)問(wèn)Web頁(yè)表單，那么可能很難將表單域與其相應(yīng)的標(biāo)簽相關(guān)聯(lián)。HTML4.0中引入 lbae標(biāo)記，以使表單域標(biāo)簽?zāi)軌蚺c表單域相關(guān)聯(lián)。2、創(chuàng)建表單的的重點(diǎn)(1 )使用表格創(chuàng)建表單時(shí)避免表格嵌套長(zhǎng)期以來(lái)，網(wǎng)站設(shè)計(jì)開(kāi)發(fā)人員廣泛地采用表格建構(gòu)表單，用戶(hù)也早就習(xí)慣了表單的一般 外觀：左側(cè)欄里是靠右對(duì)齊的文本標(biāo)簽(la b e l ),右側(cè)欄里是靠左對(duì)齊表單控件”使用一 個(gè)簡(jiǎn)單的兩欄的表格也就成了最容易的一種實(shí)現(xiàn)表單布局的方法對(duì)于一些比較復(fù)雜的包含多種控件的表單，完全依賴(lài)CSS來(lái)控制布局過(guò)于復(fù)雜，并且 常常會(huì)導(dǎo)致引入過(guò)多的spa n 和div標(biāo)簽，使得代碼比使用表格還要臃腫，但是，在使用 表格創(chuàng)建表單時(shí)

8、，如果設(shè)計(jì)不當(dāng)，就會(huì)造成使用屏幕閱讀器的視障用戶(hù)在操控表單時(shí)存在障 礙，所以可以使用一個(gè)嵌套了兩層表格所創(chuàng)建的網(wǎng)頁(yè)表單,從表單的外觀上看，該表單與其 它表單沒(méi)有什么區(qū)別，但是用Dreamweaver打開(kāi)該表單網(wǎng)頁(yè)，就可以發(fā)現(xiàn)表單設(shè)計(jì)者在利用 表格創(chuàng)建表單時(shí)，嵌套了兩層表格，只是將表格的邊框?qū)傩?border )設(shè)置為0，所以網(wǎng)頁(yè) 運(yùn)行時(shí)，用戶(hù)看不到表單邊框。但是這種表單給使用屏幕閱讀器的視障學(xué)習(xí)者及缺乏動(dòng)作 協(xié)調(diào)能力！借助鍵盤(pán)操控表單的學(xué)習(xí)者的使用都帶來(lái)了障礙，這里先論述該表單對(duì)使用屏幕 閱讀器的學(xué)習(xí)者造成的障礙，屏幕閱讀器在讀取表格時(shí)，一次只讀取一個(gè)單元格(td )的內(nèi) 容，并按照從左至右，

9、從上至下的順序讀取。由于該表單使用了三層表格，因此在讀取表單 時(shí)，先從上至下，讀取完左邊藍(lán)色表格中的八個(gè)單元格內(nèi)容之后，再接著按從上至下的順序 讀取右邊藍(lán)色表格中的八個(gè)單元格內(nèi)容并且設(shè)計(jì)者沒(méi)有利用l a be l 屬性為文本和相應(yīng) 的表單控件建立關(guān)聯(lián)，在這種情況下，視障學(xué)習(xí)者根本無(wú)法在腦海中將文本和相應(yīng)控件建立 關(guān)聯(lián)，無(wú)法理解這到底是一個(gè)什么樣的表單(2 )將表單域標(biāo)簽與相應(yīng)的表單域建立關(guān)聯(lián)為了幫助使用屏幕閱讀器的視障學(xué)習(xí)者在腦海中將表單域標(biāo)簽和表單域建立關(guān)聯(lián)，形 成表單的清晰樣式，教育網(wǎng)站的設(shè)計(jì)開(kāi)發(fā)者可以通過(guò)設(shè)置l a beD標(biāo)簽的fo r屬性，將表 單域標(biāo)簽和表單域建立明確的一對(duì)一關(guān)系以圖

10、4.2 1所示表單為例，說(shuō)明如何使用l a be l 建立表單域和標(biāo)簽之間的關(guān)聯(lián)，部分代碼如下如示：table border=*0*姓名：/Mbel/tdtd)Ctd您是否是在校學(xué)生?Qr是/labelX/td否/labelX/tdClabel for=*interest*感興趣的學(xué)習(xí)內(nèi) 容?option value=*0* selected)請(qǐng)您選擇/option教育技術(shù)學(xué)理論/option(option value=*2*網(wǎng)絡(luò)遠(yuǎn)程教育教育培訓(xùn)系統(tǒng)設(shè)計(jì) 信息化教育智能教學(xué)系統(tǒng)option(option value=*6*其它/叩tiontr)您對(duì)我們網(wǎng)站的建 i?C:*CtdXtextare

11、a 珀幅=寸 cols=2。 name=*comments*i d=*comniflr 訂倒網(wǎng)站最新消息 input type submit* name3*submit* va1ue=提交*input type=*reset* naroe=*resetJK valueIR 消*X/td/forint通過(guò)標(biāo)記將表單域標(biāo)簽與其相應(yīng)的表單域關(guān)聯(lián)起來(lái)后，表單在普通瀏覽器中運(yùn)行 時(shí)并無(wú)什么區(qū)別，但是對(duì)使用屏幕閱讀器的視障學(xué)習(xí)者卻有很大的幫助，要注意的是的fo r屬性值是相應(yīng)表單控件的id值，而不是na l n e值(3 )將大型表單的控件進(jìn)行分組如果網(wǎng)站中的表單比較復(fù)雜，包含較多的控件，則需要對(duì)表單控件

12、進(jìn)行分組，并且為每 個(gè)分組設(shè)置快捷鍵,因?yàn)槭褂闷聊婚喿x器的學(xué)習(xí)者在聆聽(tīng)大型表單時(shí)，很容易忘記正在聆聽(tīng) 該表單的哪個(gè)部分，將控件分組后，便于他們理解和記憶；同時(shí)，對(duì)于缺乏動(dòng)作協(xié)調(diào)能力依 賴(lài)鍵盤(pán)操控表單的學(xué)習(xí)者也有很大的幫助，他們可以利用快捷鍵將光標(biāo)直接移動(dòng)到目標(biāo)分 組內(nèi)，再在組內(nèi)移動(dòng)光標(biāo)，選擇要操作的控件，從而減少操作的難度。以圖4.1 9所示表單 為例，為其表單控件進(jìn)行分組后，表單控件分組主要通過(guò)(fieldset標(biāo)記和(legend標(biāo)記來(lái)完現(xiàn) fieldset標(biāo)記將表單控件劃分為幾個(gè)子表單，標(biāo)記則用于說(shuō)明這些子表單的用途， 快捷鍵的設(shè)置包含在標(biāo)記中在瀏覽器中顯示時(shí)，這些子表單被邊框直觀地劃分

13、為 多個(gè)單獨(dú)的區(qū)域。(4 )為表單控件設(shè)置/ aeeesskey 0值和/t ab i nd ex 0值網(wǎng)站中表單的設(shè)計(jì)與開(kāi)發(fā)，不僅要考慮使用屏幕閱讀器的視障學(xué)習(xí)者的需要，還要考慮 運(yùn)動(dòng)障礙學(xué)習(xí)者在使用表單時(shí)可能存在的障礙，因此在設(shè)計(jì)開(kāi)發(fā)表單時(shí)，需要為每個(gè)表單域 設(shè)置aeeesskey和tab index屬性Accesskey屬性和ta b index屬性能夠提升表單的導(dǎo)航 性，方便運(yùn)動(dòng)障礙學(xué)習(xí)者使用鍵盤(pán)來(lái)移動(dòng)表單控件的當(dāng)前焦點(diǎn)，實(shí)現(xiàn)表單內(nèi)導(dǎo)航a c c e sske y屬性使學(xué)習(xí)者能夠通過(guò)A l t或Ct r i +a c ce s skey值的組合鍵方式直接導(dǎo)航到任 何表單域ta b in d e x屬性則能使設(shè)計(jì)開(kāi)發(fā)者控制網(wǎng)頁(yè)組件的的Ta b鍵順序，例如將一個(gè) 表單域的ta b i ndex值設(shè)為1，那么當(dāng)學(xué)習(xí)者第一次按Ta b鍵時(shí)，該頁(yè)中任何出現(xiàn)在該表 單之前的其他元素都被跳過(guò)。四、結(jié)論目前在中國(guó)提供過(guò)于細(xì)致深入的技術(shù)和技巧，還并不很成熟,還有待于許多現(xiàn)實(shí)條件的發(fā) 展:如計(jì)算機(jī)的普及，網(wǎng)絡(luò)的普及，有關(guān)基本知識(shí)的普及以及技術(shù)人員素質(zhì)和數(shù)量的提升。殘疾 人無(wú)疑是社會(huì)的弱勢(shì)群體,一個(gè)國(guó)家一個(gè)