如何使VoiceOver確認其內部的SVG鏈接？

我在裏面有一個svg錨點。使用iPhone上的Voiceover，我不能通過點擊它來獲得鏈接。如果我將<img>標籤替換爲內嵌<svg>標籤，我可以。它也適用於OSX。如何使VoiceOver確認其內部的SVG鏈接？

<a href="index.html"><img src="image/btn-arrow-left.svg" alt="Logo"/></a>

我不希望這裏有內聯svg。這對我來說似乎是一個錯誤。但有什麼方法可以讓VoiceOver確認此鏈接？

來源

2015-05-22 Damon

看起來像一個bug，你可以創建一個的jsfiddle？ – unobf

我不確定是否可以從某個地方熱鏈接某個svg ...但它基本上與上述內容完全相同，但是具有可用的SVG。我檢查了幾個svgs和幾個不同的上下文，它似乎在所有情況下都會發生。覺得它可能也是一個錯誤，但我很好奇任何欺騙它進入工作或爲什麼它可能發生的方式 – Damon

您正在使用哪種瀏覽器和操作系統？ – unobf

爲了使SVG在最佳實踐中可用，不幸的是我相信你將不得不使用<svg>標籤。這裏有一些例子：Tips for Creating Accessible SVG。我不認爲這是一個錯誤，我認爲這是設計。

但是，可能有多種方法可以滿足您的要求。如果您想繼續使用現有的代碼，則可能需要在其上放置一個sr-only類的span標籤。

<a href="index.html"><img src="image/btn-arrow-left.svg" alt="To the Left" title="To the Left" aria-labelledby="linkText" /><span class="sr-only sr-only-focusable" id="linkText">To the Left</span></a>

CSS：

.sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    border: 0; 
} 
.sr-only-focusable:active, 
.sr-only-focusable:focus { 
    position: static; 
    width: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    clip: auto; 
}

希望這有助於你的事業。

來源

2015-05-22 20:48:55 cfnerd

我希望它不是通過設計。在圖片標籤中使用svg肯定是正常的，[很好的支持]（http://caniuse.com/#feat=svg-img）。我不確定sr-only方法是否完全可行bc它也適用於正在點擊屏幕的有限視力用戶。 – Damon

@Damon它只是使用svg標籤允許更多的詠歎調屬性和角色，以及輔助技術可以利用的子節點。 – cfnerd

完全明白這一點。但我不認爲內聯應該是他們運作的要求。管理內聯svgs可能會帶來一些挑戰 – Damon

我遇到了在iOS 9.1.1，凡在這樣的情況下，VoiceOver會會承認鏈接一個類似的問題，但不會讀取圖像的alt文本：

<a href="index.html"><img src="image.svg" alt="Logo"></a>

作爲一個相關的問題時，VoiceOver會不承認<img>與svg作爲其src，因此不會讀取其alt文本。

我能解決這個通過添加冗餘role="img"到<img>：

<img src="image.svg" alt="Logo" role="img">

從這些錯誤報告主題來看，這似乎只發生在SVG無無障礙內容。

來源

2016-11-16 09:52:26 mirka

如何使VoiceOver確認其內部的SVG鏈接？

回答

相關問題