跟著步驟操作,實際結果自己確認。

返回剛才的步驟

圖片用途與替代文字

alt 是圖片無法顯示或由螢幕閱讀器閱讀時提供的文字。先看實際圖片,再說明它傳達的內容,不只寫「圖片」。

這次使用的素材

檔案 用途與實際圖像 來源
assets/appa.png 紫色連帽 APPA,課堂引導角色 課程提供的既有 APPA 素材;不代表學員本人
assets/work-brand.jpg 米色底、深綠圓框與山形標誌 本教材原創品牌識別示意圖
assets/work-web.jpg 紫色頁首、綠色主圖與三張卡片 本教材原創網站版型示意圖
assets/work-layout.jpg 深綠底、亮綠圓形與分層文字 本教材原創活動版面示意圖

素材供本次練習使用;不因此推定 APPA 具有其他用途的商標或再授權許可。自己的新素材來源不明就記「待確認」,不要讓 AI 編造。

親手做三次小修改

  1. 開啟自己的 works.html 與三張原圖。
  2. 比較現有 alt,親手改成能區別三張圖像的文字。
  3. 保留 src、圖片尺寸、作品名稱與其他說明。alt 不會出現在一般正常載入的圖片上,不用為了看到字故意改壞 src。
  4. 在原始碼確認新文字,使用可用的可及性閱讀功能檢查;尚未測螢幕閱讀器就記待測。

內容圖要提供有意義的說明。純裝飾且資訊已由鄰近文字充分提供的圖片,可以依用途使用空 alt;不要一律空白,也不要重複整段作品介紹。

記下自己的判斷

在本堂筆記依序寫:頁面、檔名、來源、用途、原 alt、修改後 alt、實際檢查結果。修改完仍需逐頁檢查圖片與導覽,不能只請 AI 說「通過」。

返回剛才的步驟