屏幕閱讀器是否可以讀取具有 aria-hidden 和 css visible:hidden 屬性的元素？

Question

我有一個移動菜單，我在桌面上使用visibility:hidden了該菜單visibility:hidden 。 如果可能，我還想在不使用display:none或hidden=hidden情況下從桌面上的屏幕閱讀器中隱藏此菜單。

aria-hidden=true足以防止屏幕閱讀器讀出所有隱藏的菜單鏈接？

例如。 默認（屏幕閱讀器看不到菜單內容）

<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="true" style="visibility:hidden">Menu Content</div>

例如。 活動（屏幕閱讀器看到的菜單內容）

<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="false" style="visibility:visible">Menu Content</div>

我想阻止屏幕閱讀器在激活切換器之前閱讀所有菜單內容鏈接。

Answer 1

您的問題很難回答，因為每個屏幕閱讀器（如每個瀏覽器）都將使用不同的功能實現。 最好的辦法是選擇您想要特別支持的屏幕閱讀器，然后閱讀他們的文檔以確保您的網站按預期運行。 即便如此，您也可能需要進行一些實際測試。

根據WebAIM （截至 2014 年 1 月）：

• JAWS 是最常見的主要屏幕閱讀器
• VoiceOver 和 NVDA 也很常用（超過 33%）

---

更新：根據WebAim 用戶調查 #8（2019 年） ：

• NVDA 和 JAWS與主要屏幕閱讀器並駕齊驅，占據了它們 80% 以上的市場份額。 VoiceOver 位居第三，市場份額約為 13%
• 講述人也很常用（超過 30%）

---

根據http://webaim.org/techniques/css/invisiblecontent/ ：

 visibility: hidden; and/or display:none;

這些樣式將對所有用戶隱藏文本。 文本從頁面的視覺流中移除並被屏幕閱讀器忽略。 如果您希望屏幕閱讀器閱讀內容，請不要使用此 CSS。 但請務必將其用於您不想讓屏幕閱讀器閱讀的內容。

 width:0px, height:0px or other 0 pixel sizing techniques

如上所述，因為從頁面流中移除了一個沒有高度或寬度的元素，所以大多數屏幕閱讀器會忽略這個內容。 HTML 寬度和高度可能會給出相同的結果。 如果您希望屏幕閱讀器閱讀內容，請勿將內容大小設置為 0 像素。 使用 font-size:0px 或 line-height:0 樣式的內容可能會起作用，但元素仍會占用屏幕上的水平空間。 所有這些技術都可能導致搜索引擎懲罰，因為它們可能被解釋為惡意的。

 text-indent: -10000px;

這種方法將內容向左移動 10000 像素 - 因此離開可見屏幕。 實際值無關緊要，只要它位於屏幕外即可。 屏幕閱讀器仍將閱讀這種風格的文本。 但是，如果鏈接或表單元素被賦予這種樣式，則可能會導致焦點指示符（圍繞焦點鏈接的虛線或“行軍螞蟻”）從元素應位於頁面中的位置延伸到該位置它實際上位於（向左的方式）。 這不是很漂亮。 這種方法也會導致從右到左的語言問題。 因此，如果元素不包含可導航元素，這種方法可能是一個可行的選擇，盡管有更好的技術可用。

CSS 剪輯

position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px);

使用 CSS 隱藏或剪輯不適合 1 像素可見區域的內容的相當現代的技術將從本質上隱藏內容可見，但仍允許現代屏幕閱讀器閱讀。

絕對定位屏幕外的內容

使用 CSS 將隱藏元素移動到屏幕外的位置通常被認為是視覺隱藏內容的最有用和最容易訪問的方法。

根據http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/ ：

但是有一個問題（不是總是存在......）。 做了一個很簡單的測試頁面，發現瀏覽器和屏幕閱讀器的支持還是有點欠缺。 在我可以使用的屏幕閱讀器中，只有 VoiceOver 和 ChromeVox 會忽略用 aria-hidden 隱藏的內容。 JAWS 確實支持它（當與 Firefox 一起使用時），正如 John Foliot 在HTML5 Accessibility: aria-hidden and role="presentation"和 Steve Faulkner 在HTML5 Accessibility Chops: hidden and aria 中所做的更詳細的測試所示-隱藏。 （約翰和史蒂夫都更詳細地介紹了相關屬性，因此我鼓勵您閱讀這兩篇文章。）