跳到主要內容
:::|

圖示字型(ICON FONT)的無障礙設計

  • 點閱:20582
  • 資料來源:本服務網
  • 日期:108-05-27

圖示字型(ICON FONT)指的是使用小圖示(ICON)做為字體,網頁製作者只要使用代碼或名稱,就可以在網頁上顯示對應的圖示,使用上需要搭配CSS樣式表,是近年來網頁製作上常見到的技術之一。

 

但這種技術的呈現是給視覺正常的使用者,而對螢幕報讀軟體的使用者來說就像無字天書一樣缺少可讀性,所以在使用上必須要另外提供替代內容,才有意義。

 

以下就檢測上常見的圖示字型在無障礙網頁設計上要注意的事項進行說明。

 

  1. 在內容中使用圖示字型做為裝飾:
    網頁製作者為達到網頁編排活潑美觀的目的,有時會在標題或說明文字搭配裝飾用的圖示字型,而這些圖示通常都不具任何意義,所以在螢幕報讀方面是可以被忽略的,而方式就是使用aria-label屬性。 以下的原始碼呈現的是一個h2的標題,並有一個資料夾圖示字型做為裝飾,原始碼部份如下所示:
    裝飾用圖示字型範例圖片
    <h2><i class="fa fa-folder" aria-hidden="true"></i>這是一個段落標題</h2>
    因為資料夾圖示在這個h2的標題中只做裝飾用途,不帶任何意義,所以以aria-hidden="true"的屬性讓螢幕報讀軟體不要讀取這個圖示,且不須提供替代的內容。
  2. 使用有意義的圖示字型取代文字內容:
    網頁製作者有時會使用有意義圖示來取代文字,若未提供該圖示的替代文字或說明,對螢幕報讀軟體來說,會在不知道圖示意義的情況下只讀取讀得到的內容,結果只會讓螢幕報讀軟體使用者獲得不完整的資訊。對於這類的用法,圖示字型就必須提供對應的替代內容。
    下列情境是網頁上對於網頁瀏覽次數的資訊,使用一個示意的圖示取代「瀏覽次數」,原始碼部份如下所示:
    非裝飾用圖示字型範例圖片
    <p><i class="fa fa-eye" aria-hidden="true"></i>10685</p>
    因為忽略了圖示的替代內容,螢幕報讀軟體使用者只會得知10685這個數字,但不知道數字代表的意義為何。修正的方式如下列程式碼:
    <p><i class="fa fa-eye" aria-hidden="true"></i><span class="sr-only">瀏覽次數</span>10685</p>
    利用CSS樣式提供只給螢幕報讀軟體讀取的替代文字「瀏覽次數」,如果使用者是文字瀏覽模式,替代文字則會取代圖示字型顯示在螢幕上,維持網頁的可讀性。
    如果是使用bootstrap模組,可以直接使用.sr-only這個class屬性,將替代內容不顯示在螢幕上,但如果不是,則需另外撰寫CSS樣式。您可以參考WebAIM網站提供的CSS樣式範例:
    {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    }
    *來源網址:https://webaim.org/techniques/css/invisiblecontent/
    另外要注意的是,使用CSS樣式將替代內容不顯示在螢幕上,絕不可以使用display:none; 或visibility: hidden; 或width:0px;height:0px; 的方式,這些是目前最常見到錯誤用法,使用這種方式會直接讓瀏覽器解析時移除相關的內容,造成螢幕報讀軟體無法讀取,而失去做為替代內容的用意。

 

參考資料:

  • Font Awesome Icons (網址:https://fontawesome.com/v4.7.0/icons/)
  • Font Awesome Accessibility (網址:https://fontawesome.com/v4.7.0/accessibility/)
  • Font Awesome On the Web Accessibility (網址:https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility)
  • SVG, Icon Fonts, and Accessibility: A Case Study (網址:https://www.24a11y.com/2017/svg-icon-fonts-accessibility-case-study/)
  • SVG Best Practices (網址:http://web-accessibility.carnegiemuseums.org/code/svg/)
  • 前端的基礎修養:aria-label (網址:https://lepture.com/zh/2015/fe-aria-label)
  • UX accessibility with aria-label (網址:https://dev.opera.com/articles/ux-accessibility-aria-label/)
  • CSS in Action (網址:https://webaim.org/techniques/css/invisiblecontent/)
  • Should I use an aria-label or screen-reader only text? (網址:https://accessible360.com/accessible360-blog/use-aria-label-screen-reader-text/)