無障礙網路空間/網站親和力


毛慶禎
輔仁大學圖書資訊學系副教授
http://www.lins.fju.edu.tw/mao/works/wai-intro.htm
2005/5

  1. 序言
  2. 必要性
  3. 推動策略
  4. 相關法律
  5. 身心障礙者使用網路的方式
  6. 全球資訊網聯盟規範
    1. 推薦 (Recommendations)
    2. 擬推薦 (Proposed Recommendations)
    3. 待推薦 (Proposed Edited Recommendations)
    4. 候選推薦 (Candidate Recommendations)
    5. 工作草案 (Working Drafts)
      1. 即將討論完成 (in last call)
      2. 討論中 (in development)
      3. 停止討論 (no longer in development)
      4. 小組筆記 (group notes)
  7. Section 508
  8. 檢測工具
  9. 無障礙網路空間服務網
    1. 14條規範
    2. 90條檢測要點
  10. 修正經驗 - 高雄市立圖書館
    1. 檢測結果
    2. 修正做法
  11. 結論與建議
  1. 參考書目
  2. 備註

1. 序言

無障礙係指網路空間的性質, 譯自Accessibility或Accessible, 有些人認為應該譯為「親和力」較為貼切。本文採用行政院研究發展考核委員會的譯文 - 無障礙。

全球資訊網的發明人提姆•柏納李(Tim Berners-Lee)指出, 全球資訊網的力量源自其無遠弗屆的本質, 不論身心障礙的程度, 任何人都可以接近使用網路空間; 因此, 全球資訊網聯盟成立無障礙網路空間促進會(WAI, 2005), 專職推動網路空間的無障礙性。

全球資訊網聯盟是一個中立的國際性非政府組織, 擁有300多個團體會員, 以推動全球資訊網的發展及互通為目標, 在香港、韓國等11個地區設有分部, 致力於四大領域: 架構、互動、科技與社會、無障礙網路空間(Brewer, J. 2003)。

2. 必要性

無障礙網路空間促進會撰寫多種文件(Brewer, J. 2003), 推廣無障礙網路空間的概念。分為三個層面:

網路空間製作成無障礙屬性, 已具有共通的必要性:

網路已是身心障礙者不可或缺的媒體之一:
身心障礙者對網路空的需求, 依其障礙類型的程度, 有幾種要求:
網際網路的發展需要 無障礙網路空間:
無障礙網路空間對於身心障礙以外的特定使用者一樣有利:

依一定的優先順序推廣無障礙網路空間, 其效果較佳:

很多國家及地區已制定無障礙網路空間相關的法令及政策(PRWA, 2005), 香港政府設有資訊科技總監辦公室, 協調相關的無障礙網路空間政策, 在1998年以來的「數碼21」資訊科技策略裡, 注意身心障礙人士的需求; 於「齊建數碼共融的社會」裡, 描述香港的數位隔閡現況, 並指出對應的措施; 製作「使用戶可更容易閱讀網頁資訊的小技巧」, 協助業者及讀者接近使用網路空間(數碼21, 2005)。

3. 推動策略

無障礙網路空間促進會以五個相輔相成的策略, 共同推動其工作(Brewer, J. 2003):

  1. 確定網路技術可支援無障礙性

    由通訊協定與格式工作小組(Protocols and Formats Working Group, PFWG)審核各項規格書(specifications), 確保其對無障礙網路空間的支援性。已有三份規格書進入工作草案(Working Draft)的階段。

  2. 發展無障礙性的相關指導原則, 已完成四個指導原則:

  3. 改善用來評估與修繕無障礙網路空間的工具, 還在發展階段:

  4. 製作教育與推廣的教材, 已有的成果如下:

  5. 協調研究發展的步調

無障礙網路空間不僅對身心障礙者有幫助, 在吵雜的環境下工作, 也需要聲音以外的提示訊息; 眼睛太忙的場合, 需要聲音提醒; 手機、PDA等小型行動裝置, 螢幕小、無鍵盤、無滑鼠, 也需要無障礙的設計。

2. 相關法律

1

3. 身心障礙者使用網路的方式

身心障礙者使用網路的方式, 明顯不同於一般的使用者, 應給予特別的關心。

無障礙網路空間是企業的商機。

有實際的範例, 說明無障礙網路空間的構成方法。並簡介Introductory、Guideline及Checkpoint的相關內容。

檢測的項目列在 WCAG裡, 它是W3C的推薦文件。

答客問以簡潔的方式, 解說不清楚的地方。

評估網站的無障礙性:

建立無障礙網路的資源:

製定無障礙網路空間的政策。

其他瀏覽器: Alternative Web browsing
Descriptions and links to over 35 different kinds browsers and assistive technologies for accessing information on the Web.

4. 全球資訊網聯盟規範

無障礙網路空間促進會(Web Accessibility Initiative, WAI)由全球資訊網聯盟(World Wide Web Concertium, W3C)設立, 主要的贊助者為:

全球資訊網聯盟的技術報告及出版品有五個層次; 取得共識後, 由下而上, 逐步提昇其地位, 祗有達到最上層的推薦技術報告及出版品才推薦給使用者, 其他層級的技術報告及出版品祗供參與者內部討論之用, 使用者可自行參考, 但變動的機會甚大。

3.1 推薦

全球資訊網聯盟推薦的技術報告及出版品, 其性質類似其他組織公告的標準, 經過廣泛的徵詢過程, 得到全球資訊網聯盟會員及總監提姆伯納-李的認 可, 全球資訊網聯盟建議社會大眾可以全面使用這些建議。

推薦的文件裡, 有三份文件與無障礙網路空間有關:

  1. 使用者代理人近用性規範 1.0 版(User Agent Accessibility Guidelines 1.0), 2002年12月17日推薦, Ian Jacobs, Jon Gunderson, Eric Hansen 編輯
  2. 編輯工具近用性規範 1.0 版(Authoring Tool Accessibility Guidelines 1.0), 2000年2月3日推薦, Jutta Treviranus, Ian Jacobs, Charles McCathieNevile, Jan Richards 編輯
  3. 網頁內容近用性規範 1.0 版(Web Content Accessibility Guidelines 1.0), 1999年5月5日推薦, Wendy Chisholm, Gregg Vanderheiden, Ian Jacobs 編輯, 非官方中文部份譯本

3.2 擬推薦

全球資訊網聯盟擬推薦的技術報告及出版品, 經過技術穩定性及應用層面的廣泛檢視, 本身是成熟的文件, 已送往全球資訊網聯盟的諮詢委員會, 等待最後的認可。

3.3 待推薦

全球資訊網聯盟把待推薦的技術報告及出版品, 寄送給社群, 要求成員評閱, 訂有截止日期, 若能取得共識, 就提昇為擬推薦等級。

3.4 候選推薦

全球資訊網聯盟候選推薦的技術報告及出版品, 已經被工作小組評閱, 並取得共識, 公開在這個階段, 希望取得實務應用的經驗。

3.5 工作草稿

全球資訊網聯盟進入工作草稿的技術報告及出版品, 寄送給全球資訊網聯盟的會員、社會大眾、其他技術組織, 請求評閱; 這些文件祗是草稿, 很可能被其他文件更新、取代或作廢, 不可以做為參考文件。分為三個等級:

3.5.1 即將討論完成

即將討論完成的工作草稿裡, 有一份文件與無障礙網路空間有關:

  1. 編輯工具近用性規範 2.0 版(Authoring Tool Accessibility Guidelines 2.0), 2004年11月22日, Jutta Treviranus, Matt May, Charles McCathieNevile, Jan Richards 編輯, 2005年元月7日停止討論。

3.5.2 討論中

討論中的工作草稿裡, 有十份文件與無障礙網路空間有關:

  1. 編輯工具近用性規範 2.0 版應用技術 (Implementation Techniques for Authoring Tool Accessibility Guidelines 2.0), 2004年11月22日, Matt May, Jutta Treviranus, Jan Richards 編輯
  2. 網頁內容近用性規範 2.0 版 (Web Content Accessibility Guidelines 2.0), 2004年11月19日, Jason White, Ben Caldwell, Gregg Vanderheiden, Wendy Chisholm, Wendy Chisholm, Gregg Vanderheiden, Jason White, Ben Caldwell 編輯
  3. 網頁內容近用性規範 2.0 版階層樣式表 (CSS Techniques for WCAG 2.0), 2004年11月19日, Wendy Chisholm, Becky Gibson 編輯
  4. 網頁內容近用性規範 2.0 版通用技術 (General Techniques for WCAG 2.0), 2004年11月19日, Tom Croucher, John Slatin 編輯
  5. 網頁內容近用性規範 2.0 版超文件標示語言技術 (HTML Techniques for WCAG 2.0)2004年11月19日, Michael Cooper, Wendy Chisholm, Wendy Chisholm, Michael Cooper 編輯
  6. 網頁內容近用性規範 2.0 版客戶端描述指令技術 (Client-side Scripting Techniques for WCAG 2.0), 2004年11月19日, Matt May 編輯
  7. 網頁內容近用性規範 2.0 版檢查及技術需求 (Requirements for WCAG 2.0 Checklists and Techniques), 2003年2月7日, Michael Cooper 編輯
  8. 可擴充標示語言近用規範 (XML Accessibility Guidelines), 2002年10月3日, Charles McCathieNevile, Daniel Dardailler, Sean B. Palmer 編輯
  9. 網頁內容近用性規範 2.0 版需求 (Requirements for WCAG 2.0), 2002年4月26日, Gregg Vanderheiden, Wendy Chisholm 編輯
  10. 編輯工具近用性規範 "Wombat" (Authoring Tool Accessibility Guidelines "Wombat"), 2001年12月21日, Jan Richards, Jutta Treviranus, Charles McCathieNevile 編輯
  11. 近用評估及修復工具技術 (Techniques For Accessibility Evaluation And Repair Tools), 2000年4月26日, Chris Ridpath, Wendy Chisholm 編輯

3.5.3 停止討論

不再列為工作項目之一, 或已融入其他文件的工作草案, 都會移入停止討論的工作草案, 留在此處的文件, 僅做為記錄之用, 並陳述其停止討論的緣由。

3.5.4 小組筆記

另外還有小組筆記(Group Notes), 由全球資訊網聯盟內的小組出版, 表示對特定主題的階段性工作已告結束, 它與工作草稿的關係密切, 但沒有必然的隸屬關係。

小組筆記裡, 有五份文件與無障礙網路空間有關:

  1. 使用者代理人近用性規範 1.0 版技術 (Techniques for User Agent Accessibility Guidelines 1.0), 2002年12月17日, Ian Jacobs, Eric Hansen, Jon Gunderson 編輯
  2. 編輯工具近用性規範 1.0 版技術 (Techniques for Authoring Tool Accessibility Guidelines 1.0), 2002年10月29日, Jutta Treviranus, Gregory Rosmaita, Charles McCathieNevile, Jan Richards 編輯
  3. 網頁內容近用性規範 1.0 版核心技術 (Core Techniques for Web Content Accessibility Guidelines 1.0, 2000年11月6日, Wendy Chisholm, Ian Jacobs, Gregg Vanderheiden 編輯
  4. 網頁內容近用性規範 2.0 版階層樣式表技術 (CSS Techniques for Web Content Accessibility Guidelines 1.0), 2000年11月6日, Ian Jacobs, Wendy Chisholm, Gregg Vanderheiden 編輯
  5. 網頁內容近用性規範 2.0 版的超文件標示語言技術 (HTML Techniques for Web Content Accessibility Guidelines 1.0), 2000年11月6日, Ian Jacobs, Wendy Chisholm, Gregg Vanderheiden 編輯
  6. 網頁內容近用性規範 2.0 版技術 (Techniques for Web Content Accessibility Guidelines 1.0), 2000年11月6日, Wendy Chisholm, Ian Jacobs, Gregg Vanderheiden 編輯
有三份中文翻譯文件, 為官方認可:

7. Section 508

"Accessibility for Everybody: Understanding the Section 508
Accessibility Requirements"
Reviewed by Bill Raschen
Written by John Paul Mueller


As regular FreePint readers will be aware, 'Section 508' refers to the
section of the U.S. Rehabilitation Act of 1973 that was amended in
1998 to include a set of standards for accessible electronic and
information technology. In this context, accessibility is defined as
the art of making IT applications easy to use. In particular this is
designed to benefit users with special needs (for example, those with
physical disabilities).

<http://www.access-board.gov/sec508/guide/index.htm>

The Section 508 regulations affect not just web-based applications,
but IT applications in general. The regulations are complex: although
primarily for a U.S. audience, they could also have implications for
foreign businesses and contractors that intend to do business within
the United States.

In this context, John Paul Mueller's excellent guide to Section 508
provides a weighty (528 pages, 2.8 pounds on the bathroom scales)
overview of the main issues created by the legislation. Although
primarily targeted at developers, the book, in the words of the
author, was written 'with the idea that anyone could read it anywhere
and still get something from it'. Despite its bulk, 'Accessibility for
Everybody' is very readable, and there is a benign, late '60s tone
throughout (borne out by the photo of Mr Mueller on the back cover).

After an initial discussion of the law itself, the book describes the
hardware issues that developers will need to know about in order to
develop accessible applications. These are accompanied by guidelines
on how to create such applications, as well as details of a range of
tools to aid accessible development (such as a colour blindness
simulator). Mueller also provides a detailed description of Microsoft
accessibility features, describing them as 'the best-kept secret of
Windows', and showing how they may be used to test the performance of
one's applications.

It is not until the second half of the book that web applications are
specifically discussed, with a range of tips on how to design and test
accessible sites. These chapters provide quite a detailed description
of 'usage cues', ranging from simplistic tagging mechanisms (use of the
'alt' tag, for example) through to more complex guidance on the use of
style sheets in developing accessible sites.

As well as appendices detailing useful sources of information for
further advice, there is a handy checklist printed on the book's inner
covers: 'John's top 20 tips for creating accessible applications'. Tip
7 points out that 'fun is a three-letter word that all developers
should include in their vocabulary'. It is a tribute to the author
that he practices what he preaches: although weighty, 'Accessibility
for Everyone' is an informative and surprisingly entertaining account
of the main issues relating to Section 508.

5. 檢測工具

無障礙網路空間很容易製作, 先從九個基本應用著手(WAIQuickTips, 2001):
  1. 影像及動畫。使用alt來說明每一個視像的功用。
  2. 影像地圖。使用對方本土所用的地圖及文字來說明當地熱點。
  3. 多媒體。提供音效文件的標題及謄本和影像文件的內容。
  4. 超連結。使用具意義的文字來連結。避免使用"按此處"。
  5. 版面設計。使用標題、清單及一致的結構。在許可情況下,使用CSS來表現排列及形態的模式。
  6. 圖像及圖表。總結內容或以詳細資料來說明其屬性。
  7. Scripts, Applets及Plug-in。若其中的動態特點不獲支援,應提供其他內容予以選擇。
  8. 表框。不要使用表框及以有意思的題目來表達。
  9. 表單。使每一行得以被明確地閱讀及具總結性。
再以WCAG的工具、清單及指引來驗證。

6. 無障礙網路空間服務網 - 行政院研究考會

行政院研究發展考核委員會針對網站管理者以及設計者的需要, 於2002年六月辦理「無障礙網頁開發標準暨標章核發作業」, 根據全球資訊網聯盟屬 下無障礙網路空間促進會的無障礙網頁內容標準的相關規範, 並參考各國在制訂無障礙網頁相關政策和推廣策略, 以及身心障礙者保護政策的相關措施, 訂定「無障礙網頁開發規範」, 以建立具體的無障礙網路推廣目標與策略。

無障礙網頁開發規範的內容, 將90條檢測要點分為14條規範。

6.1 十四條規範( http://enable.nat.gov.tw/doc1.jsp)

    * 規範一:對於聽覺及視覺的內容要提供相等的替代文字內容
    * 規範二:不要單獨靠色彩來提供特殊資訊
    * 規範三:適當地使用標記語言和樣式表單
    * 規範四:闡明自然語言的使用
    * 規範五:建立編排良好的表格
    * 規範六:確保網頁能在新科技下良好地呈現
    * 規範七:確保使用者能處理時間敏感內容的改變
    * 規範八:確保嵌入式使用者介面具有直接可及性
    * 規範九:設計裝置獨立網頁
    * 規範十:使用過渡的解決方案
    * 規範十一:使用國際與國內官方訂定的技術和規範
    * 規範十二:提供內容導引資訊
    * 規範十三:提供清楚的瀏覽網站機制
    * 規範十四:確保簡單清楚的網頁內容

每條規範包括數量不一的檢測要點, 總共有九十條檢測要點(http://enable.nat.gov.tw/doc2.jsp), 依影響程度, 分為三個等級。

機器檢測
 
二、檢測說明:
 
在九十個標準檢測碼中,關於第四位數字是檢測碼的檢測狀態,檢測狀態代表本檢測碼是否能夠歸納出其檢測項目可以由機器辨識或機器檢測的規則。若是其檢測項 目可以明確導出由機器辨識其在網頁原始碼的正確位置的規則,我們稱此檢測碼為機器可辨識 (Machine Identifiable) ;若是其檢測項目可以明確導出由機器 檢測其在網頁原始碼的內容是否符合可及性設計的規則,我們稱此檢測碼為機器可檢測 (Machine Checkable) 。一個檢測碼要先能夠辨識其檢測項目可套在網頁原始碼的正確位置,才能進一步檢測其在網頁原始碼的內容是否符合可及性設計。因此標準檢測碼 的檢測狀態可以定義為以下三種:
0 :機器辨識 / 機器檢測 (Machine Identify/Machine Check)
1 :機器辨識 / 人工檢測 (Machine Identify/Human Check)
2 :人工辨識 / 人工檢測 (Human Identify/Human Check)

參考「無障礙網頁開發規範」、「無障礙網路空間規劃與設計」及國內外無障礙網頁設計相關資訊,編訂「無障礙網頁設計技術手冊」,針對每一個無障礙網頁檢測 要點,解釋如何實際執行,並提供編寫 HTML 程式的範例。 

7. 修正經驗 - 高雄市立圖書館

本研究接受高雄市立圖書館的委託, 修正該館網站(http://www.ksml.edu.tw/) 的內容, 使符合行政院研究發展考核委員會製定的無障礙網頁開發規範。

為了簡化工作內容, 網站外的網頁, 包括高雄市社教資訊網(http://social.ksml.edu.tw/), 都不列入此次的檢測計畫。

檢測等級包含第一、第二及第三優先等級 (AAA) 。需進行人工檢測之檢測碼, 其屬性應為網頁製作建議事項, 應由高雄市立圖書館給予專業指導, 才能取得相關資訊; 而且, 難有完全客觀之研判標準, 亦無法由行政院研究發展考核委員會以外之單位加以認定, 故需進行人工檢測之檢測碼均不予處理。

九十條檢測碼裡, 祗有25條屬於機器檢測的範圍, 被除外的65條人工檢測碼, 分別隸屬於十四條規範, 列舉如下:

  1. 規範一:對於聽覺及視覺的內容要提供相等的替代文字內容
    1.6 : H101105 當影像地圖使用為上傳按鈕時,每一作用區域必須分別使用不同的按鈕
    1.7 : H101106 當 alt 屬性的文字陳述大於 150 個英文字元時,考慮另外提供文字敘述
    1.9 : H101108 圖形替代文字陳述不夠清晰時,提供更多的文字描述 ( 如使用 longdesc 屬性 )
    1.10 : H101109 所有語音檔案必須有文字旁白
    1.11 : H101210 以可及性的影像來替代 ASCII 文字藝術
    1.12 : H101111 視訊中的聲音必須提供同步文字型態的旁白
    1.13 : H101112 伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結
    1.14 : H101213 多媒體視覺影像呈現時,必須提供聽覺說明
    1.15 : H101214 多媒體呈現時,必須同步產生相對應替代的語音或文字說明
  2. 規範二:不要單獨靠色彩來提供特殊資訊
    2.1 : H102100 確保所有藉由顏色所傳達出來的訊息,在沒有顏色後仍然能夠傳達出來
    2.2 : H202101 確保前景顏色與背景顏色彼此呈現明顯的對比
  3. 規範三:適當地使用標記語言和樣式表單
    3.1 : H203200 以實際存在的標記語言 ( 如 MathML) 呈現網頁內容 ( 如數學方程式 ) ,避免使用圖形影像呈現
    3.4 : H203203 盡可能使用樣式表單控制網頁排版與內容的呈現
    3.7 : H203106 避免使用 header 標籤來產生粗體字效果
    3.8 : H203107 項目符號及編號之標籤 ( 如 li 、 ul) 僅可使用於實際網頁內容的項目條列,不可用於編輯格式
    3.9 : H203108 確保 q 和 blockquote 標籤只是用來當引用語而不是用來縮排
    3.10 : H203209 以 q 及 blockquote 標籤來標記引用語
  4. 規範四:闡明自然語言的使用
    4.1 : H104200 明確地指出網頁內容中語言的轉換
    4.2 : H304201 用 abbr 及 avronym 標籤表示網頁中呈現的文字縮寫與簡稱
  5. 規範五:建立編排良好的表格
    5.1 : H105100 對於每一個存放資料的表格(不是用來排版),標示出行和列的標題
    5.2 : H105101 表格中超過二行 / 列以上的標題,須以結構化的標記確認彼此間的結構與關係
    5.3 : H205102 在網頁內容呈現設計時,避免以表格做多欄文字的設計
    5.4 : H205103 若表格只做為版面配置時,勿使用表格之結構標記 ( 如 th 標籤 ) 作為網頁格式視覺效果
    5.6 : H305105 資料表格須提供標題說明
    5.7 : H305106 表格行列過長的標題,須提供縮寫或簡稱
  6. 規範六:確保網頁能在新科技下良好地呈現
    6.1 : H106100 使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀
    6.3 : H106102 使用 Script 語言需指定不支援 Script 時的辦法
    6.4 : H106103 若網頁內的程式物件沒有作用時,確保網頁內容仍然可以傳達
    6.5 : H206104 若網頁物件使用事件驅動時,確定勿僅使用滑鼠操作
  7. 規範七:確保使用者能處理時間敏感內容的改變
    7.1 : H107200 確保網頁設計不會致使螢幕快速閃爍
    7.4 : H207103 避免使用動態 gif 圖片
  8. 規範八:確保嵌入式使用者介面具有直接可及性
    8.1 : H208100 對由 Scripts 、 Applets 及 Objects 所產生之資訊,提供可及性替代方式
  9. 規範九:設計裝置獨立網頁
    9.2 : H209201 對所有網頁內容元素,確保有滑鼠以外的操作介面
    9.4 : H309103 具體指出按下 Tab 鍵在表單控制項,超連結及物件間移動的順序
    9.5 : H309204 對經常使用的超連結,增加快速鍵的操作
    9.6 : H309105 對於表單元件考慮提供鍵盤快速鍵的操作
  10. 規範十:使用過渡的解決方案
    10.1 : H210100 除非使用者知道將會開啟一個新視窗,不要隨便開啟一個新視窗
    10.2 : H210101 如果使用 Script 語言開啟新視窗或改變目前視窗的網址,要讓使用者能事先知道
    10.3 : H210102 確保表單的控制項與控制項說明之間的配合很適當
    10.4 : H310103 若有以表格直欄格式呈現的網頁文字內容時,提供線性文字替代
  11. 規範十一:使用國際與國內官方訂定的技術和規範
    11.1 : H111200 如果你不能使這個網頁無障礙化,提供另一個相等的無障礙網頁
    11.2 : H211201 儘量使用開放性的最新國際標準規範
    11.3 : H211202 避免使用過時的 HTML 語法
    11.4 : H311203 允許使用者依照個人喜好設定網頁呈現方式與內容
  12. 規範十二:提供內容導引資訊
    12.2 : H212101 如果頁框名稱無法描述頁框中的內容的話,應加上額外敘述
    12.3 : H212102 把太長的選單項目群組起來
    12.4 : H212103 在表單控制項中,使用 fieldset 及 legend 標籤作群組間的區隔
    12.5 : H212204 儘可能將網頁內容有相關之元素聚集在一起
    12.6 : H212105 在表單控制項上,以 label 標籤提示資訊
  13. 規範十三:提供清楚的瀏覽網站機制
    13.1 : H213200 設計並確保有意義的超連結說明,便於網頁內容的閱讀
    13.2 : H213101 如果需要的話,為每個超連結加上內容描述
    13.3 : H213202 指向不同網址的超連結,不可使用相同的超連結說明
    13.4 : H213203 使用 metadata 標籤來記載電腦可以了解運用的網頁資訊
    13.6 : H213205 為你的網站提供網站地圖或整體性的簡介
    13.7 : H213206 網頁設計使用清楚且一致的導覽機制
    13.8 : H313207 提供網頁導覽連結工具列,以利存取網站導覽結構
    13.9 : H313208 能辨別出意義上有群組相關的超連結
    13.10 : H313209 若有群組超連結,在群組之前增設一項繞過此區域的超連結
    13.11 : H313210 若網站具有搜尋功能,可以設計不同的網頁內容搜尋方式,以提供不同技能與喜好者搜尋選用
    13.12 : H313211 在網頁標題、段落、及列表之前,提供辨別訊息以利識別
    13.13 : H313212 以 metadata 標籤來識別網頁文件包含於整體文件內的所在位置
    13.14 : H313213 避免在網頁上使用 ACSII 文字藝術
  14. 規範十四:確保簡單清楚的網頁內容
    14.1 : H114200 網頁內容要使用簡單易懂的文字
    14.2 : H314201 使用可及性的圖形促進網頁內容的理解
    14.3 : H314202 網頁彼此間設計呈現的風格要一致

7.1 檢測結果

高雄市立圖書館於2005年4月1日交付其網站內容的光碟, 依照行政院研究發展考核委員會的工具, 總共檢測1,474個網頁, 全部沒有通過各等級的檢測, 發現47,023個錯誤, 歸類為16種障礙。分述如下: 

  1. 「1.1:H101000 : 圖片需要加上替代文字說明」, 在1,222個網頁裡有障礙, 共有3,461個錯誤。
  2. 「1.16:H301015 : 客戶端影像地圖中的超連結必須在網頁中有額外對應的可及性超連結」在9個網頁裡有障礙, 共有35個錯誤。
  3. 「1.3:H101002 : 對於object 提供替代文字說明」, 在7個網頁裡有障礙, 共有7個錯誤。
  4. 「1.5:H101004 : 影像地圖區域需要加上替代文字說明」, 在62個網頁裡有障礙, 共有106個錯誤。
  5. 「3.3:H203002 : 在doctype標籤中,使用標準規範的敘述以識別HTML版本類型」, 在 1,390個網頁裡有障礙, 共有1,390個錯誤。
  6. 「3.5:H203004 : 要使用相對尺寸(如%)而非絕對尺寸(如像素)」, 在1,373個網頁裡有障礙, 共有37,074個錯 誤。
  7. 「4.3:H304002 : 明確指出網頁文字所使用的自然語言」, 在1,468個網頁裡有障礙, 共有1,468個錯誤。
  8. 「5.5:H305004 : 表格須提供表格摘要說明(如summary屬性)」, 在626個網頁裡有障礙, 共有1,993 個錯誤。
  9. 「6.2:H106001 : 頁框連結必須是HTML檔案」, 在1個網頁裡有障礙, 共有1個錯誤。
  10. 「7.2:H207001 : 避免使用blink 標籤閃爍螢幕」, 在74個網頁裡有障礙, 共有113個錯誤。
  11. 「7.3:H207002 : 避免使用marquee 標籤移動文字」, 在955個網頁裡有障礙, 共有963 個錯誤。
  12. 「9.3:H209002 : 確保事件的啟發不要求一定得使用滑鼠」, 在13個網頁裡有障礙, 共有124個錯誤。
  13. 「10.5:H310004 : 在網頁文字輸入區中須有預設值」, 在3個網頁裡有障礙, 共有10個錯誤。
  14. 「10.6:H310005 : 勿單以空白間隔分開相連之超連結」, 在30個網頁裡有障礙, 共有83個錯誤。
  15. 「12.1:H112000 : 需要定義每個頁框的名稱」, 在27個網頁裡有障礙, 共有79個錯誤。
  16. 「13.5:H213004 : 為你的網頁加上標題」, 在116個網頁裡有障礙, 共有116個錯誤。

其中未發現障礙的九條檢測碼為:

  1. 1.2 H101001 - 對於 applet 提供替代文字說明
  2. 1.4 H101003 - 對於表單中的圖形按鍵提供替代文字說明
  3. 1.8 H101007 - 提供 LONGDESC 以外的描述性超連結 (如使用以D為提示的超連結),來描述 LONGDESC 的內容
  4. 3.2 H203001 - 確定網頁設計文件,有效使用正規的 HTML 語法
  5. 3.6 H203005 - 適當使用巢狀標題呈現文件結構
  6. 6.6 H206005 - 使用頁框時要指定不支援頁框時的辦法
  7. 7.5 H207004 - 不要讓網頁每隔一段時間自動更新
  8. 7.6 H207005 - 不要自動轉移網頁的網址
  9. 9.1 H109000 - 盡量使用客戶端影像地圖替代伺服器端影像地圖連結

7.2 修正做法

用到UltraEdit、PSPad、ConTEXT等編輯軟體, 以及Perl開放源碼軟體。

7.2a. 1.1:H101000 : 圖片需要加上替代文字說明

至於實際的名稱, 則請高雄市立圖書館同仁決定。
 
7.2b. 1.16:H301015 : 客戶端影像地圖中的超連結必須在網頁中有額外對應的可及性超連結

修正前:

<MAP name="Map">
<AREA shape="rect" coords="10,8,158,86" href="http://www.yahoo.com.tw" alt=Yahoo!奇摩網 ">
<AREA shape="rect" coords="161,8,309,86" href="http://www.pchome.com.tw" alt="PChome">
<AREA shape="rect" coords="311,8,460,86" href="http://www.yam.com.tw" alt="蕃薯藤"> </MAP>

修正為:

<MAP name="Map1">
<AREA shape="rect" coords="10,8,158,86" href="http://www.yahoo.com.tw" alt="Yahoo!奇摩網">
<AREA shape="rect" coords="161,8,309,86" href="http://www.pchome.com.tw" alt="PChome">
<AREA shape="rect" coords="311,8,460,86" href="http://www.yam.com.tw" alt="蕃薯藤"> </MAP>
<P>
【 <A href=" http://www.yahoo.com.tw ">Yahoo!奇摩網 </A>】
【 <A href="http://www.pchome.com.tw"> PChome </A>】
【 <A href="http://www.yam.com.tw">蕃薯藤 </A>】
</P> 

7.2c. 1.3:H101002 : 對於object提供替代文字說明

至於實際的名稱, 則請高雄市立圖書館同仁決定。

7.2d 1.5:H101004 : 影像地圖區域需要加上替代文字說明

至於實際的名稱, 則請高雄市立圖書館同仁決定。

7.2e 3.3:H203002 : 在doctype 標籤中,使用標準規範的敘述以識別HTML 版本類型

程式碼部份:

use strict;
use warnings;
use File::Find;

my $dir = $ARGV[0]; provide path on command line
$dir = defined($dir) ? $dir : '.'; if not provided, use current

chdir($dir);
 
my @dirs = ();
find sub { push(@dirs, $File::Find::name) if -d }, $dir;
my $i=0;
 
while ($i<@dirs){
chdir($dirs[$i]);
 
foreach my $file (<*.html *.htm>) {
print " 處理的檔案 : " , "$dirs[$i]" , "/", "$file\n";
open (IN, "+<$file");
my @files = <IN>;
seek IN,0,0;
if ($files[0] =~ m/<!DOCTYPE HTML/gi){
}
 
else{
$file = "<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>\n@files";
print IN $file;
}
close IN;
}
$i++;
}

將以上程式碼儲存為doc.pl。

7.2f 3.5:H203004 : 要使用相對尺寸(如%)而非絕對尺寸(如像素)

就寬度的部份 :
就高度的部份

7.2g 4.3:H304002 : 明確指出網頁文字所使用的自然語言

程式碼部份:

use strict;
use warnings;
use File::Find;

my $dir = $ARGV[0]; 參數列
$dir = defined($dir) ? $dir : '.'; 如果參數列的目錄不存在 , 就用現在的
#opendir(D,$dir); 打開目錄
chdir($dir);
 
my @dirs = ();
find sub { push(@dirs, $File::Find::name) if -d }, $dir;
my $i=0;
 
my $find= "<html>";
my $replace = "<html lang=zh-TW>";
 
while ($i<@dirs){
chdir($dirs[$i]);
 
foreach my $file (<*.html *.htm>) {
#print " 處理的檔案 : " , "$dirs[$i]" , "/", "$file\n";

open (IN, "+<$file");
 
my @file = <IN>;
 
seek IN,0,0;
 
foreach my $files (@file){
$files =~ s/$find/$replace/gi;
print IN $files;
}
close IN;
}
 
$i++;
}

將以上程式碼儲存為lang.pl

7.2h 5.5:H305004 : 表格須提供表格摘要說明 (如summary屬性)

至於實際的名稱, 請高雄市立圖書館同仁決定

7.2i「6.2:H106001 : 頁框連結必須是HTML檔案」, 在1個網頁裡有障礙, 共有1個錯誤。

7.2l 7.2:H207001 : 避免使用blink 標籤閃爍螢幕

程式碼部份為:

use strict;
use warnings;
use File::Find;
 
my $dir = $ARGV[0]; provide path on command line
$dir = defined($dir) ? $dir : '.'; if not provided, use current
#opendir(D,$dir); open directory
chdir($dir);
 
my @dirs = ();
find sub { push(@dirs, $File::Find::name) if -d }, $dir;
my $i=0;
 
my $find= "<blink>";
my $find2= "</blink>";
my $replace = " ";
my $replace2 = " ";
 
while ($i<@dirs){
chdir($dirs[$i]);
 
foreach my $file (<*.html *.htm>) {
#print " 處理的檔案 : " , "$dirs[$i]" , "/", "$file\n";
 
open (IN, "+<$file");
 
my @file = <IN>;
 
seek IN,0,0;
 
foreach my $files (@file){
$files =~ s/$find/$replace/gi;
$files =~ s/$find2/$replace2/gi;
print IN $files;

}
close IN;
}
 
$i++;
}

將以上程式碼儲存為blink.pl。

7.2k 7.3:H207002 : 避免使用marquee 標籤移動文字

程式碼部份為:

use strict;
use warnings;
use File::Find;
 
my $dir = $ARGV[0]; 參數列
$dir = defined($dir) ? $dir : '.'; 如果參數列的目錄不存在 , 就用現在的
#opendir(D,$dir); 打開目錄
chdir($dir);
 
my @dirs = ();
find sub { push(@dirs, $File::Find::name) if -d }, $dir;
my $i=0;
 
my $find= "<marquee.*?>";
my $find2= "</marquee>";
my $replace = " ";
my $replace2 = " ";
 
while ($i<@dirs){
chdir($dirs[$i]);
 
foreach my $file (<*.html *.htm>) {
#print " 處理的檔案 : " , "$dirs[$i]" , "/", "$file\n";
 
open (IN, "+<$file");
 
my @file = <IN>;
 
seek IN,0,0;
 
foreach my $files (@file){
$files =~ s/$find/$replace/gi;
$files =~ s/$find2/$replace2/gi;
print IN $files;

}
close IN;
}
 
$i++;
}

將以上程式碼儲存為mar.pl。

7.2l 9.3:H209002 : 確保事件的啟發不要求一定得使用滑鼠

舉例說明:
 
<a href="cmenu/love/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(' 活動成果 ','','image/right/righto_r1_c1.gif',1)" >
 
<a href="cmenu/love/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(' 活動成果 ','','image/right/righto_r1_c1.gif',1)" 【 onFocus="MM_swapImage('活動成果 ','','image/right/righto_r1_c1.gif',1)" onBlur="MM_swapImgRestore()"】>

【】為新增的部份

7.2m 10.5:H310004 : 在網頁文字輸入區中須有預設值

實際的預設值, 請高雄市立圖書館同仁決定

7.2n 10.6:H310005 : 勿單以空白間隔分開相連之超連結

7.2o 12.1:H112000 : 需要定義每個頁框的名稱

實際的名稱 , 請高雄市立圖書館同仁決定

7.2p 13.5:H213004 : 為你的網頁加上標題
(1) 利用編輯軟體 (UltraEdit,PSPad,ConTEXT) 的打開檔案
(2) 在 <head>及 </head>標籤之間加入” <title>網頁標題 </title>”

實際的標題, 請高雄市立圖書館同仁決定

8. 結論與建議



------>
開放檔案格式

把資訊編入檔案的格式, 稱為檔案格式, 每種檔案類型有其特殊的檔案格式, 首先指明其為二進位檔或純文字檔, 接著描述資訊的組織方法。

    *  Usability 可用性
    * Accessibility 易及性 / 親和力
    * Recyclibility 重用性
    * Sustainability 永續性

Nielson’s Usability Slogans
  1. 猜測是不夠的
  2. 使用者永遠是對的
  3. 使用者不是永遠對的
  4. 使用者不是設計師
  5. 設計師不是使用者
  6. 主管不是使用者
  7. 少即是多
  8. 細節大有關係
  9. 不要依靠說明文件
  10. 使用性工程是一個過程
網路資源的評鑑 / 葉慶玲, http://www.lins.fju.edu.tw/lins/teacheryeh/chap19.ppt
<------

參考資源

備註

  1. Web Accessibility Initiative (WAI) [無障礙網路空間促進會], http://www.w3.org/WAI/
  2. W3C Technical Reports and Publications [全球資訊網聯盟技術報告及出版品], http://www.w3.org/TR/
    1. Online Overview of the Web Accessibility Initiative, by Judy Brewer and EOWG Participants [Web accessibility 先 導計劃概論], http://www.w3.org/Talks/WAI-Intro/Overview.html
  3. 網路無障礙與網頁親和力, http://wiki.planetoid.info/index.php/Accessibility
  4. 政府網站的無障礙空間--- 行政院部會網站可及性( Accessibility )評估 / 黃朝盟, 2001/10/20, http://www.aboutweb.org/file/acc1.pdf
  5. 真正的無遠弗屆 ── 談網頁內容的親和力, http://jedi.org/blog/archives/004569.html
  6. 無障礙網路空間服務網, http://enable.nat.gov.tw/index.jsp
    1. 下載專區, http://enable.nat.gov.tw/download.jsp
    2. 相關連結, http://enable.nat.gov.tw/link.jsp
    3. 研究著作, http://enable.nat.gov.tw/publish.jsp
  7. 檢測規範
    1. 研考會
    2. Web Content Accessibility Guidelines 1.0, http://www.w3.org/TR/WCAG10/
    3. Section 508 : the Road to accessibility, http://www.section508.gov/
  8. 認證單位
    1. 研考會
    2. Bobby, 檢測WCAG1.0及Section 508, http://bobby.watchfire.com/bobby/html/en/index.jsp

  9. Dive Into Accessibility [在 30 天內打造更具親和力的網站], 林克寰譯, 網路設計第一步 http://dia.z6i.org/table_of_contents.html
  10. 資訊架構 -
    1. Rosenfeld, L., & Morville, P., (2002).  Information Architecture for the World Wide Web: Designing Large-Scale Web Sites.  Sebastopol, CA: O'Reilly.
      陳建勳譯, (2003).  資訊架構學-網站應用. 台北: 學貫行銷
  11. 網站親和力服務公司
    1. Tools and Resources for Accessible Web Design, Compiled by John Slatin, Jim Allan, Rev. Dec, 2002, http://www.tsbvi.edu/technology/tools.htm
    2. Adaptive path: user experience consulting, events, and reports [以使用者導向建構資訊], http://www.adaptivepath.com/
    3. Starling Access Services, http://www.starlingweb.com/index.htm
    4. 網頁設計與制作, http://fjt.now.net.cn:7751/www.windstudio.net/index3.htm
  12. 網路無障礙與網頁親和力, 對2003年研考會的意見, http://jedi.org/blog/archives/002537.html
  13. Curriculum for Web Content Accessibility Guidelines 1.0, http://www.w3.org/WAI/wcag-curric/; WAI 無障礙全球資訊網建置準則教學課程, http://www2.csj.ks.edu.tw/~tch023/accessibility/index.html