Accessibility

讓你的圖標被所有人都喜歡…

圖標是可以傳送大量信息,真正幫助人們理解的方向,標志和符號的接口。我們創建和使用他們,使他們能達到的人最大可能的量是很重要的。

關于圖標字體和無障礙瀏覽

輔助技術的現代版本,像屏幕閱讀器將讀取CSS生成的內容(真棒圖標字體怎么渲染),以及具體的Unicode字符。當我們讀取的標記的默認渲染圖標,assisistive技術可能存在以下問題。

  • 輔助技術可能無法找到任何內容讀出給用戶。
  • 輔助技術可以讀取等的Unicode,這不能匹配什么圖標上下文意思,或者更糟糕的是只是普通的困惑。

使用 Font Awesome CDN 的自動無障礙化功能

Font Awesome CDN可以幫助您更輕松地讓你的圖標為大多數人可能工作的自動化可訪問性支持。你只需要打開一個設置,請使用我們的簡單的語法,并使用將所有的最佳實踐和手工技術的任何圖標下方自動應用。

or

手動讓你的圖標易于訪問

當使用在你的UI圖標,還有手工技術和方法,以幫助輔助技術忽略或更好地了解字體真棒。

用于純粹的裝飾或視覺樣式圖標

如果您使用的圖標添加一些額外的裝飾或品牌,它并不需要,因為它們是瀏覽您的網站或應用程序聽覺公布給用戶。此外,如果您使用的是視覺上的圖標再次強調或添加樣式到內容已經出現在你的HTML,它并不需要重復一個輔助利用技術用戶。您可以確保這不是通過添加aria-hidden="true"將你的字體真棒標記讀取。

<i class="fa fa-fighter-jet" aria-hidden="true"></i>
一個圖標被用來作為純粹的裝飾
<h1 class="logo">
<i class="fa fa-pied-piper" aria-hidden="true"></i>
一個中等輸出壓縮解決方案使數據存儲更小的問題。
</h1>
一個被用作LOGO圖標
<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>
一個用于超鏈接文字前的圖標

語義或交互的目的圖標

如果你使用一個圖標來傳達的含義(而不是僅僅作為一種裝飾元素),確保這個意義也會給輔助技術。這同樣適用于您通過縮略的圖標內容以及交互式控制(按鈕,表單元素,切換等)。有幾個技術來實現此目的:

如果圖標不是一個交互元件

提供替代文本的最簡單方法是使用 aria-hidden="true" 屬性上的圖標,并包括一個額外的元素中的文本,比如一個 <span>, 與相應的CSS在視覺上隱藏的元素,同時保持它訪問輔助技術。此外,您可以在圖標添加一個title屬性,為短視的鼠標用戶的工具提示。

<dl>
      <dt>
        <i class="fa fa-car" aria-hidden="true" title="Time to destination by car"></i>
        <span class="sr-only">Time to destination by car:</span>
      </dt>
      <dd>4 minutes</dd>

      <dt>
        <i class="fa fa-bicycle" aria-hidden="true" title="Time to destination by bike"></i>
        <span class="sr-only">Time to destination by bike:</span>
      </dt>
      <dd>12 minutes</dd>
    </dl>
    
一個被用于通信方式的圖標
<i class="fa fa-hourglass" aria-hidden="true" title="60 minutes remain in your exam"></i>
    <span class="sr-only">60 minutes remain in your exam</span>

    <i class="fa fa-hourglass-half" aria-hidden="true" title="30 minutes remain in your exam"></i>
    <span class="sr-only">30 minutes remain in your exam</span>

    <i class="fa fa-hourglass-end" aria-hidden="true" title="0 minutes remain in your exam"></i>
    <span class="sr-only">0 minutes remain in your exam</span>
    
圖標被使用來表示剩余時間

如果一個圖標代表一個互動的元素

在可調焦的交互元件的情況下,有不同的選擇,包括一個替代文本或標簽的元件,而不需要任何視覺上隱藏的<span>或相似。例如,簡單地添加aria-label屬性與文本說明的交互式元件本身將足以為元件提供可訪問的替代名稱。如果您需要提供鼠標懸停/焦點視覺提示,建議另外使用title屬性或定制提示解決方案。

<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
      <i class="fa fa-shopping-cart" aria-hidden="true"></i>
    </a>
    
一個圖標被用來溝通的購物車狀態
<a href="#navigation-main" aria-label="Skip to main navigation">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </a>
    
一個圖標被用作一個鏈接到導航菜單
<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
      <i class="fa fa-trash-o" aria-hidden="true" title="Delete this item?"></i>
    </a>
    
一個圖標被用作一個刪除按鈕符號與title屬性提供了原生的鼠標提示。

雖然這里的場景和技術可以幫助避免一些嚴重的問題和困惑,他們并非詳盡無遺。有很多復雜的情況和用例,當涉及到可訪問性,如低視力誰需要一個高色彩對比度看到UI用戶。有一些偉大的工具和資源,從學習和處理這些問題在那里。這里有幾個讀建議。

我們將繼續在可訪問性較大的話題對這些工作,但在此期間,讓我們知道任何錯誤或問題.

云南十一选五走势图解