用途:在 Shopify Liquid 主题中实现 WCAG 2.2 无障碍模式,覆盖电商专属组件。核心原则是每个交互组件必须仅用键盘、屏幕阅读器和减少动效偏好即可使用;优先语义化 HTML,原生语义不足时才加 ARIA。
主要能力与模式:提供组件选型决策表,如可展开内容用 details/summary、模态用 dialog 加 aria-modal、轮播用 role=region 与 aria-roledescription、商品卡用 article 加 aria-labelledby、表单用 aria-invalid 与 aria-describedby、购物车抽屉用 dialog 加焦点陷阱、价格用 aria-label、筛选用 form 加 fieldset。页面结构要求每页单一 header/main/footer,多个 nav 需有不同 aria-label,全部内容位于地标内,并提供跳转链接与标题层级规则。焦点管理要求可见焦点指示器、对比度至少 3:1、模态与抽屉内焦点陷阱、关闭后焦点返回触发元素。组件章节给出商品卡、轮播、模态、购物车抽屉、表单、筛选、价格、手风琴、标签页、下拉导航、提示框的 Liquid 结构片段与规则,例如轮播自动旋转至少 5 秒、悬停或聚焦暂停、必须提供播放/暂停按钮、非活动幻灯片加 aria-hidden。此外涉及移动端 44×44px 触控目标、减少动效媒体查询、视觉隐藏工具类、渐进增强 noscript 回退、动态更新的 live region 及颜色对比度要求。
使用方式与限制:资料以模式与规则说明为主,未提供安装命令、版本要求或完整成品代码。需要结合具体主题按模式改写;部分实现需 JavaScript 配合。资料未说明收费、价格、平台兼容性细节或具体效果,暂未提供,不得推断。