返回部落格
實用的 SVG 可存取性指南
SVG 可存取性的第一步，是判斷圖形是否傳達資訊，還是僅用於裝飾。這個判斷決定它需要怎樣的標籤、角色和替代內容。
先判斷圖形類型
裝飾性圖示應對輔助技術隱藏。資訊型圖片需要可存取名稱，複雜圖表和示意圖還需要更長的文字替代，用來表達關鍵關係。
提供合適的可存取名稱
根據嵌入方式使用周圍文字、aria-label、aria-labelledby 或 title/description 元素。避免重複相鄰的可見標籤，否則螢幕閱讀器會重複朗讀。
保留焦點和對比度
可互動 SVG 控制項需要鍵盤操作、清楚角色和可見焦點。描邊、填色與狀態變化應在淺色、深色、強制色彩和高對比環境中保持足夠對比。
測試最終使用環境
同一 SVG 作為圖片、inline markup、CSS 背景或元件時可能表現不同。應使用鍵盤和至少一種螢幕閱讀器測試最終發布的嵌入方式，而不是只檢查原始檔案。