让 AI 把营业时间做成无障碍 HTML 表格：表头关联与键盘滚动实操

把营业时间发给 AI，几秒钟就能得到一张漂亮的表。但颜色和粗体并不能告诉读屏软件：“14:00–17:00”属于哪一天、哪个时段。本篇用一组虚构数据，把生成任务拆成数据核对、语义标记和窄屏验收。目标是得到一个无脚本、可本地打开的 HTML 页面。

一、适合谁，需要准备什么

适合维护小店官网、社区公告或课程页面的人。你只需会复制文本、把文件保存为 UTF-8 编码的 .html，并用浏览器打开；不需要安装前端框架。使用已有的 AI 对话工具即可，免费额度是否可用以所用服务为准，本例不需要 API、付费插件或服务器。预计花 15 分钟完成首轮核对。

示例数据为“青禾阅览室”每周开放时间，不代表真实场所。正式操作前，先把节假日安排、时区和缺失项问清楚；不要让 AI 用常识补齐。价格表也可采用同样方法，但要明确币种、计费周期及税费口径。

二、复制提示词，把结构要求写清楚

请把以下虚构数据转成一个可独立打开的 HTML 文件：
青禾阅览室；当地时间；列为日期、上午、下午。
周一至周五：09:00–12:00，14:00–18:00；
周六：10:00–12:00，14:00–17:00；周日：休息，休息。
要求：原生 table、可见 caption；列标题用 th scope="col"，
日期用 th scope="row"。保留每个原始值，不推测节假日安排。
窄屏只让表格容器横向滚动；容器可用 Tab 聚焦、有名称和焦点轮廓。
保留可见表头，不用图片、CSS 伪元素或加粗 td 替代标题。
不要脚本、外部资源、表单、跟踪或提交操作。
先给完整 HTML，再列出单元格与行列标题的对应关系，以及人工验收步骤。

这里限定为“一个行标题加一个列标题”的简单表格。W3C WAI 双向表头教程建议用 th 标记标题，并用 row、col 声明关联方向。如果模型给出合并单元格、多级套餐分组，先要求它拆成简单表，不要直接套用本例。

三、最小完整示例

下方是示意结果，完整可复制代码随后给出。窄屏可横向滚动；键盘用户按 Tab 聚焦区域后，可尝试左右方向键。发布后的焦点样式仍需按后文清单检查。

青禾阅览室每周开放时间（虚构示例，当地时间）
日期	上午	下午
周一至周五	09:00–12:00	14:00–18:00
周六	10:00–12:00	14:00–17:00
周日	休息	休息

复制下方代码，保存为 hours.html 后打开。这里的代码是供练习的静态示例，不会发送任何数据；网页编辑器可能过滤样式或属性，嵌入正式网站后仍需重新检查。

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>青禾阅览室开放时间（虚构示例）</title>
<style>
body { margin: 1rem; color: #222; background: #fff;
  font: 1rem/1.6 sans-serif; }
.scroll { max-width: 100%; overflow-x: auto; }
.scroll:focus { outline: 3px solid #1649ad; outline-offset: 2px; }
table { width: 100%; min-width: 32rem; border-collapse: collapse; }
caption { text-align: left; font-weight: bold; padding: .5rem; }
th, td { border: 1px solid #666; padding: .65rem; text-align: left; }
th { background: #eee; }
</style>
</head>
<body>
<h1>青禾阅览室</h1>
<p id="hint">虚构示例。窄屏可横向滚动；键盘用户可按 Tab 聚焦表格区域，再用左右方向键查看。</p>
<div class="scroll" tabindex="0" role="region"
  aria-labelledby="hours-title" aria-describedby="hint">
<table>
<caption id="hours-title">每周开放时间（当地时间）</caption>
<thead><tr>
<th scope="col">日期</th>
<th scope="col">上午</th>
<th scope="col">下午</th>
</tr></thead>
<tbody>
<tr><th scope="row">周一至周五</th><td>09:00–12:00</td><td>14:00–18:00</td></tr>
<tr><th scope="row">周六</th><td>10:00–12:00</td><td>14:00–17:00</td></tr>
<tr><th scope="row">周日</th><td>休息</td><td>休息</td></tr>
</tbody>
</table>
</div>
<p><a href="#hint">返回阅读提示</a></p>
</body>
</html>

检查三个容易被“美化”掉的细节

表题仍在表里：caption 是 table 的直接子元素，不只是表格外的一行加粗字。WAI 表题说明介绍了它帮助用户识别表格的作用。本例无需另加复杂结构摘要。
标题仍是标题：“上午”“下午”是列标题，“周六”是行标题。周六下午的 14:00–17:00 应关联“周六”和“下午”；周日上午的“休息”应关联“周日”和“上午”。休息不是空白，也不是数字零。
滚动区域可聚焦：overflow-x: auto 处理横向溢出；tabindex="0" 使容器进入常规 Tab 顺序，命名区域和轮廓帮助辨认当前位置。MDN 的滚动可访问性说明提醒，部分浏览器中的滚动容器并不会自动获得键盘焦点。

四、按清单验收，不接受 AI 自报“通过”

逐格对照原始数据：应有三列、三条数据行，周六下午为 14:00–17:00；确认 AI 没有追加“节假日照常开放”。
把浏览器视口缩到约 320 CSS 像素宽。正文应换行，表格在自己的区域内滚动；最右侧“下午”列必须能够完整查看，不能被裁掉。
关闭读屏软件，先做纯键盘测试：用 Tab 到达滚动区域，观察蓝色轮廓，再按左右方向键。继续 Tab 应离开区域到“返回阅读提示”链接，Shift+Tab 应能返回，不应困住焦点。
如有读屏软件，使用其表格导航命令，检查表题、周六行和下午列的关联。不同软件与模式的朗读顺序可能不同，不要求逐字一致；需要核对的是标题关系。记录实际浏览器、读屏软件及结果。

上述是你需要执行的验收步骤，并非本文声称已完成的浏览器或辅助技术实测。静态代码核对只能发现部分问题，不能据此宣布整站符合无障碍标准。