[{"data":1,"prerenderedAt":109},["ShallowReactive",2],{"glossary:alt-text":3},{"slug":4,"term":5,"title":6,"description":9,"keywords":12,"updatedAt":15,"tldr":16,"sections":25,"faqs":48,"relatedPages":77,"references":100},"alt-text","Alt Text",{"zh-Hant-TW":7,"en":8},"什麼是圖片替代文字（Alt Text）？","What Is Alt Text?",{"zh-Hant-TW":10,"en":11},"圖片替代文字，也常被搜尋為 alt text，是讓圖片在無法被看見或載入時仍能傳達必要資訊的文字。好的 alt text 取決於圖片在頁面中的用途，而不是只描述畫面上有什麼。","Alt text communicates necessary information when an image cannot be seen or loaded. Good alt text depends on the image’s purpose in context, not only what appears in the picture.",{"zh-Hant-TW":13,"en":14},"圖片替代文字, alt text 是什麼, alt text, 替代文字怎麼寫, 圖片無障礙, WCAG 替代文字, 無障礙網頁圖片","alt text, image alternative text, how to write alt text, image accessibility, WCAG alt text","2026-07-25",{"zh-Hant-TW":17,"en":21},[18,19,20],"替代文字的重點是傳達圖片在目前頁面中的功能或資訊。","裝飾圖片通常應該被輔助科技忽略；資訊圖片則需要提供等價資訊。","AI 可以協助提出草稿，但最後仍需要人判斷脈絡、語氣與是否足夠。",[22,23,24],"Alt text should communicate the image’s function or information in the current page context.","Decorative images should usually be ignored by assistive technologies; informative images need equivalent information.","AI can help draft suggestions, but humans still need to judge context, tone, and sufficiency.",[26,37],{"title":27,"body":30},{"zh-Hant-TW":28,"en":29},"替代文字不是圖片標題","Alt text is not an image title",{"zh-Hant-TW":31,"en":34},[32,33],"同一張圖片在不同頁面可能需要不同替代文字。商品照片可能要說明款式與狀態；新聞照片可能要說明事件關係；裝飾背景可能完全不需要被讀出。","因此，寫替代文字時應先問：如果使用者看不到這張圖，會少掉什麼資訊或操作線索？",[35,36],"The same image may need different alt text in different pages. A product image may need style and state, a news image may need event context, and a decorative background may not need to be announced at all.","The useful question is: if someone cannot see this image, what information or action cue would they miss?",{"title":38,"body":41},{"zh-Hant-TW":39,"en":40},"AI 建議可以幫忙，但不是最後答案","AI suggestions can help, but they are not the final answer",{"zh-Hant-TW":42,"en":45},[43,44],"AI 很適合快速產生圖片描述草稿，尤其是內容團隊要處理大量圖片時。但 AI 不一定知道圖片在這個頁面的目的，也可能忽略品牌語氣、關鍵資訊或不該描述的細節。","DevCheck 的圖片替代文字建議應被當作輔助起點：它可以降低開始檢查的成本，但仍需要由人確認是否符合內容脈絡。",[46,47],"AI can quickly draft image descriptions, especially when content teams handle many images. But AI may not know the image’s purpose on the page, and it may miss brand tone, key information, or details that should not be described.","DevCheck’s image alt suggestions should be treated as a starting point. They reduce the cost of review, but a human still needs to confirm whether the result fits the content context.",[49,56,63,70],{"question":50,"answer":53},{"zh-Hant-TW":51,"en":52},"每張圖片都需要替代文字嗎？","Does every image need alt text?",{"zh-Hant-TW":54,"en":55},"每張圖片都需要被正確處理，但不一定都需要可讀文字。裝飾圖片通常應該使用空替代文字或被隱藏，避免干擾。","Every image needs correct handling, but not every image needs readable text. Decorative images usually need empty alt text or should be hidden from assistive technologies.",{"question":57,"answer":60},{"zh-Hant-TW":58,"en":59},"替代文字要多長？","How long should alt text be?",{"zh-Hant-TW":61,"en":62},"沒有固定長度。原則是足以完成該圖片在頁面中的功能，不多講無關細節，也不要省略必要資訊。","There is no fixed length. It should be long enough to serve the image’s purpose in context, without unrelated details or missing necessary information.",{"question":64,"answer":67},{"zh-Hant-TW":65,"en":66},"Alt text 是什麼？","What is alt text?",{"zh-Hant-TW":68,"en":69},"Alt text 是圖片的替代文字。當使用者看不到圖片、圖片載入失敗，或使用螢幕讀取器瀏覽時，替代文字可以傳達圖片在該頁面中的必要資訊或操作目的。","Alt text is image alternative text. It communicates the image’s necessary information or action purpose when the image cannot be seen, fails to load, or is encountered through a screen reader.",{"question":71,"answer":74},{"zh-Hant-TW":72,"en":73},"裝飾圖片的 alt 可以留空嗎？","Can decorative images have empty alt text?",{"zh-Hant-TW":75,"en":76},"可以，而且通常應該留空。若圖片只是裝飾，使用空的 alt 屬性可以避免螢幕讀取器讀出無意義的檔名或重複資訊。","Yes. Decorative images usually should have empty alt text so screen readers do not announce meaningless file names or duplicate information.",[78,85,90,95],{"label":79,"path":81,"description":82},{"zh-Hant-TW":80,"en":80},"Accesserty DevCheck","\u002Fdevcheck",{"zh-Hant-TW":83,"en":84},"用瀏覽器內工具檢查網站無障礙、WCAG、ARIA、鍵盤操作、焦點路徑、AI 語意與 PDF 結構訊號。","Run browser-based checks for web accessibility, WCAG, ARIA, keyboard access, focus paths, AI semantic review, and PDF structure signals.",{"label":86,"path":89},{"zh-Hant-TW":87,"en":88},"如何寫出有用的圖片替代文字","How to write useful alt text","\u002Fguides\u002Fwriting-meaningful-alt-text",{"label":91,"path":94},{"zh-Hant-TW":92,"en":93},"WCAG 術語頁","WCAG glossary page","\u002Fglossary\u002Fwcag",{"label":96,"path":99},{"zh-Hant-TW":97,"en":98},"自動化檢測限制指南","Automated accessibility checks limits guide","\u002Fguides\u002Fautomated-accessibility-checks-limits",[101,105],{"label":102,"path":104},{"zh-Hant-TW":103,"en":103},"W3C WAI - Images Tutorial","https:\u002F\u002Fwww.w3.org\u002FWAI\u002Ftutorials\u002Fimages\u002F",{"label":106,"path":108},{"zh-Hant-TW":107,"en":107},"W3C WAI - An alt Decision Tree","https:\u002F\u002Fwww.w3.org\u002FWAI\u002Ftutorials\u002Fimages\u002Fdecision-tree\u002F",1789828089506]