鏈接中的圖標可訪問性（隱藏）

Question

假設我在圓盤傳送帶的兩端都有兩個箭頭，單擊時會旋轉圓盤傳送帶。 我可能有這樣的標記：

<a class="carousel-prev" alt="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" alt="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>

在這種情況下， aria-hidden="true"屬性會破壞可訪問性，還是可以，因為外面的<a>標簽是可標簽的並且使用替代文本？

Answer 1

為什么不只在錨標簽上貼上aria標簽？ 將alt =更改為aria-label =應該很簡單。 無需與屏幕閱讀器類有嵌套的跨度。

<a class="carousel-prev" aria-label="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" aria-label="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>

這是有效的html。 查看https://www.w3.org/TR/html51/textlevel-semantics.html#the-a-element的“允許的ARIA狀態和屬性屬性”部分。 允許所有aria標簽。

Answer 2

alt屬性不是鏈接的有效屬性，因此它不僅是可訪問性問題，而且也是無效的html。 如果您想了解更多信息，請參見此stackoverflow帖子： 將alt標記用於錨鏈接是否正確？

我建議從鏈接中刪除替代項，而應包括一個“僅限screenreader的”類，該類允許讀取文本但從屏幕上隱藏。 請參閱來自a11yproject.com的以下鏈接，以了解如何實現此目的：

http://a11yproject.com/posts/how-to-hide-content/

我建議將代碼更改為如下所示：

 .sr-only { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding:0 !important; border:0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } 

 <a class="carousel-prev"><span class="sr-only">Previous Item</span><i class="icon-angle-left" aria-hidden="true"></i></a> <a class="carousel-next"><span class="sr-only">Next Item</span><i class="icon-angle-right" aria-hidden="true"></i></a> 

Answer 3

首先，WAI提供了一個可運行的輪播的完整示例： https ： //www.w3.org/WAI/tutorials/carousels/

一些個人觀察：

1. 您必須問自己有關為盲人旋轉旋轉木馬的興趣。 為盲人用戶處理UX的一種方法是讓他們忽略他們正在瀏覽的內容是輪播（例如，隨着鍵盤焦點的移動自動切換項目）。

2. aria-hidden不會破壞可訪問性，因為i標記內沒有任何內容，該標記並非旨在用作portmanteau標記（如span ）。

3. 正如@DiscoInfiltrator指出的那樣， alt對於鏈接不是有效的屬性

4. 由於視障用戶的一小部分使用屏幕閱讀器，你應該使用title上的屬性， a標簽，以便讓每個人都能而不是該信息訪問aria-label ，這也是一個不錯的選擇。