[{"data":1,"prerenderedAt":110},["ShallowReactive",2],{"glossary:target-size":3},{"slug":4,"term":5,"title":6,"description":9,"keywords":12,"updatedAt":15,"tldr":16,"sections":25,"faqs":59,"relatedPages":74,"references":101},"target-size","Target Size",{"zh-Hant-TW":7,"en":8},"什麼是觸控目標大小？","What Is Target Size?",{"zh-Hant-TW":10,"en":11},"觸控目標大小關注按鈕、連結與互動元件是否有足夠可操作區域，讓使用者不容易誤觸或按不到。WCAG 2.2 對最小目標尺寸提出新的成功準則。","Target size concerns whether buttons, links, and interactive controls have enough operable area so people can activate them without missed taps or accidental activation. WCAG 2.2 adds a success criterion for minimum target size.",{"zh-Hant-TW":13,"en":14},"觸控目標大小, target size, WCAG 2.2 2.5.8, 點擊區域, 按鈕尺寸, 行動裝置無障礙","target size, WCAG 2.2 2.5.8, touch target size, click target, accessible buttons, mobile accessibility","2026-06-30",{"zh-Hant-TW":17,"en":21},[18,19,20],"觸控目標不是只看視覺上的圖示大小，也要看實際可點擊或可觸控的區域。","目標太小或太密集，會讓手部操作困難、螢幕放大或行動裝置使用者更容易誤觸。","設計與工程應一起確認按鈕、連結、表單控制項與圖示按鈕的可操作範圍。",[22,23,24],"Target size is not only the visible icon size; it is the actual clickable or touchable area.","Small or crowded targets increase accidental activation for people with motor needs, zoom users, and mobile users.","Design and engineering should check operable areas for buttons, links, form controls, and icon buttons together.",[26,37,48],{"title":27,"body":30},{"zh-Hant-TW":28,"en":29},"為什麼目標大小會影響無障礙？","Why target size affects accessibility",{"zh-Hant-TW":31,"en":34},[32,33],"互動元件太小，不只是不方便。對手部顫抖、精細操作困難、使用觸控螢幕、螢幕放大或在移動中操作的人來說，太小的目標會直接造成任務失敗。","常見問題包括圖示按鈕可點區域太小、相鄰連結太近、表單控制項難以選取、行動版列表每列互動區域不足。",[35,36],"Small controls are not merely inconvenient. For people with tremors, limited fine motor control, touch-screen use, zoom, or on-the-go contexts, small targets can cause task failure.","Common issues include icon buttons with tiny hit areas, adjacent links placed too close together, hard-to-select form controls, and mobile lists with insufficient interactive area.",{"title":38,"body":41},{"zh-Hant-TW":39,"en":40},"檢查時不要只看圖示","Do not check only the icon",{"zh-Hant-TW":42,"en":45},[43,44],"設計稿上的圖示可能只有 16 或 20px，但實際按鈕可以透過 padding 提供更大的可操作區域。反過來說，視覺看起來像大按鈕，也可能只有文字本身可點。","因此檢查時要看 DOM、CSS、可點擊範圍、相鄰間距與鍵盤焦點外觀，而不是只看畫面尺寸。",[46,47],"An icon in the design may be 16 or 20px, but the real button can provide a larger operable area through padding. Conversely, something that looks like a large button may only make the text itself clickable.","Check DOM, CSS, hit area, spacing, and focus appearance, not just the visible size.",{"title":49,"body":52},{"zh-Hant-TW":50,"en":51},"UI Kit 與 DevCheck 的關係","How UI Kit and DevCheck relate",{"zh-Hant-TW":53,"en":56},[54,55],"UI Kit 的價值在於把常見互動元件的基本尺寸、狀態與鍵盤行為做成一致模式，降低每個專案重複犯錯的機會。","DevCheck 則適合在目前頁面做初步檢查，協助需要檢查頁面的人發現觸控目標、焦點與互動狀態是否值得人工確認。",[57,58],"UI Kit helps standardize basic sizing, state, and keyboard behavior for common controls, reducing repeated defects across projects.","DevCheck helps page reviewers inspect the current page and decide whether target size, focus, and interaction states need manual review.",[60,67],{"question":61,"answer":64},{"zh-Hant-TW":62,"en":63},"只要按鈕看起來夠大就可以嗎？","Is visual size enough?",{"zh-Hant-TW":65,"en":66},"不一定。需要確認實際可操作區域、相鄰元件距離與不同輸入方式下的操作結果。","Not necessarily. Check the actual operable area, spacing from nearby controls, and behavior across input methods.",{"question":68,"answer":71},{"zh-Hant-TW":69,"en":70},"觸控目標大小只影響手機嗎？","Does target size matter only on mobile?",{"zh-Hant-TW":72,"en":73},"不是。滑鼠、觸控板、觸控螢幕、螢幕放大與手部操作困難都可能受到目標大小影響。","No. Mouse, trackpad, touch, zoom, and motor use can all be affected by target size.",[75,79,86,91,96],{"label":76,"path":78},{"zh-Hant-TW":77,"en":77},"Accesserty UI Kit","\u002Fuikit",{"label":80,"path":82,"description":83},{"zh-Hant-TW":81,"en":81},"Accesserty DevCheck","\u002Fdevcheck",{"zh-Hant-TW":84,"en":85},"用瀏覽器內工具檢查網站無障礙、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":87,"path":90},{"zh-Hant-TW":88,"en":89},"WCAG 術語頁","WCAG glossary page","\u002Fglossary\u002Fwcag",{"label":92,"path":95},{"zh-Hant-TW":93,"en":94},"WCAG 檢測清單","WCAG testing checklist","\u002Fguides\u002Fwcag-testing-checklist",{"label":97,"path":100},{"zh-Hant-TW":98,"en":99},"WCAG 檢測工具","WCAG compliance tool","\u002Fwcag-compliance-tool",[102,106],{"label":103,"path":105},{"zh-Hant-TW":104,"en":104},"W3C WCAG 2.2 - Target Size (Minimum)","https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F#target-size-minimum",{"label":107,"path":109},{"zh-Hant-TW":108,"en":108},"W3C Understanding Target Size","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Ftarget-size-minimum.html",1789828082061]