技術(shù)資訊
使用Alt提升可訪問性
2009-04-07 08:33:00
alt的準確含義是，當照片不存在或者load錯誤時的提示。但同時img也同時支持alt和title，再有某些瀏覽器的錯誤解析，因此經(jīng)常被誤導(dǎo)并誤用。最簡單、準確的理解，在看不到圖片的情況下如何用文字傳達給用戶？
比如下圖flickr的訂閱圖標通過alt告知用戶Add to My Yahoo!，個人認為這里使用title進行操作指引更合適，alt屬性應(yīng)該進行描述。并且此時只有在IE6和IE7中才可見tip，其他任何智商稍微正常的瀏覽器都看不到，更糟糕的是IE8仍舊沒有改善。
某些圖片帶鏈接，也就是img外層有a的情況下，并沒有注意傳達需求上的差異，把img標簽的alt與a標簽的title都應(yīng)用同樣的說明。但實際上它們本質(zhì)不同，如下圖flickr提供給用戶的外鏈代碼，可惜與上個例子有同樣問題，在IE環(huán)境下看不到a標簽的tip。
問題也不是沒辦法解決，如下圖Wordpress2.7上傳圖片插入編輯器自動生成的代碼，把img標簽的alt和title都寫了出來，可以保證在各種瀏覽器中的兼容性。
再來看看頂部logo的代碼，直接使用alt寫入Flickr logo. If you click it, you’ll go home。如果按照剛才探討的結(jié)論調(diào)整還有更優(yōu)答案，參考下圖第二個例子。也就是說，圖片在有鏈接的情況下，alt傳達內(nèi)容是什么？title傳達鏈接到哪里？
分別測試IE7, FF3, Chrome1, Safari4四個瀏覽器，可證明其良好通用性。依次如圖：
結(jié)合title來更好的說明alt用法，可見如果結(jié)構(gòu)、表現(xiàn)分離徹底，輔助修飾等圖片根本不需要img插入，也就避免了很多alt的錯誤應(yīng)用場合。Junchen在05年譯的alt屬性和title屬性中有更多規(guī)范和細則，alt相較title而言用途單一，但給img插入使用alt替換文字時，也應(yīng)該注意：
簡潔
清晰
符合語境
近期更新
- [2023-07-26 14:17:28] 為品牌賦能，海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢？為什么要開發(fā)微信小程序？
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少？
延伸閱讀
- [2011-11-03 15:12:14] 青島網(wǎng)站設(shè)計中關(guān)于alt和title兩大標簽的使用規(guī)則
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
網(wǎng)站策劃 企業(yè)網(wǎng)站設(shè)計 H5定制設(shè)計 手機端的網(wǎng)站 青島好的網(wǎng)站優(yōu)化公司 高端網(wǎng)站設(shè)計 圖形網(wǎng)格 用戶界面 搜索引擎蜘蛛 青島高端網(wǎng)站建設(shè)公司哪家好 青島SEO 交互設(shè)計 手機網(wǎng)站建設(shè) 審美 網(wǎng)站開發(fā) 青島高端網(wǎng)站設(shè)計公司哪家好 css 網(wǎng)站設(shè)計 微官網(wǎng)帶來的好處 集團性網(wǎng)站 海信網(wǎng)絡(luò)科技 html和css 網(wǎng)站的速度 網(wǎng)站建設(shè)，手機網(wǎng)站 輪胎網(wǎng)站設(shè)計 青島網(wǎng)站SEO 外貿(mào)網(wǎng)站建設(shè) 平面設(shè)計 扁平化設(shè)計 青島黃島、紅島網(wǎng)站建設(shè)公司
