html可訪問性：在僞元素上使用背景圖像定位標籤

我的公司正在探索一些我們在設計中普遍使用的場景，我們認識到這些場景可能不會100％符合WCAG 2.0標準。html可訪問性：在僞元素上使用背景圖像定位標籤

一個這樣的場景是我們有一個錨點標記（例如社交媒體鏈接），它沒有在僞元素上聲明的內容和背景圖像。

我所知道的最好的替代品：

使用title屬性鏈接

上裹着span鏈接添加文字與「屏幕閱讀器只有」類，如從eBay Mind Patterns這個例子：

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

而且是明確的，這是我們正在使用的僞類背景圖像樣式的示例

.pseudo::after { 
    content: ''; 
    display: block; 
    width: 64px; 
    height: 64px; 
    background-image: url('images/pizza.png'); 
}

任何想法哪些更符合？

選項1：標題，內

<a title="pizza title" href="http://pizza.com" class="pseudo pizza"></a>

選項2無文字：屏幕閱讀純文本中的鏈接

<a href="http://pizza.com" class="pseudo pizza"> 
    <span class="clipped">pizza text</span> 
</a>

來源

2017-08-15 Eric Dauenhauer

簡短的回答：喜歡第二個，如果可能的話。

title屬性有點棘手，因爲並不是所有屏幕閱讀器都默認閱讀它。因此，爲了安全起見，100％由屏幕閱讀器覆蓋，請使用<a>標籤內的文本，並根據需要使其成爲只讀屏幕。

來源

2017-08-15 23:26:22

我也會爲第二個選項投票，但另一種方法是實際上在鏈接中有文本內容，但將text-indent: -5000px;（或另一個類似的高負值）添加到其CSS以將文本移出屏幕。

來源

2017-08-15 23:32:37 Johannes

謝謝您的意見。除了刪除span標籤之外，「text-indent」方法有什麼優點？ –

我不確定，也許瀏覽器兼容，但正如我所說：不確定。我只是想提一下這個額外的方法，在我的經驗中運作良好。 – Johannes

請勿使用text-indent：-9999px;看起來遠離實際屏幕的文本會減慢iOS和Mac上的VoiceOver，並且它越接近，我觀察的速度越慢。 – QuentinC

在兩個世界中最好的時候很難選擇，不要試圖去做。

最簡單的辦法：

<a href="http://pizza.com" class="pseudo pizza" title="pizza text" aria-label="pizza test"> 
    <span class="clipped">pizza text</span> 
</a>

爲什麼？由於title屬性將作爲工具提示可供非屏幕閱讀器用戶訪問，屏幕閱讀器可能會在未配置使用剪輯文本時使用它。

使用aria-label也是非常重要的，因爲使用CSS進行視覺隱藏元素可能會導致隨機行爲，具體取決於所使用的輔助技術。例如，一些輔助技術可能會選擇刪除不可見的文本，而其他人則保留它們。

支持所有屏幕閱讀器的最佳選擇是使用三個選項：aria-label用於最近的屏幕閱讀器，用於舊屏幕閱讀器的剪輯文本和用於標準用戶的title屬性。

來源

2017-08-16 12:26:33 Adam

在我有限的屏幕閱讀器（特別是NVDA）使用經驗中，包括文本和標題通常會導致重複的文本。我傾向於不包括所有這三個，因爲在最極端的情況下，它會導致有人聽三次相同的文本，這在我看來並不是一個改進。你有沒有任何輔助技術的例子，它們會選擇不像OP那樣在'.clipped'類中讀取文本？我的理解是'display：none'或'visibility：hidden'是不好的，但是將文字設計爲「難以看清」而不是隱形是可以的。 –

@EricDauenhauer標準瀏覽器不顯示剪切文本，它不會成爲99％用戶的解決方案。雖然瀏覽器，輔助功能插件或自定義CSS /腳本可能會顯示'詠歎調標籤'或'標題'屬性，但他們無法直觀地暴露出自願隱藏的內容。對於視力低下的聾人來說，這是一個無障礙問題（例如老年人）。文本替代計算算法定義了'aria-label'是第一個要使用的，'title'是最後一個（但是隻有標準用戶才能受益） – Adam

html可訪問性：在僞元素上使用背景圖像定位標籤

回答

相關問題