無障礙網頁製作心得與經驗分享：XOOPS程式應用與FreeGO檢測實務指南

無障礙網頁製作心得與經驗分享

台北市南湖國小黃秀山

在政府大力推行無障礙網頁的同時，台北市教育局也發出公文要求各級學校網站在今年底完成A＋認證。三月時研習中心正好開設無障礙網頁的研習，就硬頭皮上去學習，還好之前有摸過XOOPS，所以架設起來還算容易，就這樣按部就班的練習下，完成了無障礙3A認證。在此特別感謝陳怡杰老師提供的無障礙版XOOPS程式與研習中心四天的研習課程，並感謝北市中山國中曾志忠老師與市網討論區網友的疑問解答，才能順利完成3A標章的申請。

若只要通過無障礙A＋，只要網站上的五個項目「導盲磚設計」、「學校簡介」、「行政單位」、「最新消息」、「網站導覽」，通過檢測即可。利用陳老師的XOOPS程式安裝完成後，基本上已經符合A＋的要求了，接下來就是系管人員如何去美化與擴充，以下茲將整個製作心得與小技巧與大家分享，希望大家也能順利取得認證。

1. 系統環境

本學校無障礙網頁(PHP)與舊網頁(ASP)共存於一台主機，相互不影響，因為我在win2000 server獨立安裝PHP4 與MySQL 程式，所以伺服器可以同時跑ASP與PHP程式而且共用80 PORT，安裝方式起參考小弟寫的IIS6 + php4.42 + MySql4.0.16 + mysql-connector-odbc-3.51.12獨立安裝
http://phpbb-tw.net/phpbb/viewtopic.php?t=43194
所有安裝程式與參考文件均已在此網址：
http://w3.nhps.tp.edu.tw/cptech/upload/IIS6+php4.42+MySql4.0.16+mysql-connector-odbc-3.51.12.rar

PS：上述安裝說明在win2000也適用，但phpmyadmin照win2003的設定會進不去，所以就沒有改phpmyadmin下的config.default.php設定，安裝完成後再移除phpmyadmin資料夾即可。

當然，你也可以用APPSERV架站包建立PHP的環境，再把IIS的80 PORT 改變。
修正陳老師的說法：新網站必須放在www.XXXX.tp.edu.tw的根目錄下，這個是錯誤的，你可在申請時，填寫http://www.XXXX.tp.edu.tw/enable，enable的虛擬目錄隨你訂，甚至移到另外一台機器都可以。

2. XOOPS程式

利用陳怡杰老師提供的XOOPS無障礙版本，再來就是對XOOPS的熟悉，至少簡易安裝、區塊、群組、自由選單(Multi-Mune)、新聞與Tinyd模組的設定與使用必須熟悉，就可輕易就可拿到A+。如果都沒碰過也不用緊張，上山跟著研習，或是拿本書照著做，也都可以輕易安裝成功。

三、FreeGO的檢測方式

無障礙檢測工具FreeGO在檢測時，只會檢查同一台伺服器內的網頁，網頁中的超連結與同目錄下的所有網頁都會一併檢測，例如FreeGO檢測輸入http://www.nhps.tp.edu.tw/enable
程式就會檢測enable底下所有網頁的超連結。若你的XOOPS的網頁中有http://www.nhps.tp.edu.tw/ac1的超連結，機器也會一併檢測ac1底下的所有網頁是否符合無障礙規範。也就是說，除了www.nhps.tp.edu.tw以外的網址，FreeGO才不會去檢測。

四、無障礙網頁與舊的網頁主機共存的小技巧
上述第三點說到，FreeGo會檢測該台主機內的所有網頁，讓舊網頁不被檢測的方式有兩種：
方法一：
若要排除同一台伺服器內的某個網頁資料夾，可在Freego中設定排除的資料夾，程式就不會去掃那個資料夾內的網頁。

方法二：
利用ASP response.redirect 語法（我學校就是用這招）
在XOOPS裡面有個連結「舊版網頁」，若你的XOOPS裡面的超連結網址打上http://www.nhps.tp.edu.tw
那就完蛋了，www網站目錄下的所有網頁都會檢測，而且鐵定不會過。
我的作法是將「舊版網頁」的超連結連到
http://w3.nhps.tp.edu.tw/jump/舊版網頁.asp
再到w3這台伺服器的jump目錄下，寫一個「舊版網頁.asp」，
裡面的程式碼就這一行
<% response.redirect "http://www.nhps.tp.edu.tw" %>

簡單說，就是要騙Freego，讓它認為舊版網頁在w3，就不會去檢測。但訪客在點選「舊版網頁」，先跳到w3，再跳回www主機，動作時間不會超過0.5秒。

五、人工檢測重點

在Freego機器檢測全部過關後，就可「申請標張登錄」接下來就等他們的檢測人員做人工檢測。登錄完畢，你網站的資料就會列在http://enable.nat.gov.tw/emblem/emblem_list.jsp
若檢測人員有在上述網址的「最近檢測日期」填上日期，代表你的網站90％以上會通過。若通過人工檢測，他們一定會列出一些缺失，記得要去做「修正回覆紀錄」，才算是真正的通過檢測！

若從你的無障礙標章連過去，貴單位的檢測資料不見了，就是申請資料被刪除，請到你無障礙註冊時填的電子郵件信箱去檢查是否有一封「您好，您申請標章之登錄資料已刪除」信件，再根據他的刪除原因作修改，改完再重新聲請標章時，在備註欄位填上修正說明，大致上就會通過。

像本校就被刪除了四次，搞了一個月還沒通過，很生氣的打電話去問（0800-632999），
原因是刪除信件沒有送到我的信箱，於是就請他們重寄一份，修正後再申請就過了！

以下列出幾個檢測重點，在申請前請自行人工檢測，否則容易直接被刪除：
A+等級：
1.全網站網頁字體大小需能隨瀏覽器之字型設定變更而進行調整。
-->請將瀏覽器字形設到最大，在去觀看每個網頁自行是否有改變，未符合本項，會直接被刪除
備註：若發現xoops裡面有些字形就是不會改變大小，就要修正xoops下的themesenable_green(設定模版)內的style.css
將有font-size: xx pt的內容改成百分比如font-size: 90%即可
此外，若你的網頁程式碼中，關於表格、字形大小千萬不能用絕對大小，如width=”500” height=”800” font size=”5”……..要改成百分比顯示，否則機器檢測一定過不了。修正方式如下

width=”500”→ width=”80%”

font size=”5”→ font size=”+3”

2.「網站導覽(SITE MAP)連結」建議設置在鍵盤移動３個游標內就能到達的位置。
-->將首頁「網站導覽」連結往前移，按下ALT+U，再按TAP三下以內可到達「網站導覽」連結即可

3.位置圖請提供文字詳細描述：行車路線、交通狀況等。位置圖。
-->要提供文字說明，不要只放圖

4.平面圖及樓層配置圖請提供文字詳細描述內容。
-->要提供文字說明，不要只放圖

5.建議網站導覽頁面，每個導覽項目連結前的數字層級符號亦併入連結內，便利使用者了解連結間的層級關係。
-->把前面的符號加入超連結即可

6.視訊檔案、音樂檔請提供同步文字型態旁白。
-->請在音樂檔的旁邊加一個內部連結，連到旁白或歌詞的文字說明，
可參考http://www.nhps.tp.edu.tw/enable/modules/tinyd2/index.php?id=4

3A等級：
7.網頁設計請使用相對尺寸(如%)讓使用者可依照個人需求調整文字大小(改變檢視字型)或瀏覽視窗解析度而非絕對尺寸(如像素)來固定表格及文字的大小。
-->利用Freego檢測，即可查出，再去修改程式碼

8.最新公告文件檔案下載，文件檔案下載請提供二種以上型態
-->若是ASP程式，請務必有兩個檔案上傳欄位，一個上傳doc、xls、ppt...，另外一個用pdf

9.群組超連結請增設一項可繞過此區域的超連結設計
-->請參考http://www.nhps.tp.edu.tw/enable/modules/tinyd2/index.php?id=7
按下ALT+C，按TAP在超連接間移動，到達「→」後，滑鼠移到上面會有提示「按Enter鍵可繞過此選單到主要內容區域，按Tab鍵可繼續瀏覽」，
按下ENTER，會跳過這些超連結，再按Tap會繼續往一個超連結移動。
（3A一定檢測，若有問題請看裡面範例http://w3.nhps.tp.edu.tw/cptech/view.asp?ID=275）
其實就是利用內部連結的方式。

10.網頁標題、網址應隨著網頁內容不同而更改，將更容易閱讀
-->xoops沒這問題，若是框架網頁，會出現此問題，他們的答覆是：
敬啟者您好
您在網頁上使用Frame，在規範中雖然沒有規定不能使用，
但使用Frame本身即存在網頁標題無法隨換頁改變的問題，
建議您可以採用排版表格的方式，分割網頁架構。

11.網站內部份單元多以連結它網，請留意其無障礙之程度。
-->無障礙網頁要過關，「導盲專設計」、「學校簡介」、「行政單位」、「最新消息」、「網站導覽」一定要通過檢測，其他非無障礙網頁，我都是用開啟新視窗的方式來處理。
我在回復修正時給他這樣寫：
本校網站連結的其他網站以教學為主，因人力有限，正逐步修改成無障礙網頁。
目前的作法是在左邊選單與網站導覽超連結註明（非無障礙網頁）。
-----------------------------------------------------------------------------------
強烈建議：留2、3、4、5點給他挑毛病，不然他挑你其他地方，你又無法修正，就麻煩了！

六、善用<iframe>內嵌網頁語法

很多的外部網頁可用<iframe>語法來嵌入區塊、tinyd中，但請注意，嵌入的網頁必須也要符合無障礙規範，雖然freego偵測不到，但在人工檢測時，仍會被挑毛病，請注意！
像我們學校的最新公告，就是嵌入ASP程式
http://www.nhps.tp.edu.tw/enable/modules/tinyd1/index.php?id=1

七、分享無障礙程式與模組

以下程式，我有稍加修改，可通過Freego 3A 檢測
版權為原作者所有：
1.無障礙smartpartner伙伴網站模組
http://w3.nhps.tp.edu.tw/cptech/view.asp?ID=272
安裝完成後，輸入新的伙伴網站時，在「全部內容」欄位，若不填任何資料，在首頁點選圖示時，就會自動開啟新視窗，若「全部內容」欄位填入資料，點選時，會先出現點選統計，再點選超連結才能連往他站。

2.無障礙162Flash小時鐘模組
http://w3.nhps.tp.edu.tw/cptech/view.asp?ID=273
安裝模組後，直接進入區塊設定即可

3.字典查詢區塊http://w3.nhps.tp.edu.tw/cptech/view.asp?ID=274
請自訂區塊後，加入附檔程式碼

4.李忠憲老師的javascript選單（無障礙版）
http://w3.nhps.tp.edu.tw/cptech/view.asp?ID=276
滑鼠移到上面會有提示開啟新視窗功能

5.無障礙語法與其他設計
http://w3.nhps.tp.edu.tw/cptech/view.asp?ID=275
含跳過群組超連結、表格、無障礙語法

6.Xoops 2.0.7.3無障礙網頁版
http://w3.nhps.tp.edu.tw/cptech/view.asp?ID=277
陳怡杰老師修改

八、後記

利用XOOPS架設學校網站的優缺點：

1. 優點：

1. 免費，可快速架站成功。

2. XOOPS的區塊可靈活自由運用。

3. 網站備份容易，可快速移植。

2. 缺點：

   1. 網站樣式雷同，不是很美觀。

   2. 架設在Windows上的XOOPS，多人瀏覽時容易掛點。

   3. PHP程式修改比較繁瑣，不適合初學者。

綜合上述優缺點，最後還是改採XOOPS，因為架設比較容易，而且需要大幅改些的地方不多，又可輕易通過無障礙A＋認證。茲將個人心得與大家分享，並且再次感謝所有幫助過我的人。之前都玩ASP程式，有任何問題大家可以一起討論，因為我也是php新手。

有空可以到無障礙申請窗口http://enable.nat.gov.tw/emblem/emblem_list.jsp
看看各單位被挑的毛病，你在製作的時候就可稍加注意，避免相同得錯誤！

南湖國小系管師兼資訊組長
黃秀山
[email protected]
26321296-28 or 82

附件：

無障礙常用語法(陳怡杰老師提供)

◎圖片

圖片一定要加上說明，定檢測！

<img src=”006.jpg” alt=”校門圖片”>

◎ 超連結與開啟新視窗

所有超連結最好都加上title，開新視窗一定要提示。

<a href="#" title="點選會開啟新視窗" target="_blank">連結內容</a>

<a href="#" title="點選會開啟EMail 軟體">E-Mail</a>

◎ Java Script

<noscript>

您的瀏覽器，不支援script語法，若您的瀏覽器無法支援，並不會影響到網頁的閱讀

</noscript>

◎表格：

<table summary="臺北市教師研習中心各組室電話傳真一覽表" width="50%" align="center" cellSpacing="0" bordercolorlight="#666666" bordercolordark="#FFFFFF" cellpadding="0">

<caption style="display:none">

臺北市教師研習中心各組室電話傳真一覽表

</caption>

<tr bgcolor="#CCCCFF">

<th id="header1" width="25%">A</th>

<th id="header2" width="25%">B</th>

<th id="header3" width="25%">C</th>

<th id="header4" width="25%">D</th>

</tr>

<tr bgcolor="#FFFFFF">

<td headers="header1">&nbsp;</td>

<td headers="header2">&nbsp;</td>

<td headers="header3">&nbsp;</td>

<td headers="header4">&nbsp;</td>

</tr>

</table>

◎ 字體加粗

<STRONG>重要訊息</STRONG>

不能用<B></B>

◎ 滑鼠替代事件

onMouseDown --> onKeyDown

onMouseUp --> onKeyUp

onClick --> onKeyPress

onMouseOver --> onFocus

onMouseOut --> onBlur

◎ label 標籤提示資訊

value

<LABEL for=”uid”>使用者名稱: </LABEL>

<input id=”uid”type="text" name="uname" size="12" value="請輸入帳號" maxlength="25" />

<LABEL for=”pwd”>密碼: </LABEL>

<input id=”pwd” type="password" name="pass" size="12" maxlength="32" />

◎ 自然語言

網頁第一行加上

<html lang="zh-tw">

◎ 內嵌網頁

<iframe src=”http://www.hinet.net” TITLE=”中華電信”width=”100%” height=”640” scrolling=”auto” frameborder=”no” marginwidth=”0” marginheight=”0” noresize>

</iframe>

◎ 導盲磚設計

<!-- 上方區域導盲磚-->

<a accesskey="T" href="accesskey.html" style="text-decoration:none; color:#FFFFFF" title="網站LOGO及上方功能連結區，點選連結至快速鍵說明">:::</a>

<!-- 左側選單區域導盲磚-->

<a accesskey="F" href="accesskey.html" style="text-decoration:none;color:#F6F6F6" title="功能項目選單，點選連結至快速鍵說明">:::</a>

<!-- 內容區域導盲磚-->

<a accesskey="C" href="accesskey.html" style="text-decoration:none;color:#FFFFFF" title="主要內容區，點選連結至快速鍵說明">:::</A>

<!–頁尾區域導盲磚-->

<a accesskey="B" href="accesskey.html" style="text-decoration:none;color:#FFFFFF" title="頁尾版權宣告區，點選連結至快速鍵說明">:::</A>