《无障碍网路空间》PPT课件.ppt

無障礙的認知,外在環境的安適網頁的瀏覽資訊的取得,身心障礙者瀏覽網頁的困難,在茫茫網海，找不到網頁。無法判讀與打字輸入不方便。英文接受能力。網頁字體太大或太小。輔具無法辨識圖表及顏色內容。,何謂無障礙網頁,無障礙網頁(WEB Content accessibility)不論身心是否有障礙，每個人都有權利存取網路資源。透過無障礙網頁的設計，使任何使用者都能更便利地使用網站，排除使用網頁時可能遇到的問題。網際網路發展之初，主要是分享不同電腦間的文字資料。隨著多媒體、超媒體的發展，許許多多的網頁技術不斷被開發出來，為了能吸引使用者的目光，網頁設計者大量的圖片、語音、動畫等充斥網頁，但卻未在同時考慮身心障礙者在使用這些資訊時所可能碰到的問題，因而造成今日的網際網路障礙重重。,何謂無障礙網頁,為了改善這個問題，許多世界性的組織，包括我國政府都開始注意到相關的問題，因此提倡網際網路無障礙的概念，希望提供一個平等參與的網路服務空間。,了解無障礙網頁,開發無障礙網頁並不困難基於W3C的HTML規範。是落實網頁設計的一種具體目標。講究平權國家的進步指標先進國家推動資訊社會的重要議題。無障礙網頁落實數位落差縮短無障礙網頁不一樣就是不一樣對廣大身心障礙者是不可或缺的。要欺瞞無障礙網頁檢驗器是很容易的，但是那樣不會讓您的網頁無障礙。,無障礙網頁檢測,行政院研考會無障礙網頁檢測,可以被辨識的網頁內容,圖片替代文字表格處理色彩處理顏色問題,圖片替代文字,螢幕朗讀軟體可以讀得到文字純文字瀏覽器能顯示這段文字Google 會為這段文字建立索引瀏覽器(例如IE，Netscape)則會用工具提示或者在狀態列顯示出來,圖片替代文字,有意義的替代文字條列式小圖示的alt可採用“*”無意義的裝飾性圖示以alt=“”標示應避免使用跳動的圖片，觀看者容易分心及造成眼睛的不適。且較容易剌激心臟病及氣喘等患者。,多媒體替代內容,影片、聲音視覺障礙者可以用聽的。對白/獨白、字幕聽覺障礙者可以讀取並了解內容。歌曲、歌詞聽覺障礙者可透過文字瞭解歌曲內容。,表格處理,為了讓視覺障礙者可理解表格資訊必須標明表格行和列的標題結構化的標記彼此的關係,表格處理,表格摘要說明使用 5.5：H305004 表格須提供表格摘要說明(如summary屬性)。範例說明,表格處理,表格標題使用 5.6：H305105 資料表格須提供標題說明。範例說明,表格處理,表格行列標題使用5.1:H105100 對於每一個存放資料的表格（不是用來排版），標示出行和列的標題。範例說明,表格處理,結構化表格：使用th 標籤中 scope 屬性欄：col、列：row複雜的表格：使用th 標籤中axis屬性、headers屬性及id屬性,表格處理,Table tag須使用summary屬性。視覺障礙者的網頁閱讀系統能夠讀取Summary資訊，可以事先得知表格內的資料種類，增加閱讀網頁的便利性。,色彩處理顏色問題,色彩處理重點前景和背景色澤若太接近，會混淆顯示內容。在瀏覽上，會比較吃力。,色彩處理顏色問題,避免使用顏色表示重點(在無顏色情況下，無法強調重點)可以底線表示重點(在無顏色情況下，仍可強調重點)或以顏色及加上斜體表示重點(在無顏色情況下，仍可強調重點),網頁標題,設定網頁標題用意為，讓使用者儲存我的最愛時，有清楚的網頁標題名稱。簡單的說明標題，內容避免籠統不清。國立臺南大學,游標順序,使用tabindex屬性設定TAB鍵在表單控制項的移動順序。使用者按下TAB鍵時，控制鍵的順序將會依照連結中tabindex的設定值大小決定移動順序。,開新視窗,由於視覺障礙者難以察覺正在瀏覽的網頁將轉換至其他頁面，及跳回原瀏覽網頁的困難，如開新視窗須告知使用者。若網頁中有需要開啟新視窗，建議讓使用者自行操作。target=“_blank”alt=“電算中心(另開視窗),我國無障礙網頁開發規範,十四條規範九十條相關的檢測要點分屬：第一優先第二優先第三優先又可區分為：機器辨識/機器檢測-可透過檢測工具辨識、檢測。機器辨識/人工檢測-可透過檢測工具辨識，但還需由人工的方式去檢測是否符合規範。人工辨識/人工檢測-完全需要人工的方式來辨識、檢測。,無障礙網頁十四條規範,規範一：對於聽覺及視覺的內容要提供相等的替代文字內容 規範二：不要單獨靠色彩來提供特殊資訊 規範三：適當地使用標記語言和樣式表單 規範四：闡明自然語言的使用 規範五：建立編排良好的表格,無障礙網頁十四條規範,規範六：確保網頁能在新科技下良好地呈現 規範七：確保使用者能處理時間敏感內容的改變 規範八：確保嵌入式使用者介面具有直接可及性 規範九：設計裝置獨立網頁 規範十：使用過渡的解決方案,無障礙網頁十四條規範,規範十一：使用國際與國內官方訂定的技術和規範 規範十二：提供內容導引資訊 規範十三：提供清楚的瀏覽網站機制 規範十四：確保簡單清楚的網頁內容,無障礙網頁規範第一條,規範一：對於聽覺及視覺的內容要提供相等的替代文字內容網頁開發者在網頁中遇到非文字的聽覺或視覺內容時，如果能同時提供同等內容的替代文字，將可使聽覺障礙或視覺障礙者能夠無礙地瀏覽和獲取這些資訊內容。視覺的內容包括圖像、圖表、動畫等，而聽覺的內容則包括音樂、語言和各種音訊。本規範所指的同等內容是指能描述視覺或聽覺內容的一段文字敘述。譬如一個連接到下一頁的向右箭頭的圖像，下一頁是適當的替代性文字；譬如一個煙火的動畫，有煙火聲效的煙火場景動畫，則是適當的替代視覺與聽覺的內容。語音合成器與點字顯示器等技術的成熟。網頁資訊可藉由這兩項技術，讓非文字內容得以讓視覺障礙者用聽的或觸摸的方式了解其資訊內容。,無障礙網頁規範第二條,規範二：不要單獨靠色彩來提供特殊資訊對許多人而言，顏色本身有它的內涵，譬如我們習慣用紅色來表示重要的資訊，但是在非彩色螢幕環境下或對顏色辨識能力有障礙的人而言，原本顏色所傳達的訊息可能會散失或受損，網頁內容的傳達將達不到可及性要求。譬如 當前景和背景在色澤上太接近時，有的人可能無法分辨；譬如不同物品的敘述用不同顏色來代表時，有的色盲者可能也無法分辨。,無障礙網頁規範第三條,規範三：適當地使用標記語言和樣式表單在一般的網頁標記語言中，標記有分作結構標記（structural markup）與呈現標記（presentation markup）兩種，兩者在內涵上意義完全不同，在呈現效果上也有不同。例如表格標籤、表單標籤、標題標籤、段落標籤等都是 結構標記；粗體字標籤、斜體字標籤、換行標籤、保留文字編排標籤等都是呈現標記。網頁設計者使用標記語言時，須嚴格遵守此標記的原本設計的目的，以避免身心障礙者在瀏覽網頁時所使用的特殊軟體解讀這些標記時產生誤解。例如非表格資訊使用表格標籤來產生呈現編排效果、如使用標題標籤來產生大字體的效果、如使用保留文字編排標籤來產生類似表格的編排呈現效果，都是一些常見的錯誤使用範例。,無障礙網頁規範第四條,規範四：闡明自然語言的使用 本條規範所指的自然語言是指中文、英文、日文或韓文等語言。網頁設計者應該在文件裡標示自然語言使用的變化，以方便語音合成器和點字輸出機來處理，以自動地將其轉換成新的語言，讓不同語言的使用者能順利讀取這份文件。網頁設計者也應該定義文件內容的主要自然語言；遇到縮寫和簡稱，應提供進一步的說明，以免造成語音合成機或點字輸出機的誤判解讀。而且這些自然語言的標記可以讓搜尋引擎藉由這些標記來精確找出具有關鍵字的相關文件。對學習障礙、認知障礙、或聽覺障礙者而言，自然語言標記也改進了網頁的可讀性。,無障礙網頁規範第五條,規範五：建立編排良好的表格表格是網頁資訊的一種特殊資料架構，其包括的行、列、和資料格都有特別的資訊涵義，因此瀏覽器在碰到網頁的表格標籤時，都提供可以適當呈現表格的相關功能。但是許多人在網頁開發時，表格呈現在各行和各列的整齊劃一特性讓許多人非常喜歡用來做網頁資訊的呈現排版功能。如此使用對於一般瀏覽器使用者而言，並不會造成任何問題，而且網頁呈現也整齊美觀。但是這種處理方式對於使用螢幕閱讀機或點字顯示器等各種特殊輸出裝置的視障人士而言，非表格結構的資訊以表格標籤來處理時，網頁內容會被切割成順序錯亂且無法理解的資訊。因此網頁開發者應該避免使用表格標籤做單純排版功能。在使用表格來呈現資訊時，應該確實設計表格應有結構，表格的行和列以及表格本身應該利用適當標籤來標明行標題、列標題、以及表格標題。,無障礙網頁規範第六條,規範六：確保網頁能在新科技下良好地呈現網際網路的技術日新月異，網頁開發者往往在設計網頁時，會使用新科技來強化其網頁運作功能，因而忽略掉使用舊瀏覽器來處理資訊的人士可能發生的種種問題。因此網頁開發者應該要確認在較新的科技不支援或關掉的時候，網頁仍然具有可及性，仍然可以讓使用者處理網頁內的資訊。,無障礙網頁規範第七條,規範七：確保使用者能處理時間敏感內容的改變在網頁資訊中所謂時間敏感內容是指網頁顯示的資訊可能會以可移動、閃爍、或 捲軸等方式來呈現或自動更新資訊內容。因為某些有認知障礙、神經疾病人士在 閱讀快速移動的文字或 閃爍的圖形會造成其注意力分散或者身體不適的現象；視覺障礙者所使用的螢幕閱讀機的功能可能無法閱讀捲軸文字；肢體障礙者可能因為只能做小區域的操作，而不能和移動中的資訊內容做互動操作。為了顧及以上人士使用網頁的需求，網頁開發者應該小心使用這些 時間敏感內容的操作設計，要確定瀏覽器所提供的控制機制可讓身心障礙人士處理這些資訊，否則就應該考慮提供這些資料物件或網頁的替代方案。,無障礙網頁規範第八條,規範八：確保嵌入式使用者介面具有直接可及性網頁在設計使用者介面的操作時，必須確認其是否遵循了可及性設計的原則，亦即使用者介面的功能和操作使用是否有考慮到網頁使用者可能無法使用滑鼠操作，因此網頁的使用者介面的操作設計應該具有鍵盤可操作化、或者可自行發聲等特性。當一個網頁內的嵌入式物件擁有它的自有的介面時，這介面 必須是具有可及性的設計。假如嵌入物件的介面無法做到可及性設計，就必須提供一個可及性的替代解決方案。,無障礙網頁規範第九條,規範九：設計裝置獨立網頁裝置獨立網頁所代表的意思是指網頁使用者可以使用他們偏愛的輸入（或輸出）裝置 如滑鼠、鍵盤、聲音輸入、頭杖、或者其他輸入裝置 來和其使用的瀏覽器互動。舉例來說，如果一個網頁內輸入功能的控制只能以滑鼠或其他的點選設備來啟動，那麼對那些無法使用一般瀏覽器而必須以聲音輸入、或者以鍵盤或其他非點選設備來使用網頁的人而言，將會無法使用這個網頁。網頁開發者在使用影像地圖或當成連結使用的影像時，所使用的替代文字說明部份，可以讓使用者在不必使用滑鼠等點選設備就能與他們互動。此部份的說明也可參考規範 1。,無障礙網頁規範第十條,規範十：使用過渡的解決方案本條規範所指的 過渡的 是指網頁語言內有新技術出現時，可能因為廠商發展的瀏覽器所實作的功能還不完備，無法充分提供可及性考量時，網頁開發者在使用此新技術時，應該額外設計和提供 可及性的解決方案，使運用輔助科技和較舊版的瀏覽器仍能正確的操作。舉例來說，較舊版的瀏覽器不允許使用者瀏覽至空的編輯對話框(empty edit boxes)。較老舊的螢幕閱讀器在閱讀連續的一串連結時，會將其視為只有一個連結。這些網頁內功能強大的主動元件因而變成存取困難或根本無法存取。同樣地，網頁內的超連結操作產生改變現有的視窗或突然出現新視窗的動作時，對於無法看到這些狀況的使用者來說，也可能會是非常迷惑的。這些過渡的可及性的解決方案，並非是永久需要，可能在廠商發展的新版瀏覽器所實作的功能完備時，即可提供新技術在訂定發展之時所規劃的可及性功能。因此一旦網頁科技已經合併了預期的特性或能力，可能這些檢測碼在未來就不是必要的。,無障礙網頁規範第十一條,規範十一：使用國際與國內官方訂定的技術和規範網頁開發者在設計網頁時，應該儘量使用廣泛被採用的國際與國內官方訂定的技術和規範，避免使用單一廠商開發的特殊網頁技術。因為許多國際訂定的技術和規範會考慮技術的開放性和各系統的互通性，而且也往往有比較多的可及性考慮。例如 W3C協會訂定的相關語言和技術在設計階段即與相關企業一起考量可及性的問題。若目前使用這些語言和技術仍無法提供足夠的可及性功能，也比較能夠提供替代的可及性方案。目前網頁技術還有許多非 W3C協會訂定的格式（如：PDF、Shockwave等等）需要以外掛程式或其他的應用軟體來觀看。這些格式經常不能以標準的瀏覽器以及其他現有的各種輔助科技來觀看或瀏覽。避免使用非 W3C和非標準化特性的網頁資訊元件（包括專屬元件和特殊屬性）將使網頁更能適應使用各種類型的軟硬體和使用者。而且在碰到必須使用不可及的技術和替代方案時，也比較容易設計出符合可及性的替代網頁。,無障礙網頁規範第十一條,網頁開發者應該注意到，在做文件格式的轉換時，例如，從 PDF、PostScript、RTF等格式轉換成為 W3C的標記語言（譬如HTML、XML等）並不保證一定能做出一份可及的文件。因此，在轉換手續之後必須驗證每個網頁的可及性和可用性。假如網頁未能完全轉換時，就應該要持續改進該網頁以儘量接近它原本的表現方式，或者是另外提供一個HTML或普通文字版本的網頁。,無障礙網頁規範第十二條,規範十二：提供內容導引資訊網頁在處理內容導引資訊之時，應提供上下文(context)和定向(orientation)資訊來幫助使用者了解複雜的網頁架構或相關元件。把元件分組和提供有關元件之間的脈絡關係對所有使用者都是有用的。網頁開發者應該要注意到一個網站內網頁各部分之間的複雜關係，對於有認知障礙的和有視覺障礙的人要做解讀可能會相當困難的。因此應該要考量他們的困難，提供詳細的內容導引資訊。上下文(context)說明：假設有人問Apple是什麼意思，就得看上下文（context）才知道它指的是蘋果、蘋果電腦、還是蘋果牌泳裝。定向(orientation)資訊：資訊內容的指令定義當在 ASCII 檔案之中。以提供 ASCII 檔轉換的正確機器處理資訊。視障者之定向（Orientation）是指瞭解所在位置的能力。,無障礙網頁規範第十三條,規範十三：提供清楚的瀏覽網站機制一個網站具有清楚和一致的瀏覽機制對於認知障礙或視覺障礙者是非常重要的。這種規劃考量不僅可讓身心障礙者獲益，而且可讓所有使用者在使用網站資訊時不會迷失。因此網頁開發者可以規劃各種 引導資訊、瀏覽棒、網站地圖等等，以提供清楚和一致的瀏覽機制。如此可增進使用者在網站上快速而精確地找到特定資訊。,無障礙網頁規範第十四條,規範十四：確保簡單清楚的網頁內容網頁開發者應確認文件的內容和用詞是清楚和簡易的，讓使用者可以更容易地理解網頁內容。使用清楚和簡易的語言可促進有效的溝通。對認知或學習障礙的人而言讀取或理解正式或官方用詞的文字書面資訊，可能是困難的。使用清楚和簡易的語言也可使那些母語與你不同的人受益，這包括那些主要以手語溝通的人。因此網頁開發者應該採用一致性的網頁版面、可明瞭辨識的圖表、和容易瞭解的語言和用詞，這將讓所有的使用者受益，特別是對認知障礙和閱讀困難的人有幫助。然而，仍然應該要確認網頁內的各個圖像應擁有替代文字說明以提供給全盲、弱視或任何無法觀看圖片的人來使用。相關說明可 參考規範一。,無障礙網頁九十條檢測碼,規範一：對於聽覺及視覺的內容要提供相等的替代文字內容1.1：H101000 圖片需要加上替代文字說明 1.2：H101001 對於applet提供替代文字說明1.3：.規範二：不要單獨靠色彩來提供特殊資訊2.1：H102100確保所有藉由顏色所傳達出來的訊息，在沒有顏色後仍然能夠傳達出來。2.2：H202101確保前景顏色與背景顏色彼此呈現明顯的對比,優質的無障礙網頁,字體及顏色可以調整。架構清楚簡單。替代文字清楚。快速鍵功能。,需改進的網頁,替代文字無法判斷正確資訊。鍵盤無法移動到主要選單內容。字體過小、顏色太過接近。左邊主要選單區的次選單只能以滑鼠選取字體小，顏色很相近，看起來很吃力。資訊在圖片中，但圖片裡面文字又不清楚。,需改進的網頁,想找的資料不知道放在哪邊突然跑出新視窗，造成很大的干擾，廣告畫面看起來很複雜。只能使用鍵盤操作的身障朋友，無法藉由鍵盤游標移動到想到達的位置被flash困住，無法移開位置。主要連結區好遠，要在內容區與主要連結區移動，要跳過很多資料。,相關名詞,World Wide Web Consortium-W3C 全球資訊網聯盟（W3C）為一國際共同認可的非營利組織，成立於1994年10月，其宗旨為盡力提昇與維護全球資訊網(World Wide Web,WWW)之發展。Cascading Style Sheet-CSS串接樣式表從Web標準計畫看CSS Web Accessibility Initiative-WAI,謝謝指教,