我的公司正在探索一些我們在設計中普遍使用的場景,我們認識到這些場景可能不會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>
謝謝您的意見。除了刪除span標籤之外,「text-indent」方法有什麼優點? –
我不確定,也許瀏覽器兼容,但正如我所說:不確定。我只是想提一下這個額外的方法,在我的經驗中運作良好。 – Johannes
請勿使用text-indent:-9999px;看起來遠離實際屏幕的文本會減慢iOS和Mac上的VoiceOver,並且它越接近,我觀察的速度越慢。 – QuentinC