Android – Add Content Descriptions

[Accessibility] Missing contentDescription attribute on image
Missing contentDescription attribute on image
這篇是寫給有強迫症的人看…呃~是像我一樣有強迫症的人看的XD

怎麼說呢,其實在下是蠻討厭看到在 IDE 中給予的修改建議,就像上圖一般會出現在文字底下的黃色抖抖線,所以看到這些訊息都會想辦法去解掉他,但就會好奇出現這個提示的原由何在,所以這篇可以定位成「有強迫症工程師的治療歷程吧」XD

首先,看到這個驚嘆號的提示內容為 [Accessibility] Missing contentDescription attribute on image ,簡單來說,就是少了一個名為 contentDescription 的屬性,這個時候只需要叫出錯誤提示視窗,選擇加入即可以修掉這個警告。

Add content description attribute
Add content description attribute

這個提示是針對一些沒有 “文字描述” 的元件而產生,如這裡提出來說明的 ImageView,這個功能其實跟我們在開發網頁常看到之 img 標籤裡的 title/alt 屬性相似,就是在圖片無法顯示時,系統會先幫我們呈現出這張圖片的描述,以現在來說,大部份的網站都是為了 SEO,而刻意加入這些描述文字,但這個屬性最原先的目的是為了因應早期網路速度較慢,在圖片尚未被載完呈現之前,先在瀏覽器上呈現其描述文字。而隨著時代的發展,有善心人士為了視障朋友們開發出閱讀型的電腦,而這種電腦就是利用這個屬性 “讀出” 圖片的描述,來取代讀不出來的圖片片段。因而,官方希望我們在撰寫 APP 時,亦能多多關照到視障朋友們而特別在 IDE 中加入這個善意的提示。

在開發者文件中,有一篇名為「Developing Accessible Applications」的文件,其中有一節名為「Add Content Descriptions」,這篇從中截出一段來看:

A well-designed user interface (UI) often has elements that don’t require an explicit label to indicate their purpose to the user. A checkbox next to an item in a task list application has a fairly obvious purpose, as does a trash can in a file manager application. However, to your users with vision impairment, other UI cues are needed.

大意是說,一個良好的使用介面設計並不需要多餘的文字來給使用者看,但是這些敘述卻可以幫助到來使用我們這個功能的視障朋友們。其實就這個角度來說,個人是蠻能夠認同的,我們只要一個小動作,也許哪天真的無意的幫助到需要協助的朋友,何樂而不為呢?

最後,再回到強迫症工程師的治療現場XD

Hardcoded string
Hardcoded string

選擇讓 IDE 自動為我們加入 contentDescription 這個屬性後,我們可以看到多出 android:contentDescription="TODO" 這麼一段程式碼進來,此時,警告提示反而多了一個出來!而多出來的這個訊息只是貼心地提醒我們,我們直接將文字寫這裡,不利於進行多語系化(I18N),所以,我們只要將原本的 TODO 改成我們要針對這張圖片的描述,同時將之定義到 resource - string 裡即可,如下圖所示:

complete
complete

將原本的圖片描述字串定義成變數名稱為 desc ,放到 resource – strings裡面,如此,就徹底解掉這個黃色抖抖線的提示嘍!本此療程就到此結束嘍 ^_<~

Loading Facebook Comments ...

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *