網頁障礙-符號（notation）、圖檔、表格、多媒體（multimedia）
符號-複雜的數學或科學符號
- 未提供替代呈現方式
- 無法讓點字系統轉換軟體、語音報讀軟體正確讀取
- 造成訊息不完整
圖檔-包含在網頁中所有圖像
- 圖片（image）
- 影像地圖（image maps）
- 圖形（figures）
- 其他圖像（other graphical entities）
- 視覺障礙者很可能會利用其他的輸出方式（如螢幕朗讀軟體），若是圖檔未包含文字描述，即成為網頁障礙，屬於網頁障礙的10大錯誤之ㄧ
表
- 表格-許多視覺障礙者使用螢幕閱讀軟體上網，表格會造成使用上的困擾，因為螢幕閱讀軟體只會由左至右一行一行閱讀資訊，無法辨識網頁中的表格，也無法利用表格說明資訊
- 表單-若是網頁設計者利用表單而非利用HTML語法來寫網頁，就會造成網頁障礙。表單的典型障礙之一就是線上輸入資料，對於視覺障礙者而言，輸入資訊後要再做修改是非常困難的
- 框架/頁（frame）-使用框架可讓網頁設計者更易以多樣化窗格呈現靜態資訊，但框架卻將人類標準閱讀模式切割開來，對視覺障礙者而言，不僅在導覽上有困難，更造成理解上的問題
多媒體
多媒體或是任何發出聲音的東西，對於聽覺障礙者而言，可能會有無法聽到的問題
文字
無法利用手操作滑鼠的肢體障礙者，可能會使用頭杖（head pointer）或嘴棒（mouth sticks）等輔助設備，因此網頁操作不應造成使用上的障礙，例如：文字過小造成點選上的不便
顏色
視障者的純文字瀏覽器（Lynx）無法區分背景顏色，因此最好不要以顏色來辨別資訊
其他的網頁障礙
- 包含程式、彈跳視窗、特殊效果等身心障礙者可能無法辨別與使用網頁中的程式，如：Java Scripts、VB Scripts，這些程式除了需要安裝軟體外，下載也需花費時間。
- 彈跳開啟的新視窗，由於未適時提示，因此瀏覽網頁的過程會失去焦點。
- 網頁的動態效果，如跑馬燈、閃爍、即時更新資料等，都可能造成使用上的障礙 網頁具視覺聽覺線索、雜亂的版面呈現、必須使用滑鼠或鍵盤、路徑不清楚等
殘疾人 Disabilities
- 身障者、老年人
- 視覺障礙 Visual Disabilities
- 聽覺障礙 Auditory Disabilities
- 言語障礙 Speech Disabilities
- 肢體殘疾 Motor Disabilities
- 認知障礙 Cognitive Disabilities
無障礙網頁開發規範
所謂「無障礙網頁開發規範」是什麼呢？其內容主要是根據目前主導國際全球資訊網技術的標準組織 W3C （ World Wide Web Consortium ），所屬的資訊網可及性推動組織 WAI(Web Accessibility Initiative) ，訂定的「無障礙網頁內容可及性規範」 (Web Content Accessibility Guide-lines ；簡稱 WCAG ）。
等級標章
- 第一優先等級(A)網頁開發時必須滿足這個檢測碼，否則身心障礙者無法讀取網頁資訊
- 第二優先等級(AA)網頁開發時應該滿足這個檢測碼否則身心障礙者讀取網頁資訊有困難
- 第三優先等級(AAA)網頁開發時應該可以納入這個檢測碼的要求否則身心障礙者有可能有困難讀取網頁資訊
- A+等級通過第一優先等級無障礙設計，具有網頁導盲磚搭配鍵盤快速鍵(Accesskey)、網站導覽(Sitemap)功能網頁瀏覽工具具有使用鍵盤設計等三種便利使用者瀏覽網頁的功能
十四條規範
無障礙網頁開發規範 14 條規範與說明 規範一：對於聽覺及視覺的內容要提供相等的替代文字內容
規範二：不要單獨靠色彩來提供特殊資訊
規範三：適當地使用標記語言和樣式表單
規範四：闡明自然語言的使用
規範五：建立編排良好的表格
規範六：確保網頁能在新科技下良好地呈現
規範七：確保使用者能處理時間敏感內容的改變
規範八：確保嵌入式使用者介面具有直接可及性
規範九：設計裝置獨立網頁
規範十：使用過渡的解決方案
規範十一：使用國際與國內官方訂定的技術和規範
規範十二：提供內容導引資訊
規範十三：提供清楚的瀏覽網站機制
規範十四：確保簡單清楚的網頁內容
規範為了讓網頁開發者能夠對網頁開發在可及性設計的考慮上有明確的規範條文，特參考WAI組織在相關無障礙網頁標準的設計，以十四條規範來引導網頁開發者設計可以讓所有人士都可以使用的無障礙網頁。
輔助工具
視覺障礙 Visual Disabilities
色盲-紅綠色盲，沒有辦法分辨紅色跟綠色（某些紅色看起來會非常深，近似於黑色）。
老花讓web browser可以放大字體
- 網頁不要指示絕對字體大小，而應用相對字體大小
- 使用樣式表（style sheets）時，不要設定font-size為特定點數或pixels,而是設定percentage
- 網頁測試在10、12、14點(px)字體時都能良好顯示
- 18-24點(px)放大時，亦能維持相當程度的設計，不致走樣
- 提高前景與背景的顏色對比
- 避免使用複雜的背景，以增加可讀性
- 選項避免圖示
螢幕朗讀軟體 screen reader
ExtraSpeaker：語音朗讀精靈一個免費的真人語音朗讀軟體，本軟體乃是採用微軟最新的 Microsoft Text-to-Speech 語音合成技術，其語音技術不但模擬真人發音，並且會自動調整為英文句子的自然語調（例如疑問句或驚嘆句），也會自動以英文單字的常用音標來發音，同時提供英文嘴型圖示
JAWS 中文版屏幕閱讀系統 (聽HTML)JAWS是為那些能夠操作電腦但又不能完全以視覺瞭解屏幕訊的人而設的一種工具。透過中文版JAWS，屏幕上的文字會以聲音或從點字器輸出，讓視障人士可輕輕鬆鬆地瀏覽中文網站。
視盲-拿 ALVA 搭配全螢幕 DOS 視窗裡的 Lynx 純文字瀏覽器使用。他在家裡讀這些網頁的方法，就跟他工作時的作法一樣：用布拉耶點字，一次讀一列。他討厭螢幕朗讀軟體，就算有一套也不想聽。
Links 的純文字瀏覽器螢幕朗讀軟體使用在網頁開發的注意事項
Opera 瀏覽器，可以很方便地開啟或關閉圖片選項
- 長網頁視障朋友不易掃瞄找到有興趣的部份
- 螢幕朗讀軟體會以音量提示大標題，視障朋友可以透過捉到網頁結構，快速跳過沒興趣的部份。
- 設定 DOCTYPE 唸的是 HTML 例如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 辨識語文-同時也方便SE偵測語系，例如： <html lang=“zh-TW”> 正體中文、 <html lang=“en”>英文
- 網頁標題 ＜title＞ ＜/title＞
- 善用 HTML 標示標題結構， ＜H1＞最高層次的標題、 ＜H2＞H1內的主要內容、 ＜H3＞最低層次，或分項資訊
- 使用CSS（樣式表）編排版面，在純文字瀏覽器和螢幕朗讀軟體中，會依一定順序重排內容，先顯示主要內文，再顯示導覽列
- 連結 <a>不要開啟新視窗
- 提供取代圖片的文字 <img alt="文字讓網頁不顯示圖片">
聽覺障礙 Auditory Disabilities
多媒體 Multimedia 發開注意重點- Spoken audio clips應該提供文字稿
- Video應該有字幕（subtitles）
- 非母語訪客與語意化內容
肢體殘疾 Motor Disabilities
動作障礙無法用滑鼠，無法同時按雙鍵或三鍵，輔助設備使用方向鍵盤。 網頁設計發開注意重點避免精確細微的滑鼠定位，直接可以用按鍵操作為主 (下拉式選單與展開式表單)
認知障礙 Cognitive Disabilities
善用標題標示重要內容 提供拼字檢查功能，中文提供建議功能 (錯誤字)簡易建立無障礙網頁的重點
- 網頁導盲磚(定位點)視覺設計重點
- 將字形設為最小字，字的顏色和底色相同
- html架構指定分配後，針對區塊位置下相關的語法對應
- 圖片與影片：使用alt屬性加以說明
- 影像地圖：使用替代文字說明，確保使用者取得影像地圖中的超連結資訊
- 多媒體：提供影音檔案字幕、文本或說明加以描述內容。
- 超連結：使用有意義的文字，避免使用「點選這裡」等無意義的內容
- 頁面組織：使用標題、重點、與一致性的架構。網頁版面設計盡可能使用CSS，XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層，將資料層及顯示層分開
- 框架：使用非框架元素（noframes element）與有意義之標題
- 表格：確認每行內容皆可閱讀或使用重點摘要
- 圖表：使用重點摘要
- 外掛程式：外掛程式如Scripts、applets、或plug-ins，應提供替代內容，以免造成取用上的障礙或有不支援的情況
- 檢測網頁：使用檢測工具或無障礙規範標準檢核網頁
資料源：
國立臺灣大學圖書資訊學系.ppt
Web Accessibility_國立臺灣大學圖書資訊學系(本機下戴)