在一個網頁上可能有許多漂亮的圖片或者是圖形按鍵，但當一般瀏覽器讀取不到圖片的時候，我們只能看到空空的一片，上面打著一個紅色的叉叉，不知道圖片或按鍵長什麼樣子。而需要藉由輔助軟體來閱讀網頁的使用者，他們的軟體並沒有辦法幫他們讀取圖片 ，瀏覽器給他們的訊息，可能只是「沒有了」或者是「空白」。因此，不止是我們看不到圖片，這些特殊的使用者，他們根本不知道圖片的存在意義 ，甚至是根本不知道有圖，有可能因此而漏掉了網頁訊息。所以，我們要為網頁上的圖片和按鍵，加上註解，而且註解並不需要很長很長，而是簡短又最能夠清楚敘述圖片的文字還有按鍵的功能 就可以了。一般的設計可能只是以下這樣子：
但是我們需要將我們的設計加上註解，當我們指向圖片的時候會顯示小小的黃色說明框，例如行政院環保署的首頁圖片：
程式內碼如下：
而如果是圖形按鍵的設計則是如下：
那我們的設計在alt中加入解釋：
也許有時候我們的圖片只是一個空白的圖片，用來做視覺上排版用的，不具任何的意義。這時候，我們的註解就改為：
要記得喔！alt=""這是一個「空字串」，而不是「空白字元」。在""裡面是沒有任何東西的。
或者如果我們的圖片是用來當分隔線的，這時候我們的註解就請改為「橫線」：
再如果說，我們的圖片是用來當做項目符號的，如下圖：
這時候我們的alt可以標示為「*」，這對某些使用者來說，代表著項目符號的開頭：
但是有一種圖片我們並不用設定註解，那就是背景圖片。對於一般瀏覽器來說，讀取不到背景圖片，頂多是看到空白的背景而已，並沒有影響。而對於輔助軟體來說，背景圖片本來就會被 忽略掉，所以不用刻意的去設定註解。
<圖片和圖形按鍵需要加上替代文字說明>下一個步驟