為屏幕閱讀器設置文本並在屏幕閱讀器中隱藏子項

Question

我有一個 iframe，其中提供任意內容。 我想確保屏幕閱讀器無法訪問 iframe 中的內容，並指定選擇 iframe 時應讀出的屏幕閱讀器。

我的期望是在頁面上的不同元素之間myDiv ， myDiv被選為一個單元，並讀出Unknown content 。

我嘗試了以下

<div id="myDiv" title="Unknown content">
  <iframe id="myIframe" aria-hidden="true">
    {arbitraryContent}
  </html>
</div>

我面臨的問題是

1. 並非 iframe 中的所有內容都被忽略。 也許這是因為aria-hidden不適用於可聚焦的子元素。
2. Unknown text並不總是被讀取，尤其是在子元素可聚焦的情況下。
3. 我還嘗試在 iframe 上設置tabIndex=-1 。 然而，這會導致所有元素（包括myDiv ）無法通過鍵盤選擇。

實現我正在尋找的目標的正確方法是什么？

Answer 1

如果您阻止屏幕閱讀器閱讀整個 iframe 並且它仍然具有可聚焦元素，那么，是的，您有一個致命的可訪問性問題：您可以聚焦某些東西，但不允許屏幕閱讀器知道聚焦的是什么。 那么該怎么辦 ？ 它應該什么都不說，還是違背你的定義？

從技術上講，這意味着aria-hidden=true 中不應該有任何可聚焦的元素。 您必須確保它永遠不會發生。

但是，您必須問自己的一個好問題是，為什么要完全隱藏 iframe 中的內容，或者換句話說，明確地使其完全無法訪問。

如果您擔心不受您控制的內容可能會破壞您頁面的可訪問性，那么

從管理上來說，基於 WCAG 合規性的認證知道這個問題並且通常接受例外情況，即不考慮您無法控制的事情。

實際上，作為屏幕閱讀器用戶，可訪問性差的 iframe 可能確實給人的印象是您網站的整體可訪問性總體上很糟糕，但擁有一些部分可訪問的內容肯定比什么都沒有要好。 你最好刪除 aria-hidden=true。 即使您知道它不是很容易訪問，無論如何也要留出一點訪問它的機會，而不是絕對阻止它。 也許內容的可訪問性會隨着時間的推移而提高。

例外情況是 iframe 的內容令人反感、裝飾性或在您的頁面上下文中沒有帶來任何真實信息。 典型的例子包括廣告和各種小部件（天氣、時鍾、社交網絡共享等）。對於那些，繼續，保留 aria-hidden=true 並刪除 iframe 的所有可聚焦元素。 無論如何，它們只是無用的噪音，如果完全跳過它們，也不會后悔。