本文檔旨在指導開發(fā)者在使用 JavaScript 動態(tài)加載 Tab 內容時，如何正確應用 ARIA (Accessible Rich Internet Applications) 屬性，以確保 Web 應用的可訪問性。重點討論了在僅將當前激活 Tab 的內容添加到 DOM 的情況下，`aria-controls` 屬性的使用，并提供了一種無需使用 `aria-controls` 也能保證可訪問性的替代方案。

ARIA Tabpanel 的正確使用姿勢

在使用 ARIA 構建 Tab 組件時，tabpanel role 用于標識包含 Tab 內容的元素。按照 WAI-ARIA Authoring Practices 的建議，通常會將每個 tabpanel 元素與其對應的 Tab 關聯起來，通過設置 Tab 的 aria-controls 屬性指向 tabpanel 的 ID 來實現。

然而，在某些場景下，我們可能只在 DOM 中添加當前選中的 Tab 的內容，即只有一個 tabpanel 存在。此時，如果其他 Tab 的 aria-controls 指向不存在的 ID，可能會導致輔助技術（如屏幕閱讀器）無法正確識別組件結構。

動態(tài)加載 Tab 內容的 ARIA 實現策略

在這種動態(tài)加載的場景下，是否還需要設置 tabpanel role 呢？ 或者是否有更好的實踐方式？

根據 ARIA 規(guī)范，aria-controls 并非強制屬性。

作者應該將 tabpanel 元素與其 Tab 關聯起來，可以通過使用 Tab 上的 aria-controls 屬性來引用 tabpanel，或者使用 tabpanel 上的 aria-labelledby 屬性來引用 Tab。

這意味著，即使不使用 aria-controls，仍然可以符合 ARIA 規(guī)范。

最佳實踐：保持 Tablist 和 Tabpanel 的緊鄰關系

目前，大多數屏幕閱讀器對 aria-controls 的支持并不完善。因此，最佳實踐是保持 tablist 和 tabpanel 緊密相鄰，避免在它們之間插入其他內容。

ARIA 規(guī)范也建議：

tablist 元素通常位于一系列 tabpanel 元素附近，通常位于其前面。

這樣做的好處是，用戶在切換 Tab 后，可以很自然地繼續(xù)閱讀新的 Tab 內容，或者從 tabpanel 返回到 tablist 進行 Tab 切換。

示例代碼 (HTML):

<div role="tablist">
  <button role="tab" aria-selected="true" id="tab1" aria-controls="panel1">Tab 1</button>
  <button role="tab" aria-selected="false" id="tab2" aria-controls="panel2">Tab 2</button>
  <button role="tab" aria-selected="false" id="tab3" aria-controls="panel3">Tab 3</button>
</div>

<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  <p>Content of Tab 1.</p>
</div>

<!-- Tabpanel 2 和 3 的內容通過 JavaScript 動態(tài)加載 -->

示例代碼 (JavaScript - 動態(tài)加載 Tab 內容):

const tabs = document.querySelectorAll('[role="tab"]');
const tabpanelsContainer = document.querySelector('[role="tablist"]').parentNode; // 獲取 tablist 的父元素，用于插入 tabpanel

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除之前選中的 tab 的 aria-selected 屬性
    tabs.forEach(t => t.setAttribute('aria-selected', 'false'));

    // 設置當前 tab 的 aria-selected 屬性為 true
    tab.setAttribute('aria-selected', 'true');

    // 移除之前的 tabpanel
    const oldTabpanel = tabpanelsContainer.querySelector('[role="tabpanel"]');
    if (oldTabpanel) {
      tabpanelsContainer.removeChild(oldTabpanel);
    }


    // 動態(tài)創(chuàng)建新的 tabpanel
    const tabId = tab.getAttribute('id');
    const panelId = tabId.replace('tab', 'panel');
    const newTabpanel = document.createElement('div');
    newTabpanel.setAttribute('role', 'tabpanel');
    newTabpanel.setAttribute('id', panelId);
    newTabpanel.setAttribute('aria-labelledby', tabId);
    newTabpanel.innerHTML = `<p>Content of ${tab.textContent}.</p>`;

    // 將新的 tabpanel 插入到 tablist 后面
    tabpanelsContainer.appendChild(newTabpanel);
  });
});

注意事項:

• 確保 Tab 切換的邏輯正確，包括更新 aria-selected 屬性和動態(tài)加載 Tab 內容。
• 為動態(tài)加載的 tabpanel 設置 aria-labelledby 屬性，指向對應的 Tab。
• 如果需要，可以添加 aria-live="polite" 和 aria-relevant="all" 到包含 tabpanel 的容器上，以便屏幕閱讀器及時通知用戶內容的變化。 但是，由于這里是替換整個 tabpanel，通常不需要 aria-live。
• 在復雜的應用中，可能需要使用 JavaScript 框架或庫來管理組件狀態(tài)和 DOM 操作。

總結

雖然 aria-controls 屬性在理論上可以用于關聯 Tab 和 Tab 內容，但在動態(tài)加載 Tab 內容的場景下，保持 tablist 和 tabpanel 的緊鄰關系，并使用 aria-labelledby 屬性，是一種更簡單有效的實現可訪問性的方法。 開發(fā)者應根據實際情況選擇合適的 ARIA 實現策略，并始終關注 Web 應用的可訪問性。

以上是使用動態(tài)加載 Tab 內容時的 ARIA 最佳實踐的詳細內容。更多信息請關注PHP中文網其他相關文章！