無障礙網頁規劃建置
| 文章索引 |
|---|
| 無障礙網頁規劃建置 |
| 無障礙網頁設計規範(一) |
| 無障礙網頁設計規範(二) |
| 無障礙網頁設計規範(三) |
| 所有頁面 |
高雄網旭科技(E823)｜網路行銷｜SEO｜網站建置｜無障礙網頁規劃建置
無障礙網頁設計規範
l 前言
l 規範內容
壹、 前言
網際網路發展之初，主要是用來在不同電腦平台之間分享文字資料，然而隨著多媒體科技的發展，許多網頁設計者為了提高網站的吸引力，往往使用大量的影音內容，但卻未在同時考慮身心障礙者在使用這些資訊時所可能碰到的問題，因而使得今日的網際網路障礙重重。近年來許多世界性的組織，包括我國政府都開始注意到相關的問題，因此提倡「網際網路無障礙」的概念，希望提供一個平等參與的網路服務空間。所以在校內推廣無障礙網頁的觀念，希望校內各網頁朝向完全無障礙網站之方向努力，以落實公平服務社會各族群之目標。
貳、 規範內容
本規範是為了讓網頁開發者能夠對網頁開發在可及性設計的考慮上有明確的規範條文，特參考W3C(World Wide Web Consortium)協會的WAI (Web Accessibility Initiative)組織在相關無障礙網頁標準的設計，以十四條規範來引導網頁開發者設計可以讓所有人士都可以使用的無障礙網頁。在規範後適時加上相關範例，以更清楚說明規範內容。
(一) 對於聽覺及視覺的內容要提供相等的替代文字內容
網頁開發者在網頁中遇到非文字的聽覺或視覺內容時，如果能同時提供同等內容的替代文字，將可使聽覺障礙或視覺障礙者能夠無礙地瀏覽和獲取這些資訊內容。(範例一)
視覺的內容包括圖像、圖表、動畫等，而聽覺的內容則包括音樂、語言和各種音訊。本規範所指的同等內容是指能描述視覺或聽覺內容的一段文字敘述。譬如一個連接到下一頁的向右箭頭的圖像，「下一頁」是適當的替代性文字，譬如一個煙火的動畫，「有煙火聲效的煙火場景動畫」，則是適當的替代視覺與聽覺的內容。
這些替代文字在網頁中所帶給我們的方便性與好處是因為語音合成器與點字顯示器等技術的成熟。網頁資訊可藉由這兩項技術，讓非文字內容得以讓視覺障礙者用聽的或觸摸的方式了解其資訊內容，對於一些有閱讀困難的人（經常伴隨著認知障礙、學習障礙、和耳聾）的人來說，要了解這些非文字的內容，可經由語音合成器來朗讀替代文字，將有極重要的幫助。替代文字的顯示不但可以符合聽障者的需求，對於非身心障礙的一般網頁瀏覽者也是有額外的幫助。
l 範例一
用alt說明圖片內容：
<A href="routes.html">
<IMG src="topo.html" alt="前往體育館的路徑圖">
</A>
l 範例二
若圖片內容需要較長說明，可用longdesc另外連結一個頁面：
<IMG src="97sales.gif" alt="Sales for 1997 " longdesc="sales97.html">
(二) 不要單獨靠色彩來提供特殊資訊
對許多人而言，顏色本身有它的內涵，譬如我們習慣用紅色來表示重要的資訊，但是在非彩色螢幕環境下或對顏色辨識能力有障礙的人而言，原本顏色所傳達的訊息可能會散失或受損，網頁內容的傳達將達不到可及性要求。譬如當前景和背景在色澤上太接近時，有的人可能無法分辨，譬如不同物品的敘述用不同顏色來代表時，有的色盲者可能也無法分辨。
(三) 適當地使用標記語言和樣式表單
在一般的網頁標記語言中，標記有分作結構標記（structural markup）與呈現標記（presentation markup）兩種，兩者在內涵上意義完全不同，在呈現效果上也有不同。例如表格標籤、表單標籤、標題標籤、段落標籤等都是結構標記，粗體字標籤、斜體字標籤、換行標籤、保留文字編排標籤等都是呈現標記。網頁設計者使用標記語言時，須嚴格遵守此標記的原本設計的目的，以避免身心障礙者在瀏覽網頁時所使用的特殊軟體解讀這些標記時產生誤解。例如非表格資訊使用表格標籤來產生呈現編排效果、如使用標題標籤來產生大字體的效果(範例三)、如使用保留文字編排標籤來產生類似表格的編排呈現效果，都是一些常見的錯誤使用範例。
l 範例三
放大第一個字體，使用自訂dropcap設定取代CSS的first -letter：
<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type="text/css">
.dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">O</SPAN>nce upon a time...
</BODY>
| < 前一個 | 下一頁 > |
|---|
新聞聯播網(可點選觀看下面訊息)
各式產品相片介紹(體驗翻書的功能)
