掌握開發無障礙網頁的基本原則
無障礙網頁的立意是讓身障者也能瀏覽閱讀網站內容，並與網頁互動。除了對身障者友好之外，無障礙網頁設計的重要原則就是：讓使用者在各種不利的情況之下，都能自由地瀏覽並閱讀網站內容，並且充份地理解而無任何阻礙。舉例來說：讓視力退化的老年人也能輕鬆閱讀網站文章；在網路頻寬受限的地區也能瀏覽及閱讀網站內容；即使裝置不支援javascript也不會錯失網站的內容。
國家通訊傳播委員會提出了底下14點規範，是目前國內開發無障礙網頁的原則與方向
- 對於聽覺及視覺內容要提供相等的替代文字內容
- 不要單獨靠色彩來提供特殊資訊
- 適當地使用標記語言和樣式表單
- 闡明自然語言的使用
- 建立編排良好的表格
- 確保網頁能在新科技下良好地呈現
- 確保使用者能處理時間敏感內容的改變
- 確保嵌入式使用者介面具有直接可及性
- 設計裝置獨立網頁
- 使用過渡的解決方案
- 使用國際與國內官方訂定的技術和規範
- 提供內容導引資訊
- 清楚的瀏覽網站機制
對前端工程師來說、開發無障礙網頁只要把握底下幾個基本原則就可以了。
網站的重點是內容，要讓使用者能夠充份了解網站的內容
在這個前題之下，基本上只要掌握seo的開發原則就可以了，諸如：
- 使用結構化的html標籤
- 幫圖片加上alt標籤
- 幫影片及聲音檔加上適當的文字描述
- 不要使用<table>排版
- 使用<table>時，要適當使用<thead><tbody><tfoot><th><td>等具有意義的結構標籤
即使沒有滑鼠，使用者也能正常瀏覽並閱讀網站內容。
如果您的網站的選單使用了滑鼠滑入展開次選單的效果，那麼您可以
- 再幫他加上點擊之後(按下鍵盤之後)展開次選單的效果
- 新增一個頁面，提供次選單的所有連結。
- 所有onclick的動作增加相同的onkeydown動作
<input type="text" onclick="myFunction()" onkeydown="myFunction()">
停用javascript，使用者也能使用並理解您的內容。
- 不要使用javascript載入資訊內容，避免裝置不支援javascript時無法正常顯示內容
- 使用<noscript>加入替代內容
拉掉css，使用者也能充份理解您的網站內容。
不要使用CSS呈現重要的資訊內容。
當我們在製作中文網站的時候，若是遇到選單使用特殊字型的情況，一般的作法會將選單的部份以圖片處理，再利用CSS填入圖片。
<li><a class="menu1" href="http://www.yoursite.com/link1.html/"></a></li> <li><a class="menu2" href="http://www.yoursite.com/link2.html/"></a></li> <li><a class="menu3" href="http://www.yoursite.com/link3.html/"></a></li>
.menu1 {
background:url(menu1.jpg) no-repeat center;
width: 100px;
height: 50px;
}
.menu2 {
background:url(menu1.jpg) no-repeat center;
width: 100px;
height: 50px;
}
.menu3 {
background:url(menu2.jpg) no-repeat center;
width: 100px;
height: 50px;
}
但是這樣子的寫法對視障朋友來說相當不友善，因為我們必須做一些調整…
<li><a class="menu1" href="http://www.yoursite.com/link1.html/"><span>Home</span></a></li> <li><a class="menu2" href="http://www.yoursite.com/link2.html/"><span>Company</span></a></li> <li><a class="menu3" href="http://www.yoursite.com/link3.html/"><span>Products</span></a></li>
.menu1 {
background:url(menu1.jpg) no-repeat center;
}
.menu2 {
background:url(menu1.jpg) no-repeat center;
}
.menu3 {
background:url(menu2.jpg) no-repeat center;
}
.menu1 span, .menu2 span, .menu3 span {
display:none;
}
做了這些調整之後、即使沒有CSS，使用者也能知道連結的文字資訊。
提高文字與背景的明度對比
明度相近的顏色對色盲及色弱的朋友來說、有可能變成同色，影響閱讀，因此提高文字與背景的明度對比是相對比較安全的作法。
您可以使用 Color Oracle 這個軟體、來檢查網頁在色盲朋友眼中看起來是什麼樣子。
儘量使用較新的技術(例如HTML5)
您可以參考NCC的「視障上網資訊系統」，了解視障朋友使用的上網設備。相信對您開發無障礙網頁會更有幫助。
我要留言