可訪問性：`tabindex="-1"` 是否意味着該元素對屏幕閱讀器不可見（類似於 `aria-hidden="true"`）

Question

我有一個網頁，其中一個對話框<section role="dialog">元素在內容頂部打開，導致下面的元素/內容無法訪問。

當對話框打開時，下面的所有內容都接收tabindex="-1"以保持對話框內的選項卡焦點。

下面的內容也接收一個使元素模糊的 CSS 類，並將pointer-events為 none，這樣元素就不能用鼠標點擊，但這些元素仍然在 DOM 中全部存在和可見（它們沒有設置為display: none ）。

兩個問題：

1. 我還需要為所有這些元素添加aria-hidden="true"嗎？
   • 我知道內容將不再可用 Tab 鍵聚焦，但我不確定屏幕閱讀器是否仍會嘗試閱讀內容。
2. 如果我在這些元素上設置aria-hidden="true" ，然后恢復到aria-hidden="false" ，屏幕閱讀器會發現發生了這種變化嗎？
   • 我擔心設置aria-hidden="true"意味着屏幕閱讀器不會再次考慮該元素，即使我稍后將其設置為aria-hidden="false" 。
   • 我是否需要在共享父元素上使用aria-live （對話框和內容都存在）？
   • 即使使用aria-live ，屏幕閱讀器是否會考慮先前設置為aria-hidden="true"元素？

注意：對話框是一個帶有提交按鈕的表單。 有時它可能包含一個Dismiss按鈕，但並非在所有情況下。 該對話框可以充當需要提交表單才能繼續的門。

Answer 1

可訪問性： tabindex=“-1”意味着該元素對屏幕閱讀器不可見（類似於aria-hidden=“true” ）

tabindex="-1"表示項目只能以編程方式聚焦。

aria-hidden="true"表示該項目已從可訪問性樹中完全刪除。

在您考慮屏幕閱讀器用戶可以通過<h1>導航到<h6> （例如）之前，它們可能看起來相同。 添加tabindex="-1"沒有任何區別，因為標題無論如何都不可聚焦，而aria-hidden="true"本質上與說display: none相同，這意味着屏幕閱讀器根本無法訪問它。

考慮到這一點，您的問題的答案變得簡單：

我還需要為所有這些元素添加 aria-hidden="true" 嗎？

是的，您確實需要添加aria-hidden="true"因為人們可能仍會嘗試通過Headings 、 Links等進行導航，這些無論如何都不可聚焦，但仍然可以通過虛擬光標訪問。

如果我在這些元素上設置 aria-hidden="true"，然后又恢復為 aria-hidden="false"，屏幕閱讀器會發現發生了這種變化嗎？

是的，屏幕閱讀器不會有問題。 您不需要像aria-live這樣的任何東西來讓屏幕閱讀器知道這些更改。 事實上，如果你添加了aria-live你會讓事情變得更難訪問，因為它會在整個部分對 DOM 進行每次更改時宣布。

你需要考慮什么

管理焦點- 當您關閉對話框時，確保焦點恢復到打開它的按鈕，這是預期的行為。 （確保在您制作父項/項目aria-hidden="false"后執行此操作，否則可能會導致意外行為）

Esc 關閉- 確保 Escape 鍵關閉對話。

如何輕松構建頁面

實現所有這一切的一種簡單方法（如果您能夠重組所有內容）是在主要內容之外添加所有對話（您可能會在運行您的網站時收到“所有項目都應包含在地標中”的警告）可訪問性檢查器，但忽略該指南，因為無論如何在頁面加載時都不應訪問您的對話）。

例如

<header aria-hidden="false"></header>
<main aria-hidden="false"></main>
<footer aria-hidden="false"></footer>
<section class="dialogue" role="dialogue" aria-hidden="true"></section>

切換到

<header aria-hidden="true"></header>
<main aria-hidden="true"></main>
<footer aria-hidden="true"></footer>
<section class="dialogue" role="dialogue" aria-hidden="false"></section>

這樣，您只需要添加/切換aria-hidden 4 個項目，因此可維護性很容易。

同樣為了向前兼容，您可以考慮使用<dialogue>元素