摘要

無障礙（Accessibility，常縮寫為 a11y）是指確保我們的網站和應用程式，能被所有使用者（包括身心障礙人士）順利地使用和存取。

定義與說明

在 Vue 開發中，實踐 a11y 包括：語義化 HTML：正確使用 <nav>, <main>, <button> 等標籤。ARIA 屬性：為動態元件添加 role 和 aria-* 屬性，向螢幕閱讀器等輔助技術傳達狀態。鍵盤可導航：確保所有互動元素都能透過鍵盤（如 Tab 鍵）來存取和操作。足夠的色彩對比度。

實作範例

一個無障礙的自訂按鈕。

無障礙按鈕元件

<template>
  <div
    role="button"
    :aria-pressed="isPressed"
    tabindex="0"
    @click="toggle"
    @keydown.enter.space.prevent="toggle"
  >
    {{ label }}
  </div>
</template>

結論

無障礙不是一個可選項，而是專業網頁開發的基礎責任。從一開始就在開發中考慮 a11y，能讓我們的產品服務更廣泛的受眾，並帶來更好的使用者體驗。

無障礙 a11y ARIA