:::網站導覽】【首頁
無障礙網頁專區
民國106年6月29日 星期四
:::主選單區[認識無障礙][範例說明][檢測流程][下載區][相關網站][Q&A][諮詢服務]
首頁  範例說明(目前所在位置)
範例說明

  針對無障礙網頁檢測A+等級常見的一些不良設計,在此我們列舉了一些範例來做詳細的修正說明。除了程式碼的對照外,點選表格左方動畫小圖示,亦可連結到實例頁面,提供給大家做參考。

一、 規範 1.1: H101000 圖片需要加替代文字說明
實例畫面參考 1. 一般圖片,加上替代文字
不良設計: <img src="Themes/default/images/bg/banner-logo.gif" border="0" align="bottom"/>
修正: <img rc="public/LayoutDesign/1230892386294.gif" alt="政府網站營運交流平台">
(實例畫面參考:上方logo圖檔)
實例畫面參考 2. 條列式項目符號圖示,以"*"替代
不良設計: <img src="images/icon-arrow.png"' width="15" height="15">
修正: <img src="images/icon-arrow.png" width="15" height="15" alt="*" >
(實例畫面參考:條列式項目圖示)
實例畫面參考 3. 裝飾性圖片或排版用圖片,以" "替代
不良設計:

<img src="images/top/s-girl.jpg"' width="1" height="15">

修正:

img src="images/top/s-girl.jpg" width="10" height="15" alt="">
(實例畫面參考:邊界裝飾圖檔_左上角小女孩裝飾圖)

 

二、 規範 1.2: H101001 對於applet提供替代文字說明
實例畫面參考 1. APPLET標籤中設定alt屬性提供替代文字說明
不良設計: <img src="logo.jpg" width="50" height="50">
修正: <APPLET CODE="imagefader.class" ALT="campus photos" WIDTH="300" HEIGHT="225">

 

三、 規範 1.3: H101002 對於object提供替代文字說明
實例畫面參考 1. Flash動畫請在<OBJECT></OBJECT>標籤之間加入替代文字說明。
不良設計: <OBJECT>
<PARAM name="movie" value="images/stars.swf">
<PARAM name="quality" value="Best">
<PARAM name="wmode" value="transparent">
<EMBED src="images/stars.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj2" width="615" height="161" quality="Best" wmode="transparent">
</EMBED>
</OBJECT>
修正: <OBJECT>
<PARAM name="movie" value="images/stars.swf">
<PARAM name="quality" value="Best">
<PARAM name="wmode" value="transparent">
<EMBED src="images/stars.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj2" width="615" height="161" quality="Best" wmode="transparent">
</EMBED>
美工用動畫:星星飄落
</OBJECT>
(實例畫面參考:上方刊頭動畫)
實例畫面參考 2. Flash動畫做成的選單,則必須在Flash原始檔製作過程中加註無障礙標籤。例如:按鈕加註名稱(Name)、快速鍵(AccessKey)、定位鍵索引(TabIndex)
不良設計: <OBJECT>
<PARAM name="movie" value="menu.swf">
<PARAM name="quality" value="high">
<EMBED src="menu.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="817" height="96">
</EMBED>
</OBJECT>
修正:

<OBJECT>
<PARAM name="movie" value="menu.swf">
<PARAM name="quality" value="high">
<EMBED src="menu.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="817" height="96">
</EMBED>
主選單替代方案連結:<a href="index/history/01main.asp" class="link01">認識彰化</a>|<a href="index/team/01main.asp" class="link01">縣政府團隊</a>|<a href="index/intro/01main.asp" class="link01">榮耀軌跡</a>|<a href="index/bulletion/01main.asp" class="link01">訊息特區</a>|<a href="index/law/01main.asp" class="link01">法令規章</a>|<a href="index/convenient/02main.asp" class="link01">便民服務</a>|<a href="index/faq/01main.asp" class="link01">FAQ</a>|<a href="index/links/01main.asp" class="link01">各項連結</a>
</OBJECT>

 

四、 規範 1.4: H101003 對於表單中的圖形按鍵提供替代文字說明
實例畫面參考 1. 表單中的圖形按鍵設定alt屬性提供替代文字說明。
不良設計: <input id="全文檢索" type="text" value="請輸入關鍵字" maxlength="30" name="key_search" size="10">
<input type="image" name="submit" border="0" src="images/go.gif" width="24" height="20">
修正: <input id="全文檢索" type="text" value=" 請輸入關鍵字" maxlength="30" name="key_search" size="10">
<input type="image" name="submit" border="0" src="images/go.gif" width="24" height="20" alt="開始搜尋全文檢索">
(實例畫面參考:關鍵字搜尋)

 

五、 規範 1.5: H101004 影像地圖區域需要加上替代文字說明
實例畫面參考 1. 除了影像地圖的alt替代文字說明外,也要對於每個連結區域AREA標籤提供替代文字說明。
不良設計: <img src="/travels/images/photo-n/N_map1.jpg" alt="國父紀念館週邊地圖" width="592" height="391" border="0" usemap="#NMap1">
<map name="NMap1">
<area shape="circle" coords="182,61,15" href="/travels/north-sight1_1.php#v1" target="_top">
<area shape="rect" coords="195,119,211,140" href="/travels/north-sight1_1.php#v2" target="_top">
<area shape="rect" coords="163,109,194,125" href="/travels/north-read1.php" target="_top">
// ....
<area shape="rect" coords="209,125,222,172" href="/travels/north-sight1_1.php#v4" target="_top">
</map>
修正:

<img src="/travels/images/photo-n/N_map1.jpg" alt="國父紀念館週邊地圖" width="592" height="391" border="0" usemap="#NMap1">
<map name="NMap1">
<area shape="circle" coords="182,61,15" href="/travels/north-sight1_1.php#v1" target="_top" alt="台北偶戲館">
<area shape="rect" coords="195,119,211,140" href="/travels/north-sight1_1.php#v2" target="_top" alt="誠品信義店">
<area shape="rect" coords="163,109,194,125" href="/travels/north-read1.php" target="_top" alt="國父紀念館">
// ....
<area shape="rect" coords="209,125,222,172" href="/travels/north-sight1_1.php#v4" target="_top" alt="台北101">
</map>
(實例畫面參考:2天1夜建議行程地圖)

 

六、 (1)規範 1.7: H101106 當alt屬性的文字陳述大於150個英文字元時,考慮另外提供文字敘述
(2)規範 1.8:H101007 提供longdesc以外的描述性超連結,來描述longdesc的內容
(3)規範 1.9:H101008 圖形替代文字陳述不夠清晰時,提供更多的文字描述(如使用longdesc屬性)
實例畫面參考

實例畫面參考
1. 當圖形替代文字之描述,無法以簡潔清晰的述敘定義於ALT屬性中時,必須另外以Longdesc屬性提供詳細說明。但是若瀏覽器無法辨識longdesc 屬性時,則此設計無法提供所連結到網頁的資訊。因此可以提供longdesc 以外的描述性超連結,來描述longdesc 的內容(於圖片下方提供說明頁的文字連結),以提升網頁的可及性。
不良設計: <IMG src="i.gif" alt="無障礙標章設計徵求活動,萬元獎品等你來拿!活動日期8/26~9/15,行政院研考會主辦。" longdesc="logo.html">
修正:

<IMG src="i.gif" alt="無障礙標章設計徵求活動,萬元獎品等你來拿!活動日期8/26~9/15,行政院研考會主辦。" longesc="logo.html">
<A href="logo.html">活動詳細說明</A>

→在logo.html 網頁中提供詳細文字說明:
無障礙標章設計徵求活動,萬元獎品等你來拿!活動日期8/26~9/15,此活動由行政院研考會主辦。

 

七、 規範 2.1: H102100確保所有藉由顏色所傳達出來的訊息,在沒有顏色後仍然能夠傳達出來
實例畫面參考 1. 頁內容應確保該資訊在沒有顏色下,仍然能夠傳達出來。
不良設計:

A立委B立委C立委D立委E立委F立委

上述的立委名單中,標示綠色為民進黨代表,藍色為國民黨代表色,橘色為親民黨代表,土黃色為台聯黨代表。

修正:

A立委B立委C立委D立委E立委F立委

上述的立委名單中,綠色的立委A及立委B為民進黨代表;藍色的立委C及立委D為國民黨代表;橘色的立委E為親民黨代表;土黃色的立委F為台聯黨代表

 

八、 規範 4.1: H104200 明確地指出網頁內容中語言的轉換
實例畫面參考 1. 在轉換的語言文字前,以<span lang> tag來進行標明。
不良設計:

<P>「法國人樂觀知命,常掛在嘴上的一句話是C'est la Vie」</P>

修正:

<P>「法國人樂觀知命,常掛在嘴上的一句話是<SPAN lang="fr">C'est la Vie</SPAN>」</P>

 

九、 (1)規範 5.1: H105100 對於每一個存放資料的表格(不是用來排版),標示出行和列的標題
(2)規範 5.2:H105101 表格中超過二行/列以上的標題,須以結構化的標記確認彼此間的結構與關係
實例畫面參考

實例畫面參考
1. 標題列請以 <th> tag 取代 <td> tag。
2. 使用scope屬性來為表格中的資料確定之間的結構與關係。
不良設計:

<TABLE border="1" summary="李小安國會議員每天約飲用10杯加糖的摩卡咖啡,吳大義國會議員每天約飲用5杯不加糖的拿鐵咖啡">
<CAPTION> 李小安、吳大義國會議員每天所飲用的咖啡數量 </CAPTION>
<TR>
<TD>議員姓名</TD>
<TD>飲用咖啡數量(杯)</TD>
<TD>咖啡種類</TD>
<TD>是否加糖?</TD>
</TR>
<TR>
<TD>李小安</TD>
<TD>10</TD>
<TD>摩卡</TD>
<TD>是</TD>
</TR>
<TR>
<TD>吳大義</TD>
<TD>5</TD>
<TD>拿鐵</TD>
<TD>否</TD>
</TR>
</TABLE>

修正:

<TABLE border="1" summary="李小安國會議員每天約飲用10杯加糖的摩卡咖啡,吳大義國會議員每天約飲用5杯不加糖的拿鐵咖啡">
<CAPTION> 李小安、吳大義國會議員每天所飲用的咖啡數量 </CAPTION>
<TR>
<TH>議員姓名</TH>
<TH>飲用咖啡數量(杯)</TH>
<TH>咖啡種類</TH>
<TH>是否加糖?</TH>
</TR>
<TR>
<TD>李小安</TD>
<TD>10</TD>
<TD>摩卡</TD>
<TD>是</TD>
</TR>
<TR>
<TD>吳大義</TD>
<TD>5</TD>
<TD>拿鐵</TD>
<TD>否</TD>
</TR>
</TABLE>

 

十、 規範 5.5: H305004 表格須提供表格摘要說明(如summary屬性)
實例畫面參考 1. 在TABLE標籤中使用summary屬性提供表格摘要說明;排版用表格可以 summary="*"來表示。
不良設計:

<TABLE border="1">
<CAPTION> 台灣主要城市氣溫與紫外線強度 </CAPTION> <TR>
<TH>主要城市</TH>
<TH>氣溫溫度</TH>
<TH>紫外線強度</TH>
</TR>
<TR>
<TD>台北</TD>
<TD>35度</TD>
<TD>普通</TD>
</TR>
<!--表格內容略-->
</TABLE>

修正:

<TABLE border="1" summary="此表格是王小強與李大明的旅行開支表,表格分為 五直欄,第一直欄標示兩人的消費日期,第二三四五直欄則依序為該日期的餐飲 費、住宿費、交通費以及小計,而在最後一橫列有總計資料。">
<CAPTION> 台灣主要城市氣溫與紫外線強度 </CAPTION> <TR>
<TH>主要城市</TH>
<TH>氣溫溫度</TH>
<TH>紫外線強度</TH>
</TR>
<TR>
<TD>台北</TD>
<TD>35度</TD>
<TD>普通</TD>
</TR>
<!--表格內容略-->
</TABLE>

範例資料陸續收集補充,敬請密切注意...

 

除上述等級A的規範外,為符合A+無障礙等級,我們尚需具備以下幾個條件:

  • 導盲磚(定位點)及快速鍵(Accesskey)的設置
  • 網站導覽(網站地圖)的製作
  • 確保網頁物件的使用,勿僅使用滑鼠操作
十一、 導盲磚及快速鍵的設置

1. 導盲磚是一種輔助性的引導設計,可提供使用者方便瀏覽網頁。

2.以三個連續冒號(:::)表示導盲磚,且必須搭配快速鍵使用。

3.若網頁以框架模式(frameset)組合,則每個框架也必須有導盲磚

網頁版面設計:

(1)
上:::
<a href="#" accesskey="U" title="上方選單區">:::上方</a>

左:::

<a href="#" accesskey="L" title="左方區塊">
:::左方
</a>

 

主內容:::

<a href="#" accesskey="C" title="主要內容區塊">
:::主要內容
</a>

 

(2)
上:::
<a href="#" accesskey="U" title="上方選單區">:::上方</a>

主內容:::
<a href="#" accesskey="C" title="主要內容區塊">
:::主要內容
</a>

 

右:::
<a href="#" accesskey="R" title="右方區塊">
:::右方
</a>

 

(3)
上:::
<a href="#" accesskey="U" title="上方選單區">:::上方</a>

左:::
<a href="#" accesskey="L" title="左方區塊">
:::左方
</a>

 

 

主內容:::
<a href="#" accesskey="C" title="主要內容區塊">
:::主要內容
</a>
右:::
<a href="#" accesskey="R" title="右方區塊">
:::右方
</a>

 

ex.以選單在上之排版方式為例,其程式寫作方式如下:

<table width="100%" summary="上方排版表格" border="0">
<tr>
<td><a href="#" accesskey="U" title="上方選單區">:::上方</a>
</td>
<td>.........</td>
</tr>
</table>

 

 

十二、 網站導覽(網站地圖)的製作

1. 請在選單列增加【網站導覽】之選項。

2.以文字方式敘述網站之架構及網頁導盲磚、快速鍵之設置。

 

(實例畫面參考)

 

 

十三、 規範 6.5:H206104 若網頁物件使用事件驅動時,確定勿僅使用滑鼠操作
實例畫面參考 滑鼠與鍵盤事件對照表:
滑鼠 鍵盤
OnMousedown OnKeydown
OnMouseup Onkeyup
Onclick OnKeypress
OnMouseover Onfocus
OnMouseout Onblur
不良設計:

<tr>
<td><a href="A.asp" target="_top" onClick="MM_nbGroup('down','navbar1','optn1','images/optn1_f3.gif',1);" onMouseOver="MM_nbGroup('over','optn1','images/optn1_f2.gif','images/optn1_f3.gif',1);" onMouseOut="MM_nbGroup('out');">
<img name="optn1" src="images/optn1.gif" width="63" height="31" border="0" alt="選項A"></a></td>
<td rowspan="2"><img name="chTKUtop_r6_c2" src="images/chTKU-top_r6_c2.gif" width="23" height="36" border="0" alt=""></td>
<td><a href="B.asp" target="_top" onClick="MM_nbGroup('down','navbar1','optn2','images/optn2_f3.gif',1);" onMouseOver="MM_nbGroup('over','optn2','images/optn2_f2.gif','images/optn2_f3.gif',1);" onMouseOut="MM_nbGroup('out');">
<img name="optn2" src="images/optn2.gif" width="56" height="31" border="0" alt="選項B"></a></td>

修正:

<tr>
<td><a href="A.asp" target="_top"
onClick="MM_nbGroup('down','navbar1','optn1','images/optn1_f3.gif',1);"
onKeyPress="MM_nbGroup('down','navbar1','optn1','images/optn1_f3.gif',1);"
onMouseOver="MM_nbGroup('over','optn1','images/optn1_f2.gif','images/optn1_f3.gif',1);"
onFocus="MM_nbGroup('over','optn1','images/optn1_f2.gif','images/optn1_f3.gif',1);"
onMouseOut="MM_nbGroup('out');" onBlur="MM_nbGroup('out');">
<img name="optn1" src="images/optn1.gif" width="63" height="31" border="0" alt="選項A"></a></td>
<td rowspan="2"><img name="chTKUtop_r6_c2" src="images/chTKU-top_r6_c2.gif" width="23" height="36" border="0" alt=""></td>
<td><a href="B.asp" target="_top"
onClick="MM_nbGroup('down','navbar1','optn2','images/optn2_f3.gif',1);"
onKeyPress="MM_nbGroup('down','navbar1','optn2','images/optn2_f3.gif',1);" onMouseOver="MM_nbGroup('over','optn2','images/optn2_f2.gif','images/optn2_f3.gif',1);"
onFocus="MM_nbGroup('over','optn2','images/optn2_f2.gif','images/optn2_f3.gif',1);" onMouseOut="MM_nbGroup('out');" onBlur="MM_nbGroup('out');">
<img name="optn2" src="images/optn2.gif" width="56" height="31" border="0" alt="選項B"></a></td>