圖片用途與替代文字
alt 是圖片無法顯示或由螢幕閱讀器閱讀時提供的文字。先看實際圖片,再說明它傳達的內容,不只寫「圖片」。
這次使用的素材
| 檔案 | 用途與實際圖像 | 來源 |
|---|---|---|
| assets/appa.png | 紫色連帽 APPA,課堂引導角色 | 課程提供的既有 APPA 素材;不代表學員本人 |
| assets/work-brand.jpg | 米色底、深綠圓框與山形標誌 | 本教材原創品牌識別示意圖 |
| assets/work-web.jpg | 紫色頁首、綠色主圖與三張卡片 | 本教材原創網站版型示意圖 |
| assets/work-layout.jpg | 深綠底、亮綠圓形與分層文字 | 本教材原創活動版面示意圖 |
素材供本次練習使用;不因此推定 APPA 具有其他用途的商標或再授權許可。自己的新素材來源不明就記「待確認」,不要讓 AI 編造。
親手做三次小修改
- 開啟自己的 works.html 與三張原圖。
- 比較現有 alt,親手改成能區別三張圖像的文字。
- 保留 src、圖片尺寸、作品名稱與其他說明。alt 不會出現在一般正常載入的圖片上,不用為了看到字故意改壞 src。
- 在原始碼確認新文字,使用可用的可及性閱讀功能檢查;尚未測螢幕閱讀器就記待測。
內容圖要提供有意義的說明。純裝飾且資訊已由鄰近文字充分提供的圖片,可以依用途使用空 alt;不要一律空白,也不要重複整段作品介紹。
記下自己的判斷
在本堂筆記依序寫:頁面、檔名、來源、用途、原 alt、修改後 alt、實際檢查結果。修改完仍需逐頁檢查圖片與導覽,不能只請 AI 說「通過」。