[{"data":1,"prerenderedAt":97},["ShallowReactive",2],{"guide:writing-meaningful-alt-text":3},{"slug":4,"title":5,"description":8,"keywords":11,"updatedAt":14,"summary":15,"sections":24,"relatedPages":74},"writing-meaningful-alt-text",{"zh-Hant-TW":6,"en":7},"如何寫出有意義的圖片替代文字？","How to Write Meaningful Image Alt Text",{"zh-Hant-TW":9,"en":10},"好的圖片替代文字不是把畫面全部描述出來，而是根據頁面脈絡傳達使用者完成任務所需要的資訊。","Good alt text does not describe every visible detail. It communicates the information users need in the page context.",{"zh-Hant-TW":12,"en":13},"替代文字怎麼寫, 圖片 alt text, 圖片無障礙, AI 替代文字建議","how to write alt text, image alt text, image accessibility, AI alt text suggestions","2026-07-25",{"zh-Hant-TW":16,"en":20},[17,18,19],"先判斷圖片是裝飾、資訊、操作入口、商品、圖表還是文字圖片。","替代文字要補足使用者看不到圖片時會失去的資訊。","AI 可以產生草稿，但人仍要確認脈絡、精準度與語氣。",[21,22,23],"First decide whether the image is decorative, informative, actionable, product-related, chart-like, or text-as-image.","Alt text should cover what users would miss if they cannot see the image.","AI can draft suggestions, but humans still need to confirm context, accuracy, and tone.",[25,34,56,65],{"title":26,"body":29},{"zh-Hant-TW":27,"en":28},"先看圖片用途，不是先描述畫面","Start with purpose, not visual description",{"zh-Hant-TW":30,"en":32},[31],"同一張圖在不同頁面可能需要不同寫法。品牌裝飾圖可能不需要讀出；商品圖需要說明款式、顏色或狀態；圖表則可能需要摘要趨勢與關鍵數值。",[33],"The same image may need different text in different contexts. A decorative brand image may not need to be announced; a product image may need style, color, or state; a chart may need trend and key values.",{"title":35,"body":38,"items":43},{"zh-Hant-TW":36,"en":37},"常見寫法","Common patterns",{"zh-Hant-TW":39,"en":41},[40],"可以用下面的分類快速決定替代文字方向。",[42],"Use these categories to decide the direction quickly.",{"zh-Hant-TW":44,"en":50},[45,46,47,48,49],"裝飾圖片：通常使用空替代文字，避免干擾。","資訊圖片：補上圖片提供的必要資訊。","連結或按鈕內圖片：替代文字應說明操作目的。","商品圖片：說明會影響選擇的外觀、狀態或差異。","圖表：摘要結論，必要時提供附近的資料表或完整文字說明。",[51,52,53,54,55],"Decorative images: usually use empty alt text to avoid noise.","Informative images: provide the necessary information the image carries.","Images inside links or buttons: describe the action purpose.","Product images: describe appearance, state, or differences that affect choice.","Charts: summarize the conclusion and provide nearby data or full text when needed.",{"title":57,"body":60},{"zh-Hant-TW":58,"en":59},"使用 AI 建議時要檢查什麼？","What to check when using AI suggestions",{"zh-Hant-TW":61,"en":63},[62],"DevCheck 可以協助產生圖片替代文字建議，但 AI 不會完全知道這張圖在你的頁面中扮演什麼角色。採用前應確認：它是否說到重點、是否過度描述、是否漏掉操作目的、是否使用不適合品牌或使用者的語氣。",[64],"DevCheck can help generate image alternative-text suggestions, but AI does not fully know the image’s role on your page. Before using a suggestion, check whether it captures the point, over-describes, misses the action purpose, or uses the wrong tone.",{"title":66,"body":69},{"zh-Hant-TW":67,"en":68},"不要把替代文字寫成固定公式","Do not turn alt text into a fixed formula",{"zh-Hant-TW":70,"en":72},[71],"替代文字沒有一個永遠正確的長度或格式。比較可靠的判斷是：如果使用者看不到圖片，會失去什麼完成任務所需的資訊？如果答案是「沒有」，圖片可能是裝飾；如果答案是「商品差異、操作目的、圖表結論或重要文字」，替代文字就應補上那個缺口。",[73],"Alt text does not have one correct length or format for every image. A more reliable question is: if users cannot see the image, what information needed for the task would they lose? If the answer is nothing, the image may be decorative. If the answer is product difference, action purpose, chart conclusion, or important text, the alt text should fill that gap.",[75,82,87,92],{"label":76,"path":78,"description":79},{"zh-Hant-TW":77,"en":77},"Accesserty DevCheck","\u002Fdevcheck",{"zh-Hant-TW":80,"en":81},"用瀏覽器內工具檢查本機、測試站、登入後頁面與互動狀態。","Run browser-based checks on local builds, staging pages, authenticated screens, and interactive states.",{"label":83,"path":86},{"zh-Hant-TW":84,"en":85},"圖片替代文字術語頁","Alt text glossary page","\u002Fglossary\u002Falt-text",{"label":88,"path":91},{"zh-Hant-TW":89,"en":90},"網站上線前無障礙檢測指南","Accessibility testing before launch guide","\u002Fguides\u002Faccessibility-testing-before-launch",{"label":93,"path":96},{"zh-Hant-TW":94,"en":95},"自動化檢測限制指南","Automated accessibility checks limits guide","\u002Fguides\u002Fautomated-accessibility-checks-limits",1789828081486]