嘗試著構建自己的Icon圖標系統

有一天我遇到一個問題？

在一個複雜的單頁應用中你會選擇icon fonts還是內聯 SVGs呢？對於這兩種方式又有哪些具體的可訪問性問題呢？可訪問性對我們來說至關重要，因為我們的產品用戶是學校。我這樣問的目的是，我們正在統一和構建一個Icon圖標系統。

我覺得我們不應該根據建設什麼樣的網站來做出選擇，那麼我們在做出選擇時就忽略我們要建設什麼樣的項目。

我同樣認為SVG圖標系統比Icon字體圖標更好 ，我們先這樣假設。

可訪問性的問題是很有趣的一個點，讓我們來看一下。

使用圖標有如下兩種方式:

獨立的:圖標本身傳達想要表達的意思來（就是我們看到一個圖標不用文字描述就能知道這個圖標的意思）。

裝飾性的:圖標只是一個裝飾性的視覺糖（讓排版視覺更好看）—— 圖標周圍的文字去傳達想要表達的意思。

獨立圖標的模式

我用Heather Migliorisi編寫的可訪問的SVGs來說明這種模式。如下所示：

Short Title (e.g. Add to Cart) A friendly looking cartoon cart icon with blinking eyes.

裝飾性圖標的模式

對於裝飾性的圖標你要知道，即使圖標不存在也沒有任何的影響。所以，我們來把圖標隱藏：

Add to Cart

但是... 圖標應該還有其他的用法吧

恭喜你答對了！ 所以你可能要提前準備好一些隨時能夠被以獨立的方式使用的有意義的圖標。然後，如果他們被當做裝飾性的方式使用時，你需要在標籤上拿掉屬性。

所以你的圖標系統看起來可能像下面這樣...

或者這樣

或者這樣

{:standalone => true} %>

或者其他樣子.

假設你必須要使用字體圖標

好戲開場了….

很多的字體圖標的用法就像這樣:

或者上面方法的變異，像使用「專用區」的屬性值一樣或者為每個圖標生成一個唯一的類名：

.icon-camera:before { content: "e90f";}

製作一個獨立的圖標是很容易的一件事情，你只需要把這個屬性加到元素上就可以了。

如果你要製作一個有意義的獨立圖標。那你就要寫更多的HTML了。來自於 Bulletproof Icon Fonts，這是被推薦的一種結構：

Menu

現在圖標本身是被隱藏起來的（因為它用了一種奇怪的無意義的字體），但是那裡有可被AT（非傳統技術）按預期讀取的真實文本存在。你也可以在視覺上隱藏文本。假設你有一些功能測試，下面的CSS是根據需要隱藏/顯示的：

.icon-fallback-text .icon { display: none;}supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .icon { display: inline-block;}.supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .text { clip: rect(0 0 0 0); overflow: hidden; position: absolute; height: 1px; width: 1px;}

還記得鏈接圖標嗎？

如果一個圖標（不管什麼類型的圖標）是一個鏈接，你要確保在那裡有一個正常的HTML文本，並清楚的知道他要鏈接到哪，或者你提供一個：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！