如何為螢幕閱讀器使用者提供無障礙文字在HTML中的實作方法？

Question

我有一個網站，其中有一個帶有數字的彩色div，例如一個紅色的區塊內部有數字2。顏色對於理解很重要。一個盲人用戶給我發了電子郵件，問我是否可以讓螢幕閱讀器讀出"2red"。我嘗試將其添加為alt="2red"，但他說這沒有任何作用。他認為這可能只會讀取影像的alt標籤。有沒有一種好的方法來做到這一點，適用於div元素？

P粉492959599 · Answer

編輯2020年：目前display:none 或visibility:hidden 似乎普遍導致內容在視覺上和螢幕閱讀器上不可見（在Firefox和Chrome中使用NVDA進行測試），所以下面的陳述是無效的。目前，將內容移出螢幕似乎是為螢幕閱讀器使用者提供內容的唯一方式，也請參閱以下表格： http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

除非在接受的答案中另有說明，至少Chromevox¹ 和NVDA² 也會讀取具有display:none 或visibility:hidden CSS 屬性的元素，如果設定了aria-hidden=false。然而，目前只有在 Chrome（65）中，而不是在 Firefox 或 Edge 中（根據我的測試）。

所以（目前僅在 Chrome 中可行），也可以像這樣做：

仅供屏幕阅读器使用的标题
仅供屏幕阅读器使用的第二个标题
仅供屏幕使用的标题

其中 Chromevox 和 NVDA 會讀取第一個和第二個標題。另請參閱：https://jsfiddle.net/4y3g6zr8/6/

#

如果所有瀏覽器都同意這種行為，那將是比其他解決方案中提出的所有 CSS 技巧更乾淨的解決方案。

^{1_{Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn}}^{#2_{NVDA https://www.nvaccess.org/}}

P粉594941301 · Answer

關於alt文本，你是正確的，它只適用於圖像。但你可以使用aria-label來取代非影像元素的alt屬性，如下所示：

有效的解決方案

ARIA標籤 ★ ★ ★ ★ ★ ★

aria-label（不要與aria-labelledby混淆，後者從另一個元素的文字中提取可訪問名稱）用於為元素添加螢幕外描述性內容，類似於alt=屬性為圖像添加螢幕外描述性內容，當圖像無法顯示時使用。

不同之處在於，aria-label可以用於非影像元素。

测试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;
}

星期三，2014年9月24日

縮排 ★

.screenreader {
    text-indent: -5000px;
}

實際的縮排值並不重要，只要它超出頁面佈局的範圍即可。範例將內容向左移動5,000像素。

此解決方案僅適用於完整的文字區塊。它在錨點、表單、從右到左的語言或與其他文字混合的特定內聯文字上效果不佳。

不起作用

visibility: hidden; 和/或 display:none;

#這些樣式將隱藏文本，使其對所有使用者都不可見。文字從頁面的視覺流中移除，並被螢幕閱讀器忽略。如果要讓內容被螢幕閱讀器讀取，請不要使用此CSS。但是，如果要讓內容不被螢幕閱讀器讀取，請使用它。

width:0px;height:0px

與上述相同，因為沒有高度或寬度的元素會從頁面流中移除，大多數螢幕閱讀器將忽略此內容。 HTML的寬度和高度可能會產生相同的結果。如果要讓內容被螢幕閱讀器讀取，請不要將內容大小設為0像素。