文章彙整

掌握開發無障礙網頁的基本原則

Astral WebBy Astral Web 3 years agoNo Comments
首頁  /  網站設計與開發  /  掌握開發無障礙網頁的基本原則

無障礙網頁

無障礙網頁的立意是讓身障者也能瀏覽閱讀網站內容,並與網頁互動。除了對身障者友好之外,無障礙網頁設計的重要原則就是:讓使用者在各種不利的情況之下,都能自由地瀏覽並閱讀網站內容,並且充份地理解而無任何阻礙。舉例來說:讓視力退化的老年人也能輕鬆閱讀網站文章;在網路頻寬受限的地區也能瀏覽及閱讀網站內容;即使裝置不支援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的「視障上網資訊系統」,了解視障朋友使用的上網設備。相信對您開發無障礙網頁會更有幫助。

 

 

 

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。