1 / 19

無障礙網頁設計規範 與檢測碼介紹 （規範八至十四、檢測碼 以及三個優先等級說明）

無障礙網頁設計規範 與檢測碼介紹 （規範八至十四、檢測碼 以及三個優先等級說明）. 講師：王亘宇 台北大學 AboutWeb 網路發展小組. 行政院研究發展考核委員會. 十四條規範. 規範八：確保嵌入式使用者介面具有直接可及性 Guideline 8. Ensure direct accessibility of embedded user interfaces. 當一個網頁內的嵌入式物件擁有它的自有的介面時，這介面 必須是具有可及性的設計 ( 下一張舉例說明 ). 貳、無障礙網頁開發規範. 規範八. 舉例：網頁上 Flash 動畫的設計.

mary
Download Presentation

無障礙網頁設計規範 與檢測碼介紹 （規範八至十四、檢測碼 以及三個優先等級說明）

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 無障礙網頁設計規範與檢測碼介紹（規範八至十四、檢測碼以及三個優先等級說明）無障礙網頁設計規範與檢測碼介紹（規範八至十四、檢測碼以及三個優先等級說明） 講師：王亘宇 台北大學AboutWeb網路發展小組 行政院研究發展考核委員會

  2. 十四條規範 • 規範八：確保嵌入式使用者介面具有直接可及性 Guideline 8. Ensure direct accessibility of embedded user interfaces. • 當一個網頁內的嵌入式物件擁有它的自有的介面時，這介面必須是具有可及性的設計 (下一張舉例說明)

  3. 貳、無障礙網頁開發規範 規範八 舉例：網頁上Flash動畫的設計 • 內政部網站開場頁在一般瀏覽器（IE5）所呈現的情形(2003.04)

  4. 貳、無障礙網頁開發規範 規範八 舉例：在純文字瀏覽器下所呈現的資訊 Flash動畫須考慮其可及性，尤其是包含重要資訊或連結時。 • 內政部網站開場頁在Lynx模擬預視系統所呈現的情形(2003.04)

  5. 十四條規範 • 規範九：設計裝置獨立網頁 Guideline 9. Design for device-independence. • 網頁使用者可以使用他們慣用的輸入（或輸出）裝置—如視窗導盲鼠、鍵盤、聲音輸入、頭杖、或者其他輸入裝置─來和其使用的瀏覽器互動 (不受限於某一種設備或是系統)

  6. 十四條規範 • 規範十：使用過渡的解決方案 Guideline 10. Use interim solutions. • 網頁語言有新技術出現時，可能因為目前瀏覽器的功能還不完備，無法充分提供可及性考量時，應該額外設計和提供可及性的解決方案 例如：10.5:H310004 在網頁文字輸入區中須有預設值 （下一張舉例說明）

  7. 規範十 正確示範 提示文字讓使用者知道該輸入何種資訊 姓名：工作經歷： 不良設計 在文字輸入區中未預設文字提示 姓名：工作經歷： 舉例： 10.5:H310004 在網頁文字輸入區中須有預設值

  8. 十四條規範 • 規範十一：使用國際與國內官方訂定的技術和規範 Guideline 11. Use W3C technologies and guidelines. • 儘量使用廣泛被採用的國際與國內官方訂定的技術和規範，避免使用單一廠商開發的特殊網頁技術 例如：11.3:H211202 避免使用過時的HTML語法 （下一張舉例說明）

  9. 規範十一 • 手機品牌銷售排行榜 • 三星 • 夏普 • 明碁 舉例： 11.3:H211202 避免使用過時的HTML語法 正確示範 使用HTML4.0中仍提供的UL標籤來達到相同目錄清單的效果 <P>手機品牌銷售排行榜</P> <UL> <LI>三星</LI> <LI>夏普</LI> <LI>明碁</LI> </UL> 不良設計 使用過時的DIR標籤，來達到目錄清單的效果 <P>手機品牌銷售排行榜</P> <DIR> <LI>三星</LI> <LI>夏普</LI> <LI>明碁</LI> </DIR>

  10. 十四條規範 • 規範十二：提供內容導引資訊 Guideline 12. Provide context and orientation information. • 網頁在處理內容導引資訊之時，應提供上下文和定向資訊來幫助使用者了解複雜的網頁架構或相關元件 。例如： • 使用路徑連結 • 首頁 > 第二層 > 第三層 > 網頁主題 • 採用簡明一致的標題 • 標示Access Keys • <a accesskey= “C” href=“” >

  11. 十四條規範 • 規範十三：提供清楚的瀏覽網站機制 Guideline 13. Provide clear navigation mechanisms. • 規劃各種引導資訊、瀏覽棒、網站地圖等等，以提供清楚和一致的瀏覽機制 (ex:consistent navigation bar, sitemap, accesskey……) 例如：13.1:H213200 設計並確保有意義的超連結說明，便 於網頁內容的閱讀 13.3:H213202 指向不同網址的超連結，不可使用相 同的超連結說明 （下一張舉例說明）

  12. 規範十三 舉例： 13.1:H213200 設計並確保有意義的超連結說 明，便於網頁內容的閱讀 不良設計 今天心血來潮，決定帶著新買的數位相機出去試拍，第一站就是來到將是世界最高的摩天大樓台北101大樓，試拍了好幾張。決定提供最美的兩張相片讓網友下載，請按這裡。 正確示範 今天心血來潮，決定帶著新買的數位相機出去試拍，第一站就是來到世界最高的摩天大樓台北101大樓，試拍了好幾張。決定提供最美的兩張相片讓網友下載，請按連結下載101大樓的兩張照片(ZIP檔)。

  13. 規範十三 舉例： 13.3:H213202 指向不同網址的超連結，不可使 用相同的超連結說明 指向不同網址的超連結不可以使用相同的超連結說明，如果需要使用相同的超連結標籤，可以在A標籤中使用title屬性來區別彼此之間的不同。

  14. 規範十三 不良設計 首頁>行政院>行政院研考會>最新消息 最新消息 教育訓練課程由行政院研考會主辦，詳細情形請回首頁查詢 舉例： 13.3:H213202 指向不同網址的超連結，不可使 用相同的超連結說明 第一個首頁 < A href= "http://www.ey.gov.tw/web/index-ey2000.htm"> 首頁</A> 第二個首頁 < A href= "http://www.rdec.gov.tw/home/">首頁</A>

  15. 規範十三 舉例： 13.3:H213202 指向不同網址的超連結，不可使 用相同的超連結說明 正確示範 首頁>行政院>行政院研考會>最新消息 最新消息 教育訓練課程由行政院研考會主辦，詳細情形請回首頁查詢 第一個首頁 < A href="http://www.ey.gov.tw/web/index-ey2000.htm"title="回行政院全球資訊網首頁" >首頁</A> 第二個首頁 < A href="http://www.rdec.gov.tw/home/"title="回行政院研考會首頁">首頁</A>

  16. 十四條規範 • 規範十四：確保簡單清楚的網頁內容 Guideline 14. Ensure that documents are clear and simple. • 應該採用一致性的網頁版面、可明瞭辨識的圖表、和容易瞭解的語言和用詞

  17. 同一規範的流水號 (第五、六位數碼, 00/01/02~) 檢測狀態(第四位數碼, 0/1/2) 十四條規範(第二、三位數碼, 01~14) 優先等級(第一位數碼, 1/2/3) 網頁語言 (H:HTML/ X:XML) 檢測碼編號(1.1, 1.2, 1.3…..) 二、檢測碼介紹 (1/3) • 檢測碼格式 1.1:H101000 圖片需要加上替代文字說明

  18. 二、檢測碼介紹 (2/3) • 三個優先等級 【第一優先等級】 • 網頁內容開發者在開發網頁時必須遵循這個等級的檢測碼。否則，某些使用者或團體將會發現不能使用網頁上的資訊。滿足此等級檢測碼對一些使用網頁文件的團體來說，是一種基本的需求。 【第二優先等級】 • 網頁內容開發者在開發網頁時應該滿足這個等級的檢測碼。否則，某些使用者或團體將會發現有困難來使用此網頁的資訊。滿足此等級的檢測碼將可移除網頁的重要障礙。 【第三優先等級】 • 網頁內容開發者在開發網頁時可以納入這個等級檢測碼的要求。否則，某些使用者或團體將會發現可能有困難來使用此網頁的資訊。滿足此等級的檢測碼，將可改善網頁文件的可及性。

  19. 可由機器檢測 需做人工檢測 二、檢測碼介紹 (3/3) • 檢測狀態 表示檢測碼目前是由機器/人工辨識與機器/人工檢測的規則狀態。 可分以下三種： 0：機器辨識/機器檢測 1：機器辨識/人工檢測 2：人工辨識/人工檢測 機器檢測 • 由機器辨識出檢測項目在網頁原始碼的明確位置，並且可以由機器檢測是否符合可及性設計。 人工檢測 • 由機器辨識或是人工辨識檢測項目在網頁原始碼的位置，但是必須靠人工檢測是否符合可及性設計。

More Related