ReactJS - 可訪問性

可訪問性 (a11y) 是以這樣一種方式設計 Web 應用，即該應用對所有人都是可訪問的，並支援輔助技術為終端使用者讀取應用內容。

React 支援 Web 應用中的所有可訪問性方面。讓我們在本節中看看 React 如何支援可訪問性。

ARIA (aria-*) 屬性

WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）是一種標準，它指定了構建完全可訪問的 JavaScript 小部件的方法。它提供了一大套 HTML 屬性 (aria-*) 來支援可訪問性。React 在其元件中支援所有這些屬性。通常，React 將 HTML 屬性限制為駝峰式命名法，但對於可訪問性屬性，它應採用短橫線命名法或 Lisp 命名法，或者與 HTML 文件中一樣。

例如，以下程式碼顯示瞭如何使用 HTML 可訪問性屬性。

<input
   type="text"
   aria-label={labelText}
   aria-required="true"
   name="name"
/>

這裡，

aria-label 用於指定輸入元素的標籤
aria-required 用於指定輸入必須填寫。

請注意，這些屬性按原樣使用（採用短橫線命名法）。

語義化 HTML

透過應用語義化 HTML（article、section、navigation 等）標籤編碼的 Web 文件可以提高文件的可訪問性。在 React 中，有些情況下我們僅使用塊 (div) 來滿足 React 框架的要求。例如，React 不支援在其渲染程式碼中使用多個標籤。為了克服此限制，開發人員可以使用父標籤 (div) 將多個標籤作為子標籤。

function ShowItems({ data }) {
   return (
      <div>
         <dt>{data.title}</dt>
         <dd>{data.description}</dd>
      </div>
   );
}

React 提供了 Fragment 元件來解決此問題。我們可以像下面這樣替換 Fragment 而不是 div：

function ShowItems({ data }) {
   return (
      <Fragment>
         <dt>{data.title}</dt>
         <dd>{data.description}</dd>
      </Fragment>
   );
}

表單

每個輸入都應有標籤，並且標籤應具有描述性，以便理解輸入元素。React 提供了一個特殊的 props htmlFor 來指定特定描述的輸入元素。開發人員可以使用它來建立可訪問的表單。

<label htmlFor="firstName">Firstname:</label>
<input id="firstName" type="text" name="name"/>

鍵盤支援

鍵盤支援是建立可訪問 Web 應用的必要條件。一些需要鍵盤支援的功能包括：

焦點 - React 提供了一個稱為 Ref 的概念來訪問原始 DOM 元素。當應用程式需要原始訪問 DOM 元素時，可以使用 Ref 和 Forwarding Ref 來管理原始 DOM 元素。

跳過連結 - 跳過導航連結是支援可訪問性的必要功能。它們允許使用者在僅使用鍵盤訪問應用程式時一次跳過所有導航。這可以透過智慧錨標籤來實現，React 完全支援智慧錨標籤。

<body>
<a href="#maincontent">Skip to main content</a>
...
<main id="maincontent">
   ...
</main>

滑鼠和指標功能 - 為了建立真正可訪問的應用程式，所有功能都應透過鍵盤訪問。具有高階滑鼠和指標互動的使用者介面應更改為適應僅鍵盤互動的使用者。React 提供了所有事件處理邏輯，可以將預設的基於滑鼠的 UI 修改為基於鍵盤的 UI。

Aria 元件

React 社群提供了許多具有完全可訪問性支援的元件。它們可以按原樣使用，無需任何修改。它們會自動使應用程式變得可訪問。一些具有 aria 支援的第三方元件如下：

react-aria - react-aria 提供了一大套具有完全可訪問性支援的 React 元件
react-modal - react-modal 提供了具有 aria 支援的模態元件。
react-aria-modal - react-aria-modal 是另一個具有 aria 支援的模態元件。
react-select - react-select 提供了具有 aria 支援的選擇元件。
react-dropdown-aria - react-dropdown-aria 提供了具有 aria 支援的下拉列表元件。
react-aria-menubutton - react-aria-menubutton 提供了具有 aria 支援的選單按鈕元件。
react-aria-tabpanel - react-aria-tabpanel 提供了具有 aria 支援的選項卡面板元件。

總結

React 提供了許多功能來建立完全可訪問的、支援 aria 的 Web 應用。建立可訪問的應用程式一直是一個挑戰，而 React 透過提供現成的元件以及從頭開始編寫可訪問應用程式的核心功能來減輕了一些負擔。

列印頁面