在《數位產品中的可訪問名稱與替代文字怎麼寫？（上）》中，我們提到了 Icon、Icon 按鈕與 Logo 等常見要素的可訪問名稱的思路。接續上一篇文章， 這篇文章將介紹其他常見的圖像要素， 例如： 具有功能性的照片、 傳遞情感的圖像，或是圖表等等。
在文章最後也會整理一些 W3C 提到的小技巧總結， 希望能幫你在做產品的過程中讓思考替代文字更有效率！
除了上篇文章中出現的功能性的按鈕或是 Logo 之外， 有時候我們也會在產品或是網站上使用圖像來輔助理解或是傳遞情感與品牌形象。
用於作為輔助資訊的圖像
有時候我們會使用圖文搭配的方式來增進使用者的理解， 這時候可以使用一個簡短的替代文字來描述在文字資訊中沒有呈現的視覺資訊。
例如在下面的例子中，網站利用圖片來輔助說明如何使用 App 掃描 QR Code。 由於圖片想傳達給使用者的內容是掃描按鈕的位置，而下面的文字資訊已經提示使用 App 掃描 QR Code，因此我們可以根據產品脈絡與使用者習慣來思考替代文字，例如：「掃描按鈕位於 App 的 Header 上」 來提供與圖像同等的資訊。
傳遞簡單資訊的圖像
有時候我們會使用圖像來說明或是描述產品如何使用等等， 如果想要傳達的步驟或資訊可以用簡潔的一兩句話總結，就可以把那個說明作為替代文字。
一個常見的場景可能是在產品的 Help Page 中， 使用圖片或是動圖來教導使用者如何使用一個功能。在下面的 Slack 的例子中，Slack 使用一張動圖來教導使用者如何從下拉選單中邀請其他人。
根據想要透過圖片來說明的資訊， 我們可以加上替代文字，例如 Slack 加上：「展示如何在 Slack 工作空間功能表中選取「邀請人員加入」選項，以邀請人員加入工作空間的流程」
傳遞情感的圖像
有時候我們也會透過圖片來傳遞情感訊息以表達品牌調性與特質等。 這時候我們可以思考想要透過這張圖像傳遞的印象來決定替代文字如何寫。
例如在 Airbnb 的招聘網站上，首圖就是一張大大的圖片，上面有三個員工在辦公室開心聊天的樣子， 這種時候就可以根據想要透過這張照片傳遞的形象來決定替代文字。例如 Airbnb 就加上：「三位員工坐在辦公室中庭的咖啡桌旁，熱烈地交談著。（Three employees engaged in lively conversation while seated around a coffee table in the office atrium.）」
在傳遞情感圖像的場景中， 也可以試著透過形容詞的描述來增強想要傳遞的形象。
在我們的圖表系列中， 有更詳盡地說明過圖表以及無障礙的關係， 這邊就不再做太多說明，歡迎大家去看看圖表系列文章！
這邊小小總結一下 W3C 提到的方法：
- 總結圖表想要說明的內容
- 在圖表旁邊附上詳細說明的連結或位置
- 在文章中說明圖表內容
常見的應用場景例如： 在產品網頁上想要透過數據圖表來展示趨勢或是使用者的滿意程度等等。 根據使用圖表的情境， 我們可以思考怎麼下圖表替代文字。
在 Dropbox 的調查文章中 出現了一張他們調查人們願意多久去辦公室跟同事面對面工作的圓餅圖。 根據文章的脈絡， 我們可以思考如何呈現資訊，例如：「46%的人選擇一季一次（一年四次），21%的人選擇半年一次（一年兩次）」
呈現趨勢的時候， 可能可以詳細描述成：「公司從 2015 年到 2023 年的營業額呈現強勁的增長趨勢，從 2015 年 2 億五百萬美元增長到 2023 年的 70 億美元。2024 年截至 Q2 營業額為 38 億美元」
延伸閱讀我們的圖表系列來更了解圖表與無障礙：敲開圖表大門，要看、用聽或觸摸？
以上就是常見的圖像要素的介紹啦！ 替代文字正如其他網站與產品中的要素一樣， 結合圖像的使用情境才能寫出最適合的替代文字。雖然文章中介紹一些大原則， 但相信透過這篇文章與實際的案例， 你也更能了解替代文字的作用，以及如何下好的替代文字。 W3C 有一頁彙整常見的問題及小技巧， 也提供幾個常見的給大家參考：
- 將最重要的資訊放在最前面
- 在能夠達成目的的情況下，盡量簡短替代文字的長度
- 跟在任何的文字中一樣， 使用標點符號能夠讓替代文字中的資訊更容易被理解
- 當需要隱藏圖像的時候注意兩個引號中間不要放空格：否則可能會無法有效地隱藏圖像
- 不需要額外去強調「圖像」、「Icon」或「照片」等：由於螢幕閱讀器會告訴使用者這個資訊， 為了避免資訊的冗余，除了一些特殊需要區分圖像類型的場合之外，W3C 建議大家不用加上這些資訊
好了， 以上就是這個系列的所有內容！ 你還有遇到哪些需要加替代文字的情況呢？ 歡迎透過文章或是粉絲專頁留言告訴我們， 也許我們還可以做一個番外篇來一起討論唷！
