1. 程式人生 > >圖標的可訪問性

圖標的可訪問性

控件 意圖 圖標 識別 我們 技術 設備 文本 表示

現代的輔助技術能夠識別並朗讀由 CSS 生成的內容和特定的 Unicode 字符。為了避免 屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容(尤其是當圖標純粹作為裝飾用途時),我們為這些圖標設置了 aria-hidden="true"屬性。

如果你使用圖標是為了表達某些含義(不僅僅是為了裝飾用),請確保你所要表達的意思能夠通過被輔助設備識別,例如,包含額外的內容並通過 .sr-only 類讓其在視覺上表現出隱藏的效果。

如果你所創建的組件不包含任何文本內容(例如, <button> 內只包含了一個圖標),你應當提供其他的內容來表示這個控件的意圖,這樣就能讓使用輔助設備的用戶知道其作用了。這種情況下,你可以為控件添加 aria-label

屬相。

圖標的可訪問性