无障碍网页制作经验谈.pdfVIP

無障礙網頁製作經驗談 凌網科技股份有限公司 姚雅瓊 吳淑雅 1 大綱 無障礙網頁與以往的網頁製作方式有何不同 DreamWeaver MX 對於製作無障礙網頁的支援 HTML4.0 加強支援無障礙 CSS與無障礙網頁製作 我們遇到的困難 要不要無障礙 2 無障礙網頁與以往的網頁製作方式有何不同 網頁文件的結構性比視覺呈現更重要。 作出美麗的網頁或容易閱讀的網頁？ 網頁設計師需要看懂html標籤 每個標籤的原始含意。 慣。 籤，使畫面達到視覺上的要求，但完全失去文件的結構性。 3 DreamWeaver MX 對於製作無障礙網頁的支援 Split 分割工作視窗 以往很多網頁設計師不看Code 增加無障礙對話框，提醒輸入無障礙標籤或屬性。 當插入form 、frame 、media 、images這些物件時，對話框 增加有關與無障礙的標籤或屬性輸入欄位 增加製作無障礙網頁的相關說明 UsableNet Accessibility Reference 4 HTML4.0 加強支援無障礙 加強結構性語法 高度結構化的文件較符合無障礙。 整合Cascading Style Sheets HTML是設計用來組織文件，並非來做專業的排版，因此無法 滿足網頁設計師製作豐富多變的網頁的要求。 更多方式來設定替代內容 如alt, title, summary, caption 等屬性或標籤。 更多導覽的方式 連結加入“title” 屬性；accesskey , tabindex 可使用鍵盤快速移 位。 5 CSS與無障礙網頁製作 何謂CSS （Cascading Style Sheet ）階層式樣規 階層式樣規是一種簡單的機制，可賦予網頁豐富的樣式呈現， 如字體、顏色、間距等。 Style ：樣式，決定套用樣式範圍的呈現 Cascading ：階層，決定樣式的權重。 阻止HTML標籤的濫用，解決HTML 對於網頁的視覺 呈現效果支援不足。 檔案更精簡，更易套用程式 HTML中沒有多餘的、只為視覺效果而存在的標籤。 6 CSS與無障礙網頁製作 使文件更具結構性，更易閱讀。 將文件結構與呈現效果分開，將使文件更易維護和閱讀，特別是對於 使用線性瀏覽方式的人。 容易維護並可重複使用 我們需要一個既有結構性，視覺表現又豐富的網頁。 CSS的限制 CSS不是一個完全精確的版面編排語言，且瀏覽器的支援不完 整（甚至連html的解譯都存再不少的差異） 7 我們遇到的困難 檢測過程曠日費時 需全站，包含子單位的網站都通過檢測的規定