製作SVG'符號'可訪問

Question

我在尋找關於將<title>和<desc>與可訪問性的元素相結合的說明。以下是一個有效的實施？

<svg> 
    <title>This is an SVG</title> 
    <desc">Lorem ipsum descriptum...</desc> 
    <use xlink:href="#symbolID"></use> 
</svg> 

或者你會把它放在這樣的<symbol>元素中嗎？

<symbol id="symbolID"> 
    <title>This is an svg</title> 
    <desc>Lorem ipsum ...</desc> 
    <path d="......"/> 
</symbol> 

屏幕閱讀器能夠挑選這些嗎？

Answer 1

添加一個role="img"和屏幕閱讀器可以拿起它。它可能會公佈<title>和<desc>，具體取決於屏幕閱讀器，瀏覽器和每個版本。

若要獲得一些額外的兼容性，您可以添加aria-labelledby來告訴屏幕閱讀器在哪裏尋找明確的可訪問名稱（這也意味着它可能不會公佈<desc>）。有些連擊也可能會因此而讀取<title>兩次，所以您應該簡短。

<a href="#"> foo 
    <svg role="img" aria-labelledby="twitterTitle"> 
    <title id="twitterTitle">Twitter Account</title> 
    <desc>Twitter account for example</desc> 
    <use xlink:href="#twitter"/> 
    </svg> 
</a> 

I forked your CodePen and marked it up。

你可能已經看到了這兩篇文章，但如果沒有：

• Tips for Creating Accessible SVG在SitePoint由羅尼·沃森，
• Accessible SVGs在希瑟Migliorisi CSS-技巧。