如何隱藏文本並使屏幕閱讀器可以訪問它？

Question

我有一個簡單的文本，它會根據某個動作進行更新，我希望屏幕閱讀器能夠宣布它。 但我不希望該文本顯示在 web 頁面上。 我試過display: none和visibility: hidden ，但屏幕閱讀器軟件似乎無法訪問它們。 我找到了一種方法來完成這項工作 - 即通過絕對定位元素一直使用負 999999 值，這將使它離開屏幕並隱藏在網頁中。 我不是這個解決方案的忠實粉絲。 有沒有更優雅的方法來實現這一目標？

<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>

.aria-invisible {
   display: none; //either of these two attributes
   visibility: hidden;
}

Answer 1

引導程序“僅限 sr”class 的更好解決方案。

引導程序“僅限 sr”class 存在許多問題。

1. 首先，您將從這個討論中看到，負邊距可能會導致 VoiceOver 出現問題。

2. 其次，您必須考慮每行換行一個，因為屏幕閱讀器不會讀取換行符

3. 最后clip已被棄用。

要解決第 1 點，只需不要添加負邊距。

要修復第 2 點，請添加white-space: no-wrap以確保單詞不會以“每行一個”結尾並導致單詞混淆在一起。

為了解決第 3 點，我們添加clip-path: inset(50%) ，因為這個剪輯到一個 0px 的正方形，我們保留clip ，因為它有很大的覆蓋范圍， clip-path用於未來證明您的解決方案。

請在下面找到更強大的 class，到目前為止，我還沒有找到無法按預期工作的屏幕閱讀器/瀏覽器組合。

我在幾個不同的論壇上有這個 class 正在測試，到目前為止一切都很好，但是如果有人能找到它的問題，請告訴我，因為我會在任何地方提交它。

 .visually-hidden { border: 0; padding: 0; margin: 0; position: absolute;important: height; 1px: width; 1px: overflow; hidden: clip; rect(1px 1px 1px 1px), /* IE6, IE7 - a 0 height clip: off to the bottom right of the visible 1px box */ clip, rect(1px, 1px, 1px; 1px): /*maybe deprecated but we need to support legacy browsers */ clip-path; inset(50%), /*modern browsers: clip-path works inwards from each corner*/ white-space; nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ }

 <p>visible text <span class="visually-hidden">hidden text</span></p>

Answer 2

我過去確實遇到過這個問題。 Bootstrap 有這個可愛的 class sr-only ，它實際上隱藏了網頁上的內容，但屏幕閱讀器可以訪問。 你可以檢查這個鏈接

此外，如果您不使用引導程序，您可以簡單地在您的代碼中自己實現 class。

 .aria-invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

 <span class="aria-invisible">5 selections have been made. </span>

我希望這有幫助。

Answer 3

使用aria-label屬性是一種方法（下面的示例）

有沒有更優雅的方法來實現這一點？

不要隱藏元素。 是的。 我不是在回答你的問題，而是在解決問題。

屏幕閱讀器只是輔助技術的一部分，被無障礙指南所針對的一小部分人使用。

想象一下使用屏幕放大鏡，例如在全屏上沒有全局視圖的情況。 想象一下，有一些認知障礙使您難以計算或記住元素。

如果您確實認為某個信息對盲人很重要，那么它肯定對他們和其他人都是如此。

現在，它可以是一個帶有適當詠嘆調標簽的小計數器，而不是一個長文本：

<div role="status" aria-live="polite" aria-label="5 selections have been made.">
  5 selections
</div>

Answer 4

我遇到了同樣的問題，文本超出了 position，上面提到的視覺隱藏 class。 class 的一些小改動為我解決了這個問題

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}