可操作原则要求界面组件支持键盘导航、焦点清晰、交互明确，确保屏幕阅读器用户和运动障碍者可用；需保证目标大小≥44×44px、避免键盘陷阱、禁用outline时提供等效焦点样式。

可操作原则（Operable）要求所有用户界面组件和导航都能被不同方式访问与控制，核心是「键盘可用、焦点清晰、交互明确」。不满足这点，屏幕阅读器用户、运动障碍者或仅用键盘操作的人就可能卡在某个按钮或链接上。

确保所有交互元素支持键盘导航

键盘是许多辅助技术的基础输入方式，任何可点击的控件都必须能通过 Tab 进入、Enter/Space 触发，并有视觉焦点指示。

• button、a、input、select 等原生元素默认支持键盘，但需避免 div onclick 或 span role="button" 这类“伪按钮”——它们不会自动获得 tabindex，也不响应空格键
• 自定义控件必须手动添加 tabindex="0"，并监听 keydown 事件处理 Enter 和 Space
• 禁用 outline: none 除非提供等效的焦点样式（如 box-shadow 或边框高亮），否则键盘用户无法判断当前聚焦位置

目标大小至少 44×44 像素（WCAG 2.5.5）

触摸屏和精细动作困难用户依赖足够大的点击区域。这个尺寸是逻辑像素（CSS px），不是物理像素，且适用于移动端和桌面端触控板场景。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 对 button 或 a 设置 min-width: 44px; min-height: 44px;，并用 padding 扩展可点击区，而非仅靠文字撑开
• 若图标按钮文字过小，用 padding 包裹图标，确保整个热区达标；不要只给图标本身设尺寸
• 相邻可点击项之间留出至少 8px 间距，避免误触（尤其在移动端）

避免键盘陷阱与不可跳过的交互

用户必须能用键盘完整浏览页面，不能被困在模态框、轮播图或下拉菜单里出不来。

立即学习“前端免费学习笔记（深入）”；

• 模态框打开时，焦点应自动移入，且 Tab 键循环限制在模态框内（使用 focus-trap 库或手动管理 tabindex）
• 轮播图需提供显式“暂停/播放”控件，并允许键盘用户用 ArrowLeft/ArrowRight 切换，不能只靠自动轮播
• 表单中若某字段触发验证错误，不应阻止用户用 Tab 移出该字段——错误提示要即时、非阻断，且焦点保留在出错字段上（便于修正）

最容易被忽略的是“伪交互”：比如用 div 模拟开关、用 click 绑定代替原生 button、或者在 JS 中移除了 tabindex 却没补全键盘行为。这些看似节省代码，实则直接切断了部分用户的操作链路。