您將如何提高SVG 圖表的可訪問性？
<svg class="chart" viewBox="0 0 420 150" aria-labelledby="desc" >
<desc id="desc">Ein Diagramm</desc>
<g class="bar" tabindex="0" aria-describedby="bar1info">
<rect width="40" height="18" />
<text id="bar1info" x="45" y="9.5">4 apples</text>
</g>
</svg>
詠嘆調屬性是否足以將矩形與其圖例聯系起來？有必要嗎？
條形圖/圖表應該是 tabbable 還是我應該避免使用tabindex="0"？
uj5u.com熱心網友回復：
詠嘆調屬性是否足以將矩形與其圖例聯系起來？有必要嗎？
在這種情況下沒有必要，具有標簽的分組沒有任何用途，因為文本元素將在本機公開。
條形圖/圖表應該是 tabbable 還是我應該避免使用 tabindex="0"？
如果這是靜態內容，則沒有，因為專案只有在以某種方式具有互動性時才應該是可聚焦的。
螢屏閱讀器用戶可以在不需要可聚焦的情況下導航圖表。
復雜的 SVG 和圖形
您似乎正在根據提供的代碼制作某種形式的條形圖。
通常，對于復雜的 SVG、圖形等，最好的選擇是對螢屏閱讀器隱藏 SVG 本身并在表格中提供資料。
您可以aria-hidden="true"在 SVG 上使用將其從可訪問性樹中洗掉（focusable="false"僅適用于 IE），或者如果將其作為外部影像包含，則將alt屬性設定為"".
<svg aria-hidden="true" focusable="false"></svg>
<!-- or if external -->
<img src="mysvg.svg" alt="">
然后我們可以在頁面中添加一個表格，其中包含圖表中使用的資料。
如果您的設計允許表格可見，那會更好，但在很多情況下這是不可能的，因此我們可以使用可視化隱藏的 CSS 類來隱藏它。
例子
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}<svg class="chart" viewBox="0 0 420 150" aria-hidden="true" focusable="false">
<desc id="desc">Ein Diagramm</desc>
<g class="bar">
<rect width="40" height="18" />
<text x="45" y="9.5">4 apples</text>
</g>
</svg>
<table class="visually-hidden">
<tr>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apples</td>
<td>4</td>
</tr>
</table>uj5u.com熱心網友回復：
有關于此主題的優秀網路文章。包括以下內容：
- 可訪問的 SVG - CSS 技巧
- 無障礙 SVG：螢屏閱讀器用戶的完美模式 - Smashing Magazine
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/384997.html
下一篇：折疊側邊欄時SVG圖示消失