1、無障礙的認知,外在環境的安適網頁的瀏覽資訊的取得(qd),第一页，共四十七页。,身心(shnxn)障礙者瀏覽網頁的困難,在茫茫網海，找不到網頁。無法判讀與打字輸入不方便(fngbin)。英文接受能力。網頁字體太大或太小。輔具無法辨識圖表及顏色內容。,第二页，共四十七页。,何謂無障礙網頁,無障礙網頁(WEB Content accessibility)不論身心是否有障礙，每個人都有權利存取網路資源。透過無障礙網頁的設計，使任何使用者都能更便利地使用網站，排除使用網頁時可能遇到的問題。網際網路發展之初，主要是分享不同電腦間的文字資料。隨著多媒體、超媒體的發展，許許多多的網頁技術不斷被開發出來，為了
2、能吸引使用者的目光(mgung)，網頁設計者大量的圖片、語音、動畫等充斥網頁，但卻未在同時考慮身心障礙者在使用這些資訊時所可能碰到的問題，因而造成今日的網際網路障礙重重。,第三页，共四十七页。,何謂無障礙網頁,為了改善這個問題，許多世界性的組織，包括我國政府都開始注意(zh y)到相關的問題，因此提倡網際網路無障礙的概念，希望提供一個平等參與的網路服務空間。,第四页，共四十七页。,了解(lioji)無障礙網頁,開發無障礙網頁並不困難基於W3C的HTML規範。是落實網頁設計的一種具體目標。講究平權國家的進步指標先進國家推動資訊社會的重要議題。無障礙網頁落實數位落差縮短無障礙網頁不一樣就是不一樣對
3、廣大身心(shnxn)障礙者是不可或缺的。要欺瞞無障礙網頁檢驗器是很容易的，但是那樣不會讓您的網頁無障礙。,第五页，共四十七页。,無障礙網頁檢測,行政院研考會無障礙網頁檢測,第六页，共四十七页。,可以(ky)被辨識的網頁內容,圖片替代文字(wnz)表格處理色彩處理顏色問題,第七页，共四十七页。,圖片替代(tdi)文字,螢幕朗讀軟體可以讀得到文字純文字瀏覽器能顯示這段文字Google 會為這段文字建立索引瀏覽器(例如(lr)IE，Netscape)則會用工具提示或者在狀態列顯示出來,第八页，共四十七页。,圖片替代(tdi)文字,有意義的替代文字條列式小圖示的alt可採用“*”無意義的裝飾性圖示以
4、alt=“”標示應避免使用跳動的圖片，觀看者容易(rngy)分心及造成眼睛的不適。且較容易(rngy)剌激心臟病及氣喘等患者。,第九页，共四十七页。,多媒體替代(tdi)內容,影片、聲音視覺障礙者可以用聽的。對白/獨白、字幕聽覺障礙者可以讀取並了解內容。歌曲(gq)、歌詞聽覺障礙者可透過文字瞭解歌曲內容。,第十页，共四十七页。,表格(biog)處理,為了讓視覺障礙者可理解(lji)表格資訊必須標明表格行和列的標題結構化的標記彼此的關係,第十一页，共四十七页。,表格(biog)處理,表格摘要(zhiyo)說明使用 5.5：H305004 表格須提供表格摘要說明(如summary屬性)。範例說明,
5、第十二页，共四十七页。,表格(biog)處理,表格(biog)標題使用 5.6：H305105 資料表格須提供標題說明。範例說明,第十三页，共四十七页。,表格(biog)處理,表格行列標題使用5.1:H105100 對於每一個存放資料的表格（不是用來排版(pi bn)），標示出行和列的標題。範例說明,第十四页，共四十七页。,表格(biog)處理,結構化表格(biog)：使用th 標籤中 scope 屬性欄：col、列：row複雜的表格：使用th 標籤中axis屬性、headers屬性及id屬性,第十五页，共四十七页。,表格(biog)處理,Table tag須使用summary屬性。視覺障礙者
6、的網頁閱讀系統能夠讀取Summary資訊，可以事先得知(d zh)表格內的資料種類，增加閱讀網頁的便利性。,第十六页，共四十七页。,色彩(sci)處理顏色問題,色彩處理重點前景和背景色澤若太接近，會混淆(hnxio)顯示內容。在瀏覽上，會比較吃力。,第十七页，共四十七页。,色彩(sci)處理顏色問題,避免使用顏色表示(biosh)重點(在無顏色情況下，無法強調重點)可以底線表示重點(在無顏色情況下，仍可強調重點)或以顏色及加上斜體表示重點(在無顏色情況下，仍可強調重點),第十八页，共四十七页。,網頁標題,設定網頁標題用意(yngy)為，讓使用者儲存我的最愛時，有清楚的網頁標題名稱。簡單的說明標
7、題，內容避免籠統不清。國立臺南大學,第十九页，共四十七页。,游標順序,使用tabindex屬性設定TAB鍵在表單控制項的移動順序。使用者按下TAB鍵時，控制鍵的順序將會依照(yzho)連結中tabindex的設定值大小決定移動順序。,第二十页，共四十七页。,開新視窗,由於視覺障礙者難以察覺正在瀏覽的網頁將轉換至其他(qt)頁面，及跳回原瀏覽網頁的困難，如開新視窗須告知使用者。若網頁中有需要開啟新視窗，建議讓使用者自行操作。target=“_blank”alt=“電算中心(另開視窗),第二十一页，共四十七页。,我國無障礙網頁開發規範,十四條規範九十條相關的檢測要點分屬：第一優先第二優先第三優先又
8、可區分為：機器辨識/機器檢測-可透過檢測工具辨識、檢測。機器辨識/人工檢測-可透過檢測工具辨識，但還需由人工的方式去檢測是否符合(fh)規範。人工辨識/人工檢測-完全需要人工的方式來辨識、檢測。,第二十二页，共四十七页。,無障礙網頁十四條規範,規範一：對於聽覺及視覺的內容要提供相等的替代(tdi)文字內容 規範二：不要單獨靠色彩來提供特殊資訊 規範三：適當地使用標記語言和樣式表單 規範四：闡明自然語言的使用 規範五：建立編排良好的表格,第二十三页，共四十七页。,無障礙網頁十四條規範,規範六：確保網頁能在新科技下良好地呈現 規範七：確保使用者能處理時間敏感內容的改變 規範八：確保嵌入式使用者介面
9、具有(jyu)直接可及性 規範九：設計裝置獨立網頁 規範十：使用過渡的解決方案,第二十四页，共四十七页。,無障礙網頁十四條規範,規範十一：使用(shyng)國際與國內官方訂定的技術和規範 規範十二：提供內容導引資訊 規範十三：提供清楚的瀏覽網站機制 規範十四：確保簡單清楚的網頁內容,第二十五页，共四十七页。,無障礙網頁規範第一(dy)條,規範一：對於聽覺及視覺的內容要提供相等的替代文字內容網頁開發者在網頁中遇到非文字的聽覺或視覺內容時，如果能同時提供同等內容的替代文字，將可使聽覺障礙或視覺障礙者能夠無礙地瀏覽和獲取這些資訊內容。視覺的內容包括圖像、圖表、動畫等，而聽覺的內容則包括音樂、語言和各
10、種音訊。本規範所指的同等內容是指能描述視覺或聽覺內容的一段文字敘述。譬如一個連接到下一頁的向右箭頭的圖像，下一頁是適當的替代性文字；譬如一個煙火的動畫，有煙火聲效的煙火場景動畫，則是適當的替代視覺與聽覺的內容。語音合成器與點字顯示器等技術的成熟。網頁資訊可藉由這兩項技術，讓非文字內容得以讓視覺障礙者用聽的或觸摸的方式(fngsh)了解其資訊內容。,第二十六页，共四十七页。,無障礙網頁規範第二(d r)條,規範二：不要單獨靠色彩來提供特殊資訊對許多人而言，顏色本身有它的內涵，譬如我們習慣用紅色來表示重要的資訊，但是在非彩色螢幕環境下或對顏色辨識能力有障礙的人而言，原本顏色所傳達的訊息可能會散失(
11、snsh)或受損，網頁內容的傳達將達不到可及性要求。譬如 當前景和背景在色澤上太接近時，有的人可能無法分辨；譬如不同物品的敘述用不同顏色來代表時，有的色盲者可能也無法分辨。,第二十七页，共四十七页。,無障礙網頁規範第三(d sn)條,規範三：適當地使用標記語言和樣式表單在一般的網頁標記語言中，標記有分作結構標記（structural markup）與呈現標記（presentation markup）兩種，兩者在內涵上意義完全不同，在呈現效果上也有不同。例如表格標籤、表單標籤、標題標籤、段落標籤等都是 結構標記；粗體字標籤、斜體字標籤、換行標籤、保留文字編排標籤等都是呈現標記。網頁設計者使用標記
12、語言時，須嚴格遵守此標記的原本(yunbn)設計的目的，以避免身心障礙者在瀏覽網頁時所使用的特殊軟體解讀這些標記時產生誤解。例如非表格資訊使用表格標籤來產生呈現編排效果、如使用標題標籤來產生大字體的效果、如使用保留文字編排標籤來產生類似表格的編排呈現效果，都是一些常見的錯誤使用範例。,第二十八页，共四十七页。,無障礙網頁規範第四條,規範四：闡明自然語言的使用 本條規範所指的自然語言是指中文、英文、日文或韓文等語言。網頁設計者應該在文件裡標示自然語言使用的變化，以方便語音合成器和點字輸出機來處理，以自動地將其轉換成新的語言，讓不同語言的使用者能順利讀取這份文件。網頁設計者也應該定義文件內容的主要
13、(zhyo)自然語言；遇到縮寫和簡稱，應提供進一步的說明，以免造成語音合成機或點字輸出機的誤判解讀。而且這些自然語言的標記可以讓搜尋引擎藉由這些標記來精確找出具有關鍵字的相關文件。對學習障礙、認知障礙、或聽覺障礙者而言，自然語言標記也改進了網頁的可讀性。,第二十九页，共四十七页。,無障礙網頁規範第五(d w)條,規範五：建立編排良好的表格表格是網頁資訊的一種特殊資料架構，其包括的行、列、和資料格都有特別的資訊涵義，因此瀏覽器在碰到網頁的表格標籤時，都提供可以適當呈現表格的相關功能。但是許多人在網頁開發時，表格呈現在各行和各列的整齊劃一特性讓許多人非常喜歡用來做網頁資訊的呈現排版功能。如此使用對
14、於一般瀏覽器使用者而言，並不會造成任何問題，而且網頁呈現也整齊美觀。但是這種處理方式對於使用螢幕閱讀機或點字顯示器等各種特殊輸出裝置的視障人士(rnsh)而言，非表格結構的資訊以表格標籤來處理時，網頁內容會被切割成順序錯亂且無法理解的資訊。因此網頁開發者應該避免使用表格標籤做單純排版功能。在使用表格來呈現資訊時，應該確實設計表格應有結構，表格的行和列以及表格本身應該利用適當標籤來標明行標題、列標題、以及表格標題。,第三十页，共四十七页。,無障礙網頁規範第六條,規範六：確保網頁能在新科技下良好地呈現網際網路的技術日新月(xnyu)異，網頁開發者往往在設計網頁時，會使用新科技來強化其網頁運作功能，
15、因而忽略掉使用舊瀏覽器來處理資訊的人士可能發生的種種問題。因此網頁開發者應該要確認在較新的科技不支援或關掉的時候，網頁仍然具有可及性，仍然可以讓使用者處理網頁內的資訊。,第三十一页，共四十七页。,無障礙網頁規範第七條,規範七：確保使用者能處理時間敏感內容的改變在網頁資訊中所謂時間敏感內容是指網頁顯示的資訊可能會以可移動、閃爍、或 捲軸等方式來呈現或自動更新資訊內容。因為某些有認知障礙、神經疾病人士在 閱讀快速移動的文字或 閃爍的圖形會造成(zo chn)其注意力分散或者身體不適的現象；視覺障礙者所使用的螢幕閱讀機的功能可能無法閱讀捲軸文字；肢體障礙者可能因為只能做小區域的操作，而不能和移動中的
16、資訊內容做互動操作。為了顧及以上人士使用網頁的需求，網頁開發者應該小心使用這些 時間敏感內容的操作設計，要確定瀏覽器所提供的控制機制可讓身心障礙人士處理這些資訊，否則就應該考慮提供這些資料物件或網頁的替代方案。,第三十二页，共四十七页。,無障礙網頁規範第八(d b)條,規範八：確保嵌入式使用者介面具有直接(zhji)可及性網頁在設計使用者介面的操作時，必須確認其是否遵循了可及性設計的原則，亦即使用者介面的功能和操作使用是否有考慮到網頁使用者可能無法使用滑鼠操作，因此網頁的使用者介面的操作設計應該具有鍵盤可操作化、或者可自行發聲等特性。當一個網頁內的嵌入式物件擁有它的自有的介面時，這介面 必須是具有可及性的設計。假如嵌入物件的介面無法做到可及性設計，就必須提供一個可及性的替代解決方案。,第三十三页，共四十七页。,無障礙網頁規範第九條,規範九：設計裝置獨立網頁裝置獨立網頁所代表的意思(y s)是指網頁使用者可以使用他們偏愛的輸入（或輸出）裝置 如滑鼠、鍵盤、聲音輸入、頭杖、或者其他輸入裝置 來和其使用的瀏覽器互動。舉例來說，如果一個網頁內輸入功能的控制只能以滑鼠或其他的點選設備來啟動，那麼
