HTML 網頁無障礙 Web Accessibility (A11Y)

網頁無障礙 (Web Accessibility，常縮寫為 A11Y) 的核心理念是：每個人，包括身心障礙者、使用不同裝置或在不同環境下的人，都應該能平等地獲取網頁上的資訊與服務。

在 HTML 標籤層級，我們不需要複雜的技術，只要保持正確的編碼習慣，就能大幅提升網站的無障礙程度。

優先使用「語義化標籤」

這是 A11Y 的地基。螢幕閱讀器 (Screen Reader) 會依賴 HTML 標籤來解讀內容。

  • 錯誤做法：使用 <div> 來製作按鈕。視障者無法得知這是一個可以點擊的東西。
  • 正確做法：使用 <button>。它內建了鍵盤聚焦與點擊狀態的語義。

常見標籤對應的 A11Y 語義：

  • <nav>、<main>、<header>、<footer>: 讓使用者能快速跳轉區塊。
  • <h1> ~ <h6>: 建立清楚的層次結構。
  • <a>: 標示這是一個連結。

圖片的 alt 屬性

每一張具備資訊價值的圖片，都必須提供 alt (替代文字)。

<!-- 正確：說明圖片內容 -->
<img src="chart.png" alt="2024 年第四季銷售額成長趨勢圖" />

<!-- 裝飾性圖片：alt 應留空，讓閱讀器跳過 -->
<img src="decoration-line.png" alt="" />

2024 新星屬性：inert

inert 是近年來瀏覽器正式普及的強大屬性。當你對一個元素使用 inert 時，該元素及其內部所有內容會：

  1. 失去所有互動性（不能點擊、輸入）。
  2. 視覺上不可聚焦（Tab 鍵無法跳轉到內部）。
  3. 對輔助技術不可見（螢幕閱讀器會忽略它）。

這非常適合用在「開啟側邊欄時禁用背景」或「分步驟表單中隱藏尚未進行的步驟」。

<!-- 當 Modal 開啟時，讓首頁內容進入 inert 狀態 -->
<main inert>
  <h2>我是背景內容，現在被禁用了</h2>
  <button>點點看，點不動吧</button>
</main>

表單與 label 的連結

永遠不要忘記將 <label> 與 <input> 連結。這不僅擴大了點擊區域，也讓閱讀器能讀出欄位的名稱。

<label for="user-email">電子郵件：</label> <input type="email" id="user-email" />

鍵盤導航 (Keyboard Navigation) 實務

許多依賴鍵盤（或輔助輔助設備）的使用者，是透過 Tab 鍵在網頁中移動的。

絕對不要移除聚焦外框 (outline: none)

很多設計師為了美觀會寫 outline: none; 來移除點擊或聚焦時的藍色外框。這對鍵盤使用者是災難，因為他們會不知道目前的焦點在哪裡。

  • 最佳做法：如果你不喜歡預設樣式，請使用具備良好對比色的 :focus 或 :focus-visible 來設計自訂的高亮效果。

使用 tabindex 控制聚焦

  • tabindex="0"：讓原本不可聚焦的元素（如 <div> 或 <span>）可以被 Tab 鍵點選到，並排入正常的 DOM 順序。
  • tabindex="-1"：讓元素不能透過 Tab 鍵聚焦，但可以透過 JavaScript 的 .focus() 方法聚焦。

當頁面頂端有大量的導航選單時，鍵盤使用者每次換頁都要按幾十下 Tab 才能進到主要內容。

  • 做法：在頁面最上方放置一個隱藏的連結，只有在聚焦時才顯示，讓使用者可以直接跳到 <main> 區塊。
<!-- Skip Link 範例 -->
<a href="#main-content" class="skip-link">跳到主要內容</a>

<nav>...</nav>

<main id="main-content">
  <!-- 內容 -->
</main>

<style>
  .skip-link {
    position: absolute;
    top: -40px; /* 平時隱藏在垂直畫面外 */
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
  }
  .skip-link:focus {
    top: 0; /* 聚焦時顯示 */
  }
</style>

認識 ARIA 角色 (Role)

如果原生標籤無法滿足需求（例如你需要自訂一個非常特別的複雜組件），我們可以使用 ARIA (Accessible Rich Internet Applications) 屬性來補強。

  • role="alert": 用於即時的錯誤通知。
  • aria-label: 當按鈕內沒有文字（只有圖示）時，提供敘述。
  • aria-expanded: 用於開合式選單，說明目前是展開還是收合。

總結

A11Y 不是一項「額外」的工作，它是高品質網頁開發的一部分。一個具備良好無障礙性的網站，不僅能幫助障礙者，通常對於 SEO 的排名與一般使用者的體驗 (UX) 也有正面的幫助。從最簡單的語義化標籤與 alt 屬性做起，就是最好的第一步。