[{"data":1,"prerenderedAt":260},["ShallowReactive",2],{"content-/blog/category/accessibility":3,"related-blog":232},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"category":11,"author":12,"date":13,"image":14,"body":15,"_type":226,"_id":227,"_source":228,"_file":229,"_stem":230,"_extension":231},"/blog/category/accessibility","category",false,"","无障碍与设计 - HTMLPAGE 技术博客","聚焦可访问性与以人为本的界面设计：语义结构、对比度、键盘可达、动效控制与一致的帮助体验。","无障碍, 可访问性, Accessibility, A11y, 设计系统","无障碍与设计","HTMLPAGE","2025-12-01","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":220},"root",[18,25,31,61,67,151,156,201,210],{"type":19,"tag":20,"props":21,"children":22},"element","h1",{"id":11},[23],{"type":24,"value":11},"text",{"type":19,"tag":26,"props":27,"children":28},"p",{},[29],{"type":24,"value":30},"面向真实业务的 A11y 落地指南，从“规范理解”到“组件级可用性”的全流程方法：",{"type":19,"tag":32,"props":33,"children":34},"ul",{},[35,41,46,51,56],{"type":19,"tag":36,"props":37,"children":38},"li",{},[39],{"type":24,"value":40},"语义结构与可读性：标题层级、可见标签、表单关联、替代文本。",{"type":19,"tag":36,"props":42,"children":43},{},[44],{"type":24,"value":45},"对比度与动效：高对比主题、减少动态效果偏好、动画降噪。",{"type":19,"tag":36,"props":47,"children":48},{},[49],{"type":24,"value":50},"键盘与焦点：Tab 顺序、焦点样式、不被遮挡与可返回。",{"type":19,"tag":36,"props":52,"children":53},{},[54],{"type":24,"value":55},"触控命中与替代：24×24 px 最小命中区、拖拽替代、错误恢复。",{"type":19,"tag":36,"props":57,"children":58},{},[59],{"type":24,"value":60},"一致帮助：流程与表单的稳定帮助入口与清晰错误反馈。",{"type":19,"tag":62,"props":63,"children":65},"h2",{"id":64},"精选阅读",[66],{"type":24,"value":64},{"type":19,"tag":32,"props":68,"children":69},{},[70,97,115,133],{"type":19,"tag":36,"props":71,"children":72},{},[73,75,82,84,90,91],{"type":24,"value":74},"基础规范：",{"type":19,"tag":76,"props":77,"children":79},"code",{"className":78},[],[80],{"type":24,"value":81},"/blog/accessibility-guidelines",{"type":24,"value":83},"、",{"type":19,"tag":76,"props":85,"children":87},{"className":86},[],[88],{"type":24,"value":89},"/blog/wcag-3-scoring-model",{"type":24,"value":83},{"type":19,"tag":76,"props":92,"children":94},{"className":93},[],[95],{"type":24,"value":96},"/blog/wcag-2.2-guide",{"type":19,"tag":36,"props":98,"children":99},{},[100,102,108,109],{"type":24,"value":101},"输入与交互：",{"type":19,"tag":76,"props":103,"children":105},{"className":104},[],[106],{"type":24,"value":107},"/blog/keyboard-navigation",{"type":24,"value":83},{"type":19,"tag":76,"props":110,"children":112},{"className":111},[],[113],{"type":24,"value":114},"/blog/screen-reader",{"type":19,"tag":36,"props":116,"children":117},{},[118,120,126,127],{"type":24,"value":119},"视觉与可读性：",{"type":19,"tag":76,"props":121,"children":123},{"className":122},[],[124],{"type":24,"value":125},"/blog/color-contrast",{"type":24,"value":83},{"type":19,"tag":76,"props":128,"children":130},{"className":129},[],[131],{"type":24,"value":132},"/blog/accessible-ux-research-guide",{"type":19,"tag":36,"props":134,"children":135},{},[136,138,144,145],{"type":24,"value":137},"特殊主题：",{"type":19,"tag":76,"props":139,"children":141},{"className":140},[],[142],{"type":24,"value":143},"/blog/captcha-accessibility-issue",{"type":24,"value":83},{"type":19,"tag":76,"props":146,"children":148},{"className":147},[],[149],{"type":24,"value":150},"/blog/sustainable-web-design",{"type":19,"tag":62,"props":152,"children":154},{"id":153},"团队实施清单",[155],{"type":24,"value":153},{"type":19,"tag":32,"props":157,"children":160},{"className":158},[159],"contains-task-list",[161,174,183,192],{"type":19,"tag":36,"props":162,"children":165},{"className":163},[164],"task-list-item",[166,172],{"type":19,"tag":167,"props":168,"children":171},"input",{"disabled":169,"type":170},true,"checkbox",[],{"type":24,"value":173}," 在设计规范中定义对比度/焦点/命中区 Token 并全局复用",{"type":19,"tag":36,"props":175,"children":177},{"className":176},[164],[178,181],{"type":19,"tag":167,"props":179,"children":180},{"disabled":169,"type":170},[],{"type":24,"value":182}," 组件库内置键盘可达、焦点可见、拖拽替代与 ARIA 属性",{"type":19,"tag":36,"props":184,"children":186},{"className":185},[164],[187,190],{"type":19,"tag":167,"props":188,"children":189},{"disabled":169,"type":170},[],{"type":24,"value":191}," E2E 覆盖 Tab 路径、焦点可见与读屏顺序",{"type":19,"tag":36,"props":193,"children":195},{"className":194},[164],[196,199],{"type":19,"tag":167,"props":197,"children":198},{"disabled":169,"type":170},[],{"type":24,"value":200}," Lighthouse 无障碍评分达标并作为构建守门",{"type":19,"tag":202,"props":203,"children":204},"blockquote",{},[205],{"type":19,"tag":26,"props":206,"children":207},{},[208],{"type":24,"value":209},"下方将自动汇总该分类的相关文章。",{"type":19,"tag":26,"props":211,"children":212},{},[213],{"type":19,"tag":214,"props":215,"children":217},"a",{"href":216},"/blog",[218],{"type":24,"value":219},"← 返回博客首页",{"title":7,"searchDepth":221,"depth":221,"links":222},3,[223,225],{"id":64,"depth":224,"text":64},2,{"id":153,"depth":224,"text":153},"markdown","content:blog:category:accessibility.md","content","blog/category/accessibility.md","blog/category/accessibility","md",[233,244,252],{"_path":234,"_dir":235,"_draft":6,"_partial":6,"_locale":7,"title":236,"description":237,"keywords":238,"author":12,"date":239,"category":240,"image":14,"_type":226,"_id":241,"_source":228,"_file":242,"_stem":243,"_extension":231},"/blog/2025-q1-updates","blog","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":245,"_dir":235,"_draft":6,"_partial":6,"_locale":7,"title":246,"description":247,"keywords":248,"author":12,"date":239,"category":240,"image":14,"_type":226,"_id":249,"_source":228,"_file":250,"_stem":251,"_extension":231},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":253,"_dir":235,"_draft":6,"_partial":6,"_locale":7,"title":254,"description":255,"keywords":256,"author":12,"date":239,"category":240,"image":14,"_type":226,"_id":257,"_source":228,"_file":258,"_stem":259,"_extension":231},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945276726]