【無障礙網站是甚麼?】⼀次搞懂無障礙的標準、重要性及設計Tips

無障礙網站的標準

● 無障礙標章等級

無障礙網站必須經過不同項⽬的審核，才能獲取標章得到認證，⽽無障礙標章主要是根據網⾴內容無障礙指南（WCAG）進⾏評估，主要分為三個合規等級：

無障礙標章圖⽰ : A 等級標章

A 級 ：最基礎的合規等級，確保基本的無障礙功能 ( 例 : 可透過鍵盤導航的設計 )，使某些有障礙的⽤戶能夠訪問網⾴內容。

無障礙標章圖⽰ : AA 等級標章

AA 級 : 這個等級通常是公司/組織製作無障礙網站的⽬標，因為它確保⼤多數有障礙的⽤戶能夠叫好的使⽤及理解網⾴內容，其特⾊包含⾊彩對⽐、圖像的替代⽂字、表單欄位標籤等。

維克製作的專案『 1968 』以及『 職災守護 』兩款 APP 皆屬於 AA 級別。

無障礙標章圖⽰ : AAA 等級標

AAA 級 : 這個等級提供了最全⾯的無障礙功能，確保幾乎所有有障礙的⽤戶都能夠順利訪問和使⽤網⾴內容，例如 : ⼿語翻譯，但要滿⾜這個等級的條件並不容易，所以通常不會以此等級作為網站製作的標準。

附帶⼀提，以上等級的合規要求是累積的，也就是說，要達到 AA  級別的合規性，網站必須先滿⾜ A 級別的所有要求；以此類推，要達到 AAA 級別，網站必須滿⾜ A 和 AA 級別的所有要求。

● 無障礙審核標準 4 原則

無障礙標準 4 原則簡稱為 POUR ( 包含 Perceivable、Operable、Understandable、 Robust )。

 圖⽚來源 : 數位發展部 政府網站無障礙標章檢測

• 可感知性（Perceivable）:

可感知性指的是網站內容必須能夠被所有⽤戶感知 ( 視覺或聽覺 )，不能有任何不可檢測或不可⾒的部分，無論他們使⽤哪種感官或輔助技術。

實際案例 : YouTube 視頻提供⾃動⽣成和⼿動添加的字幕功能，讓聽⼒障礙者可以理解視頻內容。

• 可操作性（Operable）:

對⼤多數⼈來說網⾴的互動⽅式是透過點擊 ( Click )、滑動 ( Hover ) 或滾動 ( Scroll )     來操作。對於不能以這些⽅式互動的⼈，可以使⽤語⾳命令或其他輔助設備，例如眼球追踪器。

實際案例 : Google 使⽤ Tab 鍵可以逐⼀訪問 Google ⾸⾴的搜索欄、按鈕和連接，每個元素被選到時都會有明顯的邊框顯⽰。

• 可理解性（Understandable）:

可理解性指的是網站內容和操作必須易於理解，無論使⽤者的使⽤⾏為如何，這也是 UI UX 使⽤者介⾯及使⽤者體驗的範疇。

實際案例 : Amazon 網站在各個⾴⾯上使⽤⼀致的導航欄 Navigation，讓使⽤者能夠輕鬆找到產品分類和搜索功能。

• 健全性（Robust）:

健全性指的是網站內容和介⾯應該能夠與各種現有和未來的技術兼容，包括不同的瀏覽器、設備和輔助技術。

實際案例 : Wikipedia 使⽤語義化 HTML 標籤，確保內容結構清晰，並且網站在多種瀏覽器和設備上顯⽰良好。

● 無障礙網站 7 個設計 Tips

1.     圖⽚增加替代⽂字（alt text）

替代⽂字由屏幕閱讀器和其他輔助技術使⽤，以朗讀圖⽚上的訊息給視障⼈⼠。如下圖 Amazon 的產品圖⽚就會加上 Alt ⽂字描述，在圖⽚無法正常顯⽰時也能看到⽂字，加上 Alt ⽂字也有利於 SEO 的優化。

圖⽚來源 : Amazon 官網

對於有⾏動障礙或是暫時性殘疾（如⼿指⾻折）的⼈來說，使⽤滑⿏導覽可能會有困難，因此⽤戶可以使⽤ Tab 鍵瀏覽內容，或使⽤模擬鍵盤導航模式的輔助技術。

如下圖 Amazon 的網站可以點 Tab 鍵，按鈕就會開始導覽，每點⼀次 Tab 就會往下⼀個按鈕。

善⽤顏⾊的對⽐能夠提⾼⽂字閱讀的舒適度，例如淺⾊底+深⾊字就能夠很清楚的瀏覽內容，同時網站的主標、副標以及內⽂等也能應⽤顏⾊的對⽐讓使⽤者理解資訊的主次順序。⽽對於⾊盲使⽤者無法⽤顏⾊做判斷時，則可以加上 ICON 圖⽰作為網站功能的引導。以下圖的 ICON 來說，⼀個家的圖⽰就能讓現在的使⽤者直覺的聯想到是回⾸⾴的按鈕。

圖⽚來源 : Siteimprove Accessibility Checker 官網