SuperAPI AI 工具集

liquid-theme-a11y

前端与建站

查看项目

更新于 10-15 18:46

技能介绍

用途:为 Shopify Liquid 主题实现符合 WCAG 2.2 的无障碍模式,核心是每个交互组件都能仅用键盘、屏幕阅读器和减少动效偏好正常使用。优先使用语义 HTML,仅在原生语义不足时补充 ARIA。

主要能力:提供组件决策表与模式,包括可展开内容用 details/summary、模态用 dialog 加 aria-modal、下拉导航、选项卡、轮播、商品卡片、表单、购物车抽屉、价格展示、筛选、提示气泡等。页面结构要求每页仅一个 header/main/footer,多个 nav 需有不同 aria-label,内容位于地标内,并提供跳转链接与标题层级规范。焦点管理涵盖 :focus-visible 焦点指示、强制对比色模式、模态与抽屉的焦点陷阱及关闭后焦点返回。

用法与限制:资料给出 Liquid 与 CSS 片段,如商品卡片使用 aria-labelledby 指向标题、仅主链接一个 tab 停靠点、快捷加购设 tabindex="-1";轮播需设 role="region"、aria-roledescription、播放暂停按钮,自动轮播间隔至少 5 秒。表单要求可见 label、fieldset/legend、role="alert" 与 aria-describedby 关联错误。移动端触控目标至少 44x44px 并间隔 8px。动效需支持 prefers-reduced-motion,颜色对比按文本与 UI 分别满足 4.5:1 或 3:1。

限制:资料未说明具体版本要求、浏览器兼容范围、安装方式、定价或效果验证数据,这些暂未提供。