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

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

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

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

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

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

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

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

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

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

10、4.2 1所示表單為例，說明如何使用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)請您選擇/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)您對我們網(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通過標(biāo)記將表單域標(biāo)簽與其相應(yīng)的表單域關(guān)聯(lián)起來后，表單在普通瀏覽器中運(yùn)行 時(shí)并無什么區(qū)別，但是對使用屏幕閱讀器的視障學(xué)習(xí)者卻有很大的幫助，要注意的是的fo r屬性值是相應(yīng)表單控件的id值，而不是na l n e值(3 )將大型表單的控件進(jìn)行分組如果網(wǎng)站中的表單比較復(fù)雜，包含較多的控件，則需要對表單控件

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

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