创建导航菜单部分：

• 对所有交互元素使用 ARIA 角色和标签
• 支持键盘导航和焦点指示器
• 所有文本和图标都具有足够的颜色对比度

构建一个表单部分（例如，联系人、新闻稿），该部分：

• 对所有输入使用适当的标签关联
• 支持键盘导航和屏幕阅读器兼容性
• 提供清晰的错误和成功信息

为高对比度模式创建一个切换按钮：

• 增加文本、背景和按钮的对比度
• 使用 localStorage 记住用户偏好
• 在所有页面上均可访问且可见

生成一个手风琴部分：

• 使用 ARIA-expanded 和 ARIA-controls 属性
• 完全可以通过键盘导航
• 包括视觉清晰的焦点状态

构建一个内容块：

• 视觉上隐藏，但屏幕阅读器可以读取
• 允许商家添加可访问性注释或描述

创建一个图片库部分：

• 确保所有图片都有描述性替代文本
• 支持图像之间的键盘导航
• 使用 ARIA 角色来控制画廊和控件

为收藏集/博客生成分页：

• 使用 ARIA 标签和角色
• 具有明确的焦点和活跃状态
• 完全可以通过键盘导航

构建一个 Cookie 同意横幅：

• 阻止分析和营销脚本，直到被接受
• 让用户管理他们的偏好
• 可访问且适合移动设备

创建一个模式或弹出部分：

• 打开时将键盘焦点锁定在模态框内
• 可以用 ESC 键或关闭按钮关闭
• 向屏幕阅读器宣告自己

构建一个表格部分：

• 使用带有 <caption>、<th> 和 <td> 的语义表标记
• 支持键盘导航和屏幕阅读器兼容性
• 具有足够的色彩对比度和清晰的边界

生成可访问性声明的部分，内容如下：

• 从页眉或页脚链接
• 允许商家在主题编辑器中编辑声明
• 清晰易读

为动态内容（例如购物车更新、通知）创建一个实时区域：

• 使用 aria-live="polite" 或 aria-live="assertive"
• 自动向屏幕阅读器宣布更新

构建一个倒计时器部分：

• 向屏幕阅读器播报时间变化
• 使用 ARIA 标签作为计时器元素
• 键盘是否可访问

创建一个社交图标部分：

• 包括每个图标的描述性标签（例如“在 Twitter 上关注我们”）
• 支持键盘导航和焦点状态

构建一个产品变体选择器：

• 使用 ARIA 角色来设置单选按钮或下拉菜单
• 向屏幕阅读器播报所选的变体
• 键盘是否可导航

生成滑块或轮播部分：

• 具有暂停/播放控制和 ARIA 标签
• 完全可以通过键盘导航
• 向屏幕阅读器宣布幻灯片更改

创建一个面包屑部分：

• 使用语义标记和 ARIA 标签
• 可通过键盘和屏幕阅读器轻松导航

为错误和成功构建一个通知部分：

• 使用 ARIA 实时区域进行公告
• 视觉上独特且屏幕阅读器友好

在每个页面顶部创建“跳过内容”链接：

• 在键盘焦点上可见
• 直接跳转到主要内容区域

生成政策页面部分（隐私、条款、退货）：

• 使用语义标题和清晰的结构
• 易于所有用户阅读和浏览

构建一个调色板切换器：

• 让用户从可访问的颜色主题中进行选择
• 确保所有组合均符合 WCAG AA 对比度标准
• 记住用户偏好

创建一个语言选择器：

• 使用 ARIA 角色和标签
• 宣布屏幕阅读器的语言变更
• 键盘是否可访问