將SVG內聯或作為映像在可訪問性上有什么區別？

Question

我正在開發一個試圖着重於可訪問性的網頁，並在SVG中創建了不同的圖形。 在線閱讀不同網站后（ 1 ， 2 ，和3 ），我包括<title>和<desc>標簽，並添加屬性role和aria-labelledby使SVGs更容易獲得。

其中一些消息來源似乎（直接或間接地）聲稱內聯使用SVG更好地實現了可訪問性。 因此我對NVDA進行了一些測試，以了解差異，但是我一眼看不到任何差異。

例如，使用簡單的SVG：

 <svg width="100" height="100" viewBox="0 0 100 100" role="img" aria-labelledby="title desc"> <title id="title">Abstract Forms</title> <desc id="desc">Red square containing a white circle containing a blue triangle pointing up.</desc> <g stroke="none" stroke-width="0"> <rect x="0" y="0" width="100" height="100" fill="red" /> <circle cx="50" cy="50" r="40" fill="white" /> <path d="M 50,20 80,70 20,70 Z" fill="blue" /> </g> </svg> 

如果我將其添加到頁面中，則NVDA會讀取“ 圖形。抽象形式。紅色正方形包含白色圓圈，藍色正方形指向上方。 ”

如果我將其保存到myImg.svg文件中，並將其添加到頁面中，如下所示：

<img src="myImg.svg" alt="Red square containing a white circle containing a blue triangle pointing up" title="Abstract Forms" />

NVDA然后讀取“ 圖形。紅色正方形包含白色圓圈，白色圓圈包含朝上的藍色三角形。 ”（與之前相同，只是不閱讀標題）。

這可能是NVDA的事情，其他屏幕閱讀器的做事方式可能有所不同，但是兩者之間似乎沒有太大的區別。 至少不要聲稱內聯SVG更好地實現了可訪問性。

然后，我認為這可能與閱讀其他信息有關； 例如，如果圖形中有一些文本。 因此，我在SVG的末尾添加了<text x="50" y="50" fill="black">Hello World</text> ...但是NVDA讀取的內容與以前相同； 甚至不選擇文本，它就會讀取它（同樣，我不知道這是否是NVDA內容，以及其他屏幕閱讀器是否以其他方式進行了處理）。

所以我的問題是： 將SVG內聯或作為映像有什么區別？ 內聯SVG有什么好處（對於可訪問性）？

Answer 1

您可能已經回答了自己的問題。

Inline-svg被解釋為html網頁的一部分。 因此，您的svg標題和說明也會被解釋並由屏幕閱讀器閱讀。

當使用'img'標簽包含svg時，該文件的處理方式類似於外部文件（例如jpg），因此屏幕僅會解釋/讀取img標簽的'alt'屬性（=圖片描述）讀者。

我目前沒有任何資料，暫時無法測試，但是我認為svg代碼中的鏈接也有差異：內嵌svg中的鏈接由屏幕閱讀器讀取，而外部svg文件中的鏈接則無法。