遵循Web標準的思想，網頁要表現出一種親和力。那么，針對殘障用戶來說，其“閱讀”器可不能讀取圖像上傳遞的信息的。
所以我們會采用一種Using Background-Image to Replace Text的方法，也就是將圖像以背景圖像的方式“插入”網頁顯示，同時為了讓殘障人士能了解該部分信息，顯示該圖像的區域用文本加以說明；但又為了讓正常人不為既看到背景圖像又看到圖像上的文本而混淆，所以我們又將這些文本隱藏。
或許我們也會說我們可以給圖像加alt、加title，這樣正常用戶能看得見，殘障用戶也“閱讀”到。不過，我們再想想，Web標準還推薦使用合理的XHTML文檔結構，對于插入圖像這樣一個“實體”，插入到網頁是什么圖像就是什么圖像了，當我們需要替換圖像時，我們修改HTML文件，若有很多頁面呢（我批量改_-!）。所以這部分圖像的插入就“親和力”和“擴展性”而言，都建議使用“背景圖像” “隱藏文本”的方法。當然對于圖像熱區鏈接我們另做討論。
說的都不大理解，還是舉例子。
有這樣的一張圖像，我們要插入到網頁顯示，那么正常情況下我是使用“<img />”標簽的
<img src="http://huoche.7234.cn/images/jb51/2scnjf1zulk.gif" atl="hello,world" /></p><p>
[Ctrl A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]
其中，因為瀏覽器可能顯示不了圖像中文本的字體樣式，所以我們做成圖像顯示在網頁中。在當我們需要為這種圖像中的文本新做另外一種字體的圖像，那么現在來解決新圖像的顯示，我們就必須要修改HTML文檔。而一旦我采用了CSS定義背景圖像之后，這些問題都迎刃而解。
<style type="text/css"></p><p>h1 {</p><p>height:35px;</p><p>background-image:url("/images/logo.gif");</p><p>background-repeat:no-repeat;</p><p>}</p><p>h1 span {display:none;}</p><p></style></p><p><h1><span>Hello world!</span></h1></p><p>
[Ctrl A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]
所以，我們開始感受到這種方式的“好”，并以此應用到新的網頁設計中去。當然，為了盡量精簡我們的HTML代碼，我還可以這樣：
<style type="text/css"></p><p>h1 {</p><p>height:35px;</p><p>background-image:url("/images/logo.gif");</p><p>background-repeat:no-repeat;</p><p>text-indent: -10000px;</p><p>}</p><p></style></p><p><h1>Hello world!</h1></p><p>
[Ctrl A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]