[{"data":1,"prerenderedAt":503},["ShallowReactive",2],{"content-/blog/wcag-2.2-guide":3,"related-blog":476},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":470,"_id":471,"_source":472,"_file":473,"_stem":474,"_extension":475},"/blog/wcag-2.2-guide","blog",false,"","WCAG 2.2 实用指南","面向产品/设计/工程团队的 WCAG 2.2 落地实践与检查清单。","WCAG 2.2, 无障碍, 可访问性, Accessibility, 焦点可见, 目标尺寸, 拖拽替代","HTMLPAGE","2025-12-01","无障碍与设计","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":455},"root",[18,26,32,41,46,53,73,78,96,102,120,124,154,160,173,177,190,196,209,213,226,232,245,249,270,275,347,352,375,380,426,430],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"概览",[24],{"type":25,"value":22},"text",{"type":19,"tag":27,"props":28,"children":29},"p",{},[30],{"type":25,"value":31},"WCAG（Web Content Accessibility Guidelines）2.2 聚焦“可感知、可操作、可理解、稳健”四大原则的进一步可操作化。本指南以工程落地为目标，围绕焦点可见、目标尺寸、拖拽替代、帮助一致性、冗余输入与认证易用性等主题给出实践建议与检查清单。",{"type":19,"tag":33,"props":34,"children":35},"blockquote",{},[36],{"type":19,"tag":27,"props":37,"children":38},{},[39],{"type":25,"value":40},"提示：本文不替代标准文本，建议与官方规范对照阅读，并结合组织合规要求设定验收阈值与例外流程。",{"type":19,"tag":20,"props":42,"children":44},{"id":43},"关键主题与实践",[45],{"type":25,"value":43},{"type":19,"tag":47,"props":48,"children":50},"h3",{"id":49},"_1-焦点可见与不被遮挡",[51],{"type":25,"value":52},"1) 焦点可见与不被遮挡",{"type":19,"tag":54,"props":55,"children":56},"ul",{},[57,63,68],{"type":19,"tag":58,"props":59,"children":60},"li",{},[61],{"type":25,"value":62},"明确焦点样式：可见的边框/阴影/底色，高对比度，非仅颜色区分。",{"type":19,"tag":58,"props":64,"children":65},{},[66],{"type":25,"value":67},"焦点不被遮挡：侧边浮层/吸顶元素不得遮蔽当前焦点。",{"type":19,"tag":58,"props":69,"children":70},{},[71],{"type":25,"value":72},"键盘陷阱：任何组件都应可通过 Esc/Tab/Shift+Tab 离开。",{"type":19,"tag":27,"props":74,"children":75},{},[76],{"type":25,"value":77},"工程建议：",{"type":19,"tag":54,"props":79,"children":80},{},[81,86,91],{"type":19,"tag":58,"props":82,"children":83},{},[84],{"type":25,"value":85},"统一焦点样式 Token（颜色/宽度/内外边距），在组件库一处维护。",{"type":19,"tag":58,"props":87,"children":88},{},[89],{"type":25,"value":90},"为弹窗、侧栏、菜单管理可聚焦顺序（焦点圈定与返回）。",{"type":19,"tag":58,"props":92,"children":93},{},[94],{"type":25,"value":95},"E2E 增加“Tab 路径可达与焦点可见”用例。",{"type":19,"tag":47,"props":97,"children":99},{"id":98},"_2-目标尺寸minimum",[100],{"type":25,"value":101},"2) 目标尺寸（Minimum）",{"type":19,"tag":54,"props":103,"children":104},{},[105,110,115],{"type":19,"tag":58,"props":106,"children":107},{},[108],{"type":25,"value":109},"触控/点击目标建议不小于 24×24 px，留足安全间距。",{"type":19,"tag":58,"props":111,"children":112},{},[113],{"type":25,"value":114},"将文本链接与周边元素分隔，避免误触。",{"type":19,"tag":58,"props":116,"children":117},{},[118],{"type":25,"value":119},"图标按钮在小屏适配中应增大可点区域（例如使用内补白）。",{"type":19,"tag":27,"props":121,"children":122},{},[123],{"type":25,"value":77},{"type":19,"tag":54,"props":125,"children":126},{},[127,141],{"type":19,"tag":58,"props":128,"children":129},{},[130,132,139],{"type":25,"value":131},"在设计 Token 中定义 ",{"type":19,"tag":133,"props":134,"children":136},"code",{"className":135},[],[137],{"type":25,"value":138},"--tap-target-min-size",{"type":25,"value":140}," 并在按钮/链接统一复用。",{"type":19,"tag":58,"props":142,"children":143},{},[144,146,152],{"type":25,"value":145},"针对卡片、列表项添加 ",{"type":19,"tag":133,"props":147,"children":149},{"className":148},[],[150],{"type":25,"value":151},"hit area",{"type":25,"value":153}," 扩展，触发区大于视觉区。",{"type":19,"tag":47,"props":155,"children":157},{"id":156},"_3-拖拽动作的替代方式",[158],{"type":25,"value":159},"3) 拖拽动作的替代方式",{"type":19,"tag":54,"props":161,"children":162},{},[163,168],{"type":19,"tag":58,"props":164,"children":165},{},[166],{"type":25,"value":167},"对仅拖拽可完成的任务，提供点击/输入等非拖拽替代。",{"type":19,"tag":58,"props":169,"children":170},{},[171],{"type":25,"value":172},"排序/上传/画布移动等交互，均应可通过键盘操作实现。",{"type":19,"tag":27,"props":174,"children":175},{},[176],{"type":25,"value":77},{"type":19,"tag":54,"props":178,"children":179},{},[180,185],{"type":19,"tag":58,"props":181,"children":182},{},[183],{"type":25,"value":184},"DnD 组件暴露可编程接口：上/下/置顶/置底等命令式方法。",{"type":19,"tag":58,"props":186,"children":187},{},[188],{"type":25,"value":189},"文案指引：清晰提示“可使用按钮完成同样操作”。",{"type":19,"tag":47,"props":191,"children":193},{"id":192},"_4-一致可用的帮助help",[194],{"type":25,"value":195},"4) 一致可用的帮助（Help）",{"type":19,"tag":54,"props":197,"children":198},{},[199,204],{"type":19,"tag":58,"props":200,"children":201},{},[202],{"type":25,"value":203},"表单/流程类页面提供稳定入口的帮助（文档、客服、FAQ）。",{"type":19,"tag":58,"props":205,"children":206},{},[207],{"type":25,"value":208},"不应在关键任务中隐藏帮助入口；移动端保证可触达。",{"type":19,"tag":27,"props":210,"children":211},{},[212],{"type":25,"value":77},{"type":19,"tag":54,"props":214,"children":215},{},[216,221],{"type":19,"tag":58,"props":217,"children":218},{},[219],{"type":25,"value":220},"在全局布局预留帮助入口区域（页头/页脚/固定按钮）。",{"type":19,"tag":58,"props":222,"children":223},{},[224],{"type":25,"value":225},"统一“错误-帮助-恢复”体验：错误消息可读、帮助直达、可撤销。",{"type":19,"tag":47,"props":227,"children":229},{"id":228},"_5-冗余输入与认证易用性",[230],{"type":25,"value":231},"5) 冗余输入与认证易用性",{"type":19,"tag":54,"props":233,"children":234},{},[235,240],{"type":19,"tag":58,"props":236,"children":237},{},[238],{"type":25,"value":239},"减少重复填写：允许复用已知信息或自动填充。",{"type":19,"tag":58,"props":241,"children":242},{},[243],{"type":25,"value":244},"认证过程避免依赖记忆（如仅图形验证码或复杂口令），提供替代因素。",{"type":19,"tag":27,"props":246,"children":247},{},[248],{"type":25,"value":77},{"type":19,"tag":54,"props":250,"children":251},{},[252,257],{"type":19,"tag":58,"props":253,"children":254},{},[255],{"type":25,"value":256},"利用浏览器自动填充、地址簿、最近值回填等通道减少输入摩擦。",{"type":19,"tag":58,"props":258,"children":259},{},[260,262,268],{"type":25,"value":261},"对验证码提供听觉/文本/延时刷新等替代途径（参考 ",{"type":19,"tag":133,"props":263,"children":265},{"className":264},[],[266],{"type":25,"value":267},"/blog/captcha-accessibility-issue",{"type":25,"value":269},"）。",{"type":19,"tag":20,"props":271,"children":273},{"id":272},"设计与开发检查清单",[274],{"type":25,"value":272},{"type":19,"tag":54,"props":276,"children":279},{"className":277},[278],"contains-task-list",[280,293,302,311,320,329,338],{"type":19,"tag":58,"props":281,"children":284},{"className":282},[283],"task-list-item",[285,291],{"type":19,"tag":286,"props":287,"children":290},"input",{"disabled":288,"type":289},true,"checkbox",[],{"type":25,"value":292}," 焦点样式清晰、与主题形成足够对比；焦点不会被固定元素遮挡",{"type":19,"tag":58,"props":294,"children":296},{"className":295},[283],[297,300],{"type":19,"tag":286,"props":298,"children":299},{"disabled":288,"type":289},[],{"type":25,"value":301}," Tab 顺序合理、可循环退出；组件无键盘陷阱",{"type":19,"tag":58,"props":303,"children":305},{"className":304},[283],[306,309],{"type":19,"tag":286,"props":307,"children":308},{"disabled":288,"type":289},[],{"type":25,"value":310}," 点击/触控目标尺寸 ≥ 24×24 px，间距充足；小屏有命中扩展",{"type":19,"tag":58,"props":312,"children":314},{"className":313},[283],[315,318],{"type":19,"tag":286,"props":316,"children":317},{"disabled":288,"type":289},[],{"type":25,"value":319}," 所有拖拽交互均有可键盘/按钮的替代方式",{"type":19,"tag":58,"props":321,"children":323},{"className":322},[283],[324,327],{"type":19,"tag":286,"props":325,"children":326},{"disabled":288,"type":289},[],{"type":25,"value":328}," 表单/流程页存在固定帮助入口；错误信息清晰可理解",{"type":19,"tag":58,"props":330,"children":332},{"className":331},[283],[333,336],{"type":19,"tag":286,"props":334,"children":335},{"disabled":288,"type":289},[],{"type":25,"value":337}," 认证与表单输入避免“强记忆”，支持自动填充与冗余输入优化",{"type":19,"tag":58,"props":339,"children":341},{"className":340},[283],[342,345],{"type":19,"tag":286,"props":343,"children":344},{"disabled":288,"type":289},[],{"type":25,"value":346}," 动画可被“降低动态效果”系统设置抑制；文本不随动画消失",{"type":19,"tag":20,"props":348,"children":350},{"id":349},"与工程体系的集成",[351],{"type":25,"value":349},{"type":19,"tag":54,"props":353,"children":354},{},[355,360,365,370],{"type":19,"tag":58,"props":356,"children":357},{},[358],{"type":25,"value":359},"组件库：在按钮、链接、输入、弹窗、菜单、拖拽组件中内置上述能力。",{"type":19,"tag":58,"props":361,"children":362},{},[363],{"type":25,"value":364},"样式系统：提供焦点、间距、命中区等主题 Token 并在多主题复用。",{"type":19,"tag":58,"props":366,"children":367},{},[368],{"type":25,"value":369},"测试：加入 A11y 单测/Lighthouse 无障碍检查，E2E 覆盖键盘路径。",{"type":19,"tag":58,"props":371,"children":372},{},[373],{"type":25,"value":374},"文档：在设计规范与工程规范同步约束，提供示例代码与对照图。",{"type":19,"tag":20,"props":376,"children":378},{"id":377},"进一步阅读",[379],{"type":25,"value":377},{"type":19,"tag":54,"props":381,"children":382},{},[383,394,405,415],{"type":19,"tag":58,"props":384,"children":385},{},[386,388],{"type":25,"value":387},"无障碍设计总览：",{"type":19,"tag":133,"props":389,"children":391},{"className":390},[],[392],{"type":25,"value":393},"/blog/accessibility-guidelines",{"type":19,"tag":58,"props":395,"children":396},{},[397,399],{"type":25,"value":398},"WCAG 评分模型简述：",{"type":19,"tag":133,"props":400,"children":402},{"className":401},[],[403],{"type":25,"value":404},"/blog/wcag-3-scoring-model",{"type":19,"tag":58,"props":406,"children":407},{},[408,410],{"type":25,"value":409},"验证码的可访问性问题：",{"type":19,"tag":133,"props":411,"children":413},{"className":412},[],[414],{"type":25,"value":267},{"type":19,"tag":58,"props":416,"children":417},{},[418,420],{"type":25,"value":419},"可持续设计与能耗优化：",{"type":19,"tag":133,"props":421,"children":423},{"className":422},[],[424],{"type":25,"value":425},"/blog/sustainable-web-design",{"type":19,"tag":427,"props":428,"children":429},"hr",{},[],{"type":19,"tag":54,"props":431,"children":432},{},[433,444],{"type":19,"tag":58,"props":434,"children":435},{},[436,438],{"type":25,"value":437},"返回博客首页：",{"type":19,"tag":133,"props":439,"children":441},{"className":440},[],[442],{"type":25,"value":443},"/blog",{"type":19,"tag":58,"props":445,"children":446},{},[447,449],{"type":25,"value":448},"查看无障碍类文章：",{"type":19,"tag":133,"props":450,"children":452},{"className":451},[],[453],{"type":25,"value":454},"/blog?category=无障碍与设计",{"title":7,"searchDepth":456,"depth":456,"links":457},3,[458,460,467,468,469],{"id":22,"depth":459,"text":22},2,{"id":43,"depth":459,"text":43,"children":461},[462,463,464,465,466],{"id":49,"depth":456,"text":52},{"id":98,"depth":456,"text":101},{"id":156,"depth":456,"text":159},{"id":192,"depth":456,"text":195},{"id":228,"depth":456,"text":231},{"id":272,"depth":459,"text":272},{"id":349,"depth":459,"text":349},{"id":377,"depth":459,"text":377},"markdown","content:blog:wcag-2.2-guide.md","content","blog/wcag-2.2-guide.md","blog/wcag-2.2-guide","md",[477,487,495],{"_path":478,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":479,"description":480,"keywords":481,"author":11,"date":482,"category":483,"image":14,"_type":470,"_id":484,"_source":472,"_file":485,"_stem":486,"_extension":475},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","2025-11-26","待分类","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":488,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":489,"description":490,"keywords":491,"author":11,"date":482,"category":483,"image":14,"_type":470,"_id":492,"_source":472,"_file":493,"_stem":494,"_extension":475},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":496,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":497,"description":498,"keywords":499,"author":11,"date":482,"category":483,"image":14,"_type":470,"_id":500,"_source":472,"_file":501,"_stem":502,"_extension":475},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945283941]