[ASP.net WebForm] 撰寫無障礙網頁的技巧&分享 - Part2 人工檢測篇

[ASP.net WebForm] 撰寫無障礙網頁的技巧&分享 - Part2 人工檢測篇

照著之前的文章寫完程式,雖然可以硬過機器檢測

但在人工檢測方面可能會被退件……

 

有些政府機關要求嚴格,必須連人工檢測部份也要符合無障礙標準

但人工檢測必須在平時撰寫程式時就該留意,網站完成後若再每個網頁一個一個比對修改的話,整個會更動很大

所以以下再針對A+無障礙的人工檢測分享一些心得:

 

1.DropDownList控制項最好不要AutoPostBack=”True”

範例:http://www.webguide.nat.gov.tw/wSite/lp?ctNode=14450&queryWord=%E7%84%A1%E9%9A%9C%E7%A4%99

說明:因為當DropDownList設定AutoPostBack=Ture的話,視障者使用鍵盤移動下拉選單,每次網頁會刷新,他們會重覆聽取網頁訊息。

 

2.Table行列標題請使用正確TH標籤

說明:GridView的ShowHeader=”True”時,呈現出Table的Header會自動套上th,ListView則須自行確保標題部份為th而不是td

 

3.表單的驗證碼圖片,要提供替代方案(EX:寄送mail、語音說明…)

假設驗證碼字串儲存在Session裡,則

img不可以寫成這樣:alt='<%= (String)Session["ValidateCode"] %>'

此會造成使用者按下網頁重新整理時,alt和網頁上看到的驗證碼不同,alt只要給”驗證碼”這三個字說明就夠了


 
<img src="GenerateValidateCode.aspx" width='100' height='50' alt='驗證碼' border='0' />
 

另外,須用<a>把該驗證碼圖片包起來成為超連結另開視窗,讓另一支程式去顯示該驗證碼字串。

或在驗證碼圖片<img />旁追加

 


<a href="ShowValidateCode.aspx" target="_blank">顯示驗證碼</a>

然後ShowValidateCode.aspx這支程式就去顯示Session裡的驗證碼

兩者作法都是一樣的原理

 

4. 使用JavaScript語言需指定不支援JavsScript時的辦法

官方說明:http://www.webguide.nat.gov.tw/wSite/ct?xItem=36838&ctNode=14473&mp=1

實務範例:以Javascript更改字級大小為例

要追加


<!--中文版-->
<noscript>
字級大小SCRIPT,如您的瀏覽器不支援,IE6請利用鍵盤按住ALT鍵 + V → X → (G)最大(L)較大(M)中(S)較小(A)小,來選擇適合您的文字大小,如為IE7或Firefoxy瀏覽器則可利用鍵盤 Ctrl + (+)放大 (-)縮小來改變字型大小。
</noscript>

<!--英文版-->
<noscript>
Word-class size SCRIPT, such as your browser does not support, IE6 please use the keyboard hold down the ALT key + V → X → (G) the largest (L) larger (M) in the (S) smaller (A) small, to choose The text size is right for you, or if, for IE7 Firefoxy browser can use the keyboard Ctrl + (+) to enlarge (-) narrowed to change the font size.
</noscript>

如此一來,當使用者的瀏覽器把Javascript關閉時,<noscript>區塊裡的文字就會出現如下圖

 

5. 超連結須加上title屬性

例:


<a href="http://tw.yahoo.com" alt="機器檢測必填" title="人工檢測會檢查" >Yahoo</a>

6.對經常使用的超連結,提供快速鍵的操作

例:


<a href="http://tw.yahoo.com" accesskey="C">靜態網頁</a>

<asp:HyperLink AccessKey="C" runat="server">Server控制項</asp:HyperLink>
<!--以上兩個當使用者在網頁中按下Alt+C時,焦點就會移到該超連結-->

 

6.美編、排版圖片的裝飾圖,用alt=””,項目符號圖片用alt=”*”

說明:如果以上兩種圖的alt設定說明文字的話,語言朗讀系統會重覆讀取無意義的資訊。

7.由於人工檢測時,檢測人員會關閉瀏覽器的javascript功能,所以得留意Ajax過不了人工檢測

 

以上會再不定期更新

轉載文章是可以,但一定要貼上來源超連結,因為此文章會一直更新,我不想讓有需要的人被誤導