web accessibility
TRANSCRIPT
![Page 1: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/1.jpg)
無障礙網頁介紹無障礙網頁介紹無障礙網頁介紹無障礙網頁介紹WEB ACCESSIBILITY
分享者分享者分享者分享者陳志嘉陳志嘉陳志嘉陳志嘉
![Page 2: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/2.jpg)
FOR視障
圖片來源:無障礙服務空間網
![Page 3: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/3.jpg)
FOR視障
圖片來源:無障礙服務空間網
![Page 4: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/4.jpg)
FOR視障
![Page 5: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/5.jpg)
FOR聽障
圖片來源:無障礙服務空間網
![Page 6: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/6.jpg)
FOR肢障
圖片來源:無障礙服務空間網
![Page 7: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/7.jpg)
FOR肢障
圖片來源:無障礙服務空間網
![Page 8: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/8.jpg)
無障礙網站識別標章
![Page 9: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/9.jpg)
無障礙網站標章最高級AAA
![Page 10: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/10.jpg)
無障礙網路空間服務網
![Page 11: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/11.jpg)
無障礙網頁申請流程
1機器檢測機器檢測機器檢測機器檢測 4單一窗口登錄單一窗口登錄單一窗口登錄單一窗口登錄 7抽測結果抽測結果抽測結果抽測結果
2人工檢視人工檢視人工檢視人工檢視
3加入會員加入會員加入會員加入會員6抽檢抽檢抽檢抽檢,,,,採定期採定期採定期採定期及不定期抽檢及不定期抽檢及不定期抽檢及不定期抽檢
5設定標章連結設定標章連結設定標章連結設定標章連結路徑路徑路徑路徑
8修改完成修改完成修改完成修改完成
9 重覆步驟重覆步驟重覆步驟重覆步驟6至步驟至步驟至步驟至步驟8
![Page 12: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/12.jpg)
無障礙網頁開發規範
�行政院研究發展考核委員,參考W3C協會、WAI組織無障礙網頁內容標準相關規範。
�十四條規範
�九十條相關的檢測要點
![Page 13: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/13.jpg)
第一優先等級第一優先等級第一優先等級第一優先等級
�網頁內容開發者在開發網頁時必須遵循這個等級的檢測碼。
![Page 14: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/14.jpg)
A+等級等級等級等級
�網站若通過第一優先等級無障礙設計,且具有定位點(:::)(原名網頁導盲磚)搭配鍵盤快速鍵(Accesskey)、網站導覽(Sitemap)功能及網頁瀏覽工具具有使用鍵盤設計,勿只設計僅能使用滑鼠點選等瀏覽網頁的功能。
![Page 15: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/15.jpg)
網頁導盲磚行政院研考會頒佈之「無障礙網頁開發規範」原則設計,遵
循無障礙網站設計之規範,提供網頁導盲磚(:::)、鍵盤快速鍵(Access Key)、網站導覽(Site Navigator)等無障礙網頁之設計,為使對滑鼠操作有障礙之人士,亦可快速瀏覽網站之任何資訊,例如:
� Alt+T : 網站最頂端之相關功能連結,位於本站上方左區。包含LOGO圖示與中英文校名。
� Alt+M : 本校主功能選單連結,位於本站上方右區的位置。(※如無主� Alt+M : 本校主功能選單連結,位於本站上方右區的位置。(※如無主選單,則本快速鍵無作用)
� Alt+L : 本校次功能選單連結,位於本站左方的位置。顯示出次功能選單連結下之內容。(※如無左選單,則本快速鍵無作用)
� Alt+B : 版權宣告、其他相關聯絡訊息,位於本站最下方。
� Alt+H : Accesskey選項。
![Page 16: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/16.jpg)
第二優先等級第二優先等級第二優先等級第二優先等級
�網頁內容開發者在開發網頁時應該滿足這個等級的檢測碼。
![Page 17: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/17.jpg)
第三優先等級第三優先等級第三優先等級第三優先等級
�頁內容開發者在開發網頁時可以納入這個等級檢測碼的要求。
![Page 18: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/18.jpg)
十四條規範
• 規範一:對於聽覺及視覺的內容要提供相等的替代文字內容
• 規範二:不要單獨靠色彩來提供特殊資訊
• 規範三:適當地使用標記語言和樣式表單
• 規範四:闡明自然語言的使用
• 規範五:建立編排良好的表格
• 規範六:確保網頁能在新科技下良好地呈現• 規範六:確保網頁能在新科技下良好地呈現
• 規範七:確保使用者能處理時間敏感內容的改變
• 規範八:確保嵌入式使用者介面具有直接可及性
• 規範九:設計裝置獨立網頁
• 規範十:使用過渡的解決方案
• 規範十一:使用國際與國內官方訂定的技術和規範
• 規範十二:提供內容導引資訊
• 規範十三:提供清楚的瀏覽網站機制
• 規範十四:確保簡單清楚的網頁內容
![Page 19: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/19.jpg)
90條檢測碼
� 0機器辨識/機器檢測:24條
� 1機器辨識/人工檢測:34條
� 2人工辨識/人工檢測:32條
![Page 20: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/20.jpg)
檢測工具FREEGO
![Page 21: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/21.jpg)
檢測工具FREEGO
![Page 22: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/22.jpg)
輔具資源網
• 輔具資源入口網 http://repat.moi.gov.tw/03product/pro_a_list.asp
![Page 23: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/23.jpg)
輔具資訊查詢
![Page 24: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/24.jpg)
學習輔具中心、無障礙資源網
�學習輔具中心 http://assist.batol.net/
![Page 25: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/25.jpg)
坊間供視障利用的網站
• 交大愛盲有聲書 http://blind.nctu.edu.tw/Magazine/
![Page 26: Web Accessibility](https://reader034.vdocuments.net/reader034/viewer/2022051213/55a150431a28abe2488b4818/html5/thumbnails/26.jpg)
有聲導覽系統
• Windows eye下載http://www.gwmicro.com/Window-Eyes/Demo/