P粉4929595992023-08-23 15:43:06
編輯2020年:
目前display:none
或visibility:hidden
似乎普遍導致內容在視覺上和螢幕閱讀器上不可見(在Firefox和Chrome中使用NVDA進行測試),所以下面的陳述是無效的。
目前,將內容移出螢幕似乎是為螢幕閱讀器使用者提供內容的唯一方式,也請參閱以下表格:
http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html
除非在接受的答案中另有說明,至少Chromevox1 和NVDA2 也會讀取具有display:none
或visibility:hidden
CSS 屬性的元素,如果設定了aria-hidden=false
。然而,目前只有在 Chrome(65)中,而不是在 Firefox 或 Edge 中(根據我的測試)。
所以(目前僅在 Chrome 中可行),也可以像這樣做:
<h1 aria-hidden="false" style="display: none;">仅供屏幕阅读器使用的标题</h1> <h1 aria-hidden="false" style="visibility: hidden;">仅供屏幕阅读器使用的第二个标题</h1> <h1 aria-hidden="true">仅供屏幕使用的标题</h1>
其中 Chromevox 和 NVDA 會讀取第一個和第二個標題。 另請參閱:https://jsfiddle.net/4y3g6zr8/6/
#如果所有瀏覽器都同意這種行為,那將是比其他解決方案中提出的所有 CSS 技巧更乾淨的解決方案。
1Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn#2NVDA https://www.nvaccess.org/
P粉5949413012023-08-23 10:57:50
關於alt文本,你是正確的,它只適用於圖像。但你可以使用aria-label來取代非影像元素的alt屬性,如下所示:
aria-label
(不要與aria-labelledby
混淆,後者從另一個元素的文字中提取可訪問名稱)用於為元素添加螢幕外描述性內容,類似於alt=
屬性為圖像添加螢幕外描述性內容,當圖像無法顯示時使用。
不同之處在於,aria-label
可以用於非影像元素。
<div aria-label="测试A"><p aria-hidden="true">测试B</p></div> <!-- 结果(屏幕阅读器):测试A 结果(常规):测试B -->
新增aria-hidden
屬性可以隱藏內部文字。
.screenreader { position: absolute !important; /* 脱离文档流 */ height: 1px; width: 1px; /* 几乎折叠 */ overflow: hidden; clip: rect(1px 1px 1px 1px); /* 仅IE 7+支持不带逗号的clip */ clip: rect(1px, 1px, 1px, 1px); /* 其他所有浏览器 */ }
裁切用於完全隱藏1像素 x 1像素的元素,否則它仍然會在螢幕上可見。
.screenreader { position: absolute; left:-9999px; } <div>星期三<span class="screenreader">,2014年9月24日</span></div>
.screenreader { text-indent: -5000px; }
實際的縮排值並不重要,只要它超出頁面佈局的範圍即可。範例將內容向左移動5,000像素。
此解決方案僅適用於完整的文字區塊。它在錨點、表單、從右到左的語言或與其他文字混合的特定內聯文字上效果不佳。
#這些樣式將隱藏文本,使其對所有使用者都不可見。文字從頁面的視覺流中移除,並被螢幕閱讀器忽略。如果要讓內容被螢幕閱讀器讀取,請不要使用此CSS。但是,如果要讓內容不被螢幕閱讀器讀取,請使用它。
與上述相同,因為沒有高度或寬度的元素會從頁面流中移除,大多數螢幕閱讀器將忽略此內容。 HTML的寬度和高度可能會產生相同的結果。如果要讓內容被螢幕閱讀器讀取,請不要將內容大小設為0像素。