第25章规划无障碍网页.PPT

第25章 規劃無障礙網頁 25-1 規劃無障礙網頁 25-1-1什麼是無障礙網頁 無障礙網頁的觀念是由W3C協會所提出的，之後世界各國政府都積極投入研發推廣無障礙網頁的相關技術，當然台灣也不例外，行政院研考會在91年6月發佈了「無障礙網頁開發標準暨標章核發作業」規範，主要是參考W3C協會WAI組織的無障礙網頁內容標準相關規範，並參考其他國家無障礙網頁方面的規範，所訂定出的一套無障礙網路推廣目標與策略。 25-1-2無障礙網頁開發規範 「無障礙網頁開發規範」可以到行政院研考會的「無障礙網路空間服務網」觀看，網站上提供了最新的「97年無障礙網路空間推廣訓練課程教材」可下載，您也可以在網站上測試您的網站是否符合無障礙網頁的規範，符合的話還可以取得如下圖的無障礙網站標章(下圖標章等級為2A等級)。 25-2 無障礙網頁開發十四條規範 規範一：對於聽覺及視覺的內容要提供相等的替代文字內容 這裡所指的內容包括圖片、圖表、動畫、音樂等等，我們可以在這些元件語法裡加上替代文字說明，例如回上頁按鈕，可以加上「回上頁」的替代文字；譬如中秋節花燈圖片，可以加上「中秋節花燈圖片」的替代文字，如果只是插圖，也可以加上「這是本網頁的插圖」。 img src=images/pic3.jpg border=0 alt=這是本網頁的插圖 替代文字 25-2 無障礙網頁開發十四條規範 規範二：不要單獨靠色彩來提供特殊資訊 通常我們都習慣用鮮艷的顏色來標示重要的資訊，但是這對於顏色辨識能力有障礙的人來說，就算有閱讀的輔助機器幫助也無法感受到訊息的重要性，如此一來就達不到無障礙空間所要求的「可及性」，所以您可以除了以顏色標示之外，最好可以加上文字說明。再來就是網頁文字顏色與背景顏色應該呈現明顯的對比，使用者可以輕鬆的閱讀網頁。 25-2 無障礙網頁開發十四條規範 規範三：適當地使用標記語言和樣式表單 HTML標記有結構標記（structural markup）與呈現標記（presentation markup）兩種，兩者意義完全不同。例如表格、表單、標題、段落等都是結構標記；字體顏色、粗體字、斜體字等是屬於呈現標記，設計網頁時應在適當位置使用適當的標記，例如h1、h2這類的標記是屬於標題標記，如果拿來讓內文產生大字的效果，就是不適當的用法，如下所示。 h3問君能有幾多愁，恰似一江春水向東流。/h3 25-2 無障礙網頁開發十四條規範 規範四：闡明自然語言的使用 自然語言是指中文、英文、日文或韓文等語言。網頁設計者應該在文件裡標示自然語言使用的變化，以方便語音合成器和點字輸出機來處理，以自動地將其轉換成新的語言，讓不同語言的使用者能順利讀取這份文件，例如，使用meta標記宣告網頁語言： meta http-equiv=Content-Type content=text/html; charset=big5 25-2 無障礙網頁開發十四條規範 規範五：建立編排良好的表格 表格的行、列、和儲存格都有特別的標記，許多人在網頁排版時，會使用過多的表格來呈現排版功能，這種方式對於使用輔助工具的視障人士來說，網頁內容可能會被切割得很亂，以致於輔助工具無法讀取資訊。 25-2 無障礙網頁開發十四條規範 規範六：確保網頁能在新科技下良好地呈現 當瀏覽器不支援某項新功能時，要確保使用者仍然能正確閱讀網頁資訊。例如，當使用者瀏覽器不支援內置框架時，可以用圖片或文字說明，如下所示 iframe name=main src=ch11_01_a.htm width=380 height=280 scrolling=no frameborder=0您的瀏覽器不支援內置框架喔!!/iframe 25-2 無障礙網頁開發十四條規範 規範七：確保使用者能處理時間敏感內容的改變 網頁可能用自動捲動的文字或閃爍的文字來吸引使用者注意，但這對於有認知障礙、神經疾病人士在閱讀移動的文字或閃爍的文字時會造成注意力不集中或者感覺不舒服，網頁使用動態效果時，應酌量適當使用。 25-2 無障礙網頁開發十四條規範 規範八：確保嵌入式使用者介面具有直接可及性 當網頁裡有嵌入其他元件時，必須考慮到如果該元件無法使用時，是否還能有其他替代方案可以讓使用者輕鬆自如的使用。舉例來說許多網站會全部以Flash製作，這時應另外設置一般的HTML網頁，讓無法使用Flash的使用者仍然可以進入HTML網頁瀏覽，尤其是有重要資訊的網頁。 25-2 無障礙網頁開發十四條規範 規範九：設計裝置獨立網頁 設計裝置獨立網頁是指網頁使用者可以使用他們習慣的輸入裝置，例如滑鼠、鍵盤、聲音輸入、頭杖或者其他輸入裝置來操作網頁。 25-2 無障礙網頁開發十四條規範 規範十：使用過渡的解決方案 當瀏覽器有新