無障礙網站：新手村遇到的二三事(上)

相對於一般的網站，無障礙網站對於身障朋友能夠更便利友善的瀏覽，但是製作無障礙網頁有哪些注意事項呢？本篇文章將淺談筆者第一次切版無障礙網頁所遇到的坑與心得！

-

一、無障礙網站是何方神聖

無障礙網頁顧名思義，就是讓使用者能夠在瀏覽該網頁時操作便利沒有障礙，對於一些深受聽力、視力、認知能力所苦的身障者，也能容易操作與獲取資訊，不會因本身的不便造成無法瀏覽網頁的情況。

無障礙標章乃是依照 Dive Into Accessibility 親和力聲明 所設計，分爲三種不同等級：A/AA/AAA

：滿足這些檢測碼對一些使用網頁內容的團體來說，是一種基本的需求。

：若無滿足這些檢測碼，某些使用者或團體使用網站內的資訊時，將會遇到困難。

：滿足這些檢測碼，可進一步改善網站內容的可及性。

二、無障礙網站的規範

要符合哪些無障礙規範取決於該網站欲獲得幾A等級的標章，除了需符合該等級的規範之外，若為AA/AAA，則需向下兼容、連同低等的規範也須一併滿足，例：AA等級需同時滿足A+AA的規範；AAA等級需同時滿足A+AA+AAA的規範。

規範的種類繁多，但皆是基於以下四項大觀念出發所制定的：

三、無障礙網站規範_切版應用

上面提到的原則只是大方向的概念，那麼在眾多原則中，常常需要注意到的有哪些呢？以下列舉幾點：

A. 為任何非文字的內容提供相等意義的替代文字，使這些內容能轉變成大字版、點字、語音、符號或簡化過的語言等不同型態：

這一點十分重要，當網站上有使用圖片時，需有替代文字屬性 ( alt="" ) 來說明圖片所代表的含意或目的。

B. 頁面中必須包含至少一個<h1>，並且不能為空；不能跳過<h2>直接定義<h3>

在每一個 Html 檔案中，一定要至少有一個<h1>，但在實務上不一定每個頁面都有大標題，因此<h1>也常常被拿來放置 Header 的 Logo，如此便可確保每個頁面都有<h1>。

若頁面上有<h3>、<h4>等元素，在順序上也必須照著<h1><h2><h3><h4>...的順序出現。

C. 文字字級使用相對單位，不使用px

在切版上設定文字字級時，需使用相對單位如：% 或 em、rem ，因在無障礙網站上常有切換字級大/中/小的按鈕，為了讓文字能順利縮放，不可使用固定的像素單位來撰寫文字字級。

D. 放置導盲磚 (定位點)

定位點的用途在於幫助使用者能夠快速的在頁面上跳轉到不同區塊，會以 ::: 來呈現；定位點會搭配以鍵盤快捷鍵來使用，使用者可以簡單地按下指定快捷組合即可跳轉到對應的區塊，不需要慢慢按 Tab 來選擇，因此通常無障礙網站會有一頁「網站導覽」來說明各區塊搭配的快捷鍵。

---

以上就是製作無障礙網站時，在切版上常常需要注意到的細節，也是最基本需要遵守的幾個大項目，但除了以上說明的部分，還有其他眉眉角角嗎？當然有，將於下一篇繼續跟大家分享！