想像一下,當我們需要購買某些商品或是需要取得某些資訊時,在 Google 搜尋欄輸入你要查找的產品名後進入到網頁,發現大量的資訊以及圖像一瞬間佔滿了螢幕,你可能會開始搜尋的動作,接著網頁列出你所查找的產品,或者剛進入網頁時,有一個一直想買但遲遲下不了手的產品在打折,它位在主頁的輪播廣告裡的第一個,左右兩旁有許多引人注目的小廣告。
可惜,這個打折的產品沒有獲得大量的點擊率,也沒有成功提升轉換率,於是行銷主管提出要做 A / B 測試,連同設計人員以及工程師一起加入;大多數的時候,為了引起使用者的注目,行銷或社群人員更多會專注在圖像和文案上的創意,也為了因應不同的社群平台特性來調整圖像的尺寸和字數,這些過程中有時候,甚至大部分會忽略無障礙設計。因此這篇主要提供行銷、社群人員或內容創造者會需要注意到的無障礙設計小細節。
由於大部分的圖片設計都交付給設計師,色彩上的對比和所使用的字型粗細等,設計師都會產出一定水準的設計圖,但若遇到緊急事件或是設計師任務過多的狀況下,你很有可能會需要自己產圖,這裡有幾個工具可以提供你檢查對比。
而說到色彩,就必須要談到「色覺辨認障礙」,嚴重稱為「色盲」,輕微地則稱為「色弱」。在台灣約莫有 115 萬人是色覺辨認障礙,最為普遍的是紅綠色弱,但從日常生活到大多數的數位設計中,紅綠一直都作為重要資訊的傳達,例如:紅綠燈、手機電量顯示、表單的填寫成功或失敗等,都看得到這兩種顏色的廣泛使用,對於行銷或社群人員來說,這兩種顏色的雖然並不見得會常用在廣告圖像中,但我們可以透過 Adobe 提供的 Color blind save 工具(該工具也提供色彩對比工具)來檢查色彩的使用上是否有衝突,倘若必須使用的話,也可思考是否有相對應的標示可以輔助解釋,在 We are color blind 的範例頁面中,也可以看到一些生活實例。
另外若進行跨國性的行銷,對顏色的應用也要考慮到該國的文化風俗,例如麥當勞的網站在一些歐洲國家,不再只是以黃紅色為主,為了更貼近當地對於環保的意識,可以看到過往以紅黃為主的廣告,開始出現以綠色為背景色的,甚至有些因為宗教因素,在以色列特定區域的麥當勞則有將傳統品牌色改為藍白色,並且加入”Kosher” (符合猶太教教規的食物) 字眼。
網站是一個企業的形象,動畫或廣告影片的呈現是必須交付工程師去處理,如果首頁有自動播放的動畫或影片,建議關閉「自動播放」,另外也必須提供「跳過內容」或「停止」按鍵來給予跳出或暫停的選擇。
為什麼要建議自動播放功能關閉呢?首先自動播放會難以讓一些認知障礙的使用者集中注意力;過度的光或動畫刺激會可能會造成癲癇或身體的反應;,再來是對於視障人士,由於使用螢幕閱讀器,自動播放會干擾閱讀器,造成無法聽到閱讀器所讀取的內容。若真要在網頁上建置廣告影片或動畫,盡可能地做到,在一到兩次的輪播後自動停止;提供「播放」按鍵,讓使用者自行決定是否觀看。
如果行銷和社群只靠文字,效果是非常有限的,在產出好的設計前,也要為每一個圖片提供適切的「描述」。良好的描述不但可以提升數位無障礙的體驗外,也能提升 SEO 排名的方法之一,以下是常見的社群平台加入圖片描述的作法:
Facebook (臉書)
當你選擇好要上傳的圖片後,點擊「編輯」,就會看到如下圖的視窗,所幸 Facebook 有「自動替代文字」來協助產生圖片說明,不過由於是 AI 自動建立的,有時候並不符合人類可以理解的說明,因此建議還是為圖片加入適合且易理解的描述。

Instagram (IG)
IG 也提供了增加替代文字,當上傳照片後,可以點擊「進階設定」,接著點擊「撰寫替代文字」,就可以為圖片加入描述。在 Hashtag 上,由於中文並不會造成太大影響,但如果必須使用英文相關的,建議使用駝峰式的寫法 (每個單字的第一個字母大寫),例如:#GameLaunchCampaign。

Twitter (推特)
Twitter 在上傳圖片時,右下角會出現一個 “+ALT” 的按鈕,點擊之後就可以為你的圖片加入描述,若你忘記加入描述, Twitter 的自動偵測機器人會再之後提醒。

Linkedin (領英)
對於 B2B 的行銷,領英一直是企業曝光的最佳平台,在新增圖片後,可以看到一個 「Alt 文字」,點擊下去後就可以新增圖片描述了。

以上概略地介紹作為行銷或社群人員可以在無障礙設計上留心的部分,若情況或時間允許的話,其實行銷或社群人員在構思線上活動的時候,可以詢問設計師針對廣宣圖的排版以及顏色的使用,若活動需要建立新的網頁,就內容以及排版上建議在前期的規劃上,與相關部門進行調整,畢竟良好的網頁結構以及內容,都是有助於 SEO 的提升,那這次的分享就到這邊,我們下次見。






