2.6 语义化布局与可访问性：骨架验收
2.6 语义化布局与可访问性：骨架验收
本节摘要：结构班收工前要做两件事：用语义化布局标签重排页面区块，让骨架自身就讲得出页面结构；再以可访问性视角做出厂验收，确保读屏软件与键盘用户也能顺畅使用看板。本节整合本章全部零件，交出看板的结构班成品，并给出一套可执行的验收清单。
从万能容器到布局标签
前几节搭骨架时用了不少区块占位，现在到总装环节，要把它们换成有名字的布局标签。页头、导航、主体、侧栏、页脚这批标签不改变任何外观——它们的价值在于把"这个区块在页面里扮演什么角色"直接写进结构。收益的兑现方主要是三方：搜索引擎理解页面分区，读屏软件提供分区跳转，维护者一眼看清页面构成。
图 1：看板的语义化布局总装图
总装的对应代码如下，把本章所有零件按图就位（样式班进场前的最终结构）：
<!-- 看板结构班成品：语义化布局总装 --> <body> <header> <h1>青云精密制造 · 车间生产看板</h1> <p>日期待行为班填写</p> <nav> <ul class="workshop-nav"> <li><a href="#board">生产看板</a></li> <li><a href="#quality">质检记录</a></li> </ul> </nav> </header> <main> <section> <h2>今日概览</h2> <!-- 统计卡片组：托盘加挂钩，数据待行为班更新 --> </section> <section> <h2>工单列表</h2> <!-- 语义表格：表题表头表体表尾四段齐备 --> </section> <section> <h2>新增工单</h2> <!-- 表单：控件选型对照表格字段 --> </section> </main> <aside> <!-- 侧栏：现场照片与工序标准，与主线弱相关 --> </aside> <footer> <p>青云精密制造 · 三车间 · 结构班交付版本</p> </footer> </body>
布局标签的使用约束（自检用）： - main 全页唯一：页面主要内容只此一份，读屏有专门按键直达 - header 与 footer 可以在小区块内再用，页级页脚只有一处 - aside 的内容拿掉不影响主线理解，放不进主线的才归它 - nav 专给主要导航，页脚那一排链接够不上主导航就不必包 nav
验收视角：让看不见的人也能用
骨架验收的最高标准不是"浏览器里好看"，而是"去掉视觉之后还能不能用"。全球有相当比例的用户依赖读屏软件、键盘导航或高对比度模式，而且可访问性做得好的页面，对搜索引擎和无障碍检测工具同样友好——一套结构，多方受益。结构班能做的三件事：语义标签让内容自带含义、标签关联让控件自带说明、焦点顺序让键盘自带路径。
焦点顺序值得展开。键盘用户靠制表键在可交互元素间移动，浏览器默认按元素在结构中出现的顺序移动焦点——所以"结构顺序即操作路径"。如果你把提交按钮在结构上放在表单最前面，视觉上再挪到底部，键盘用户的操作路径就会错乱。这是结构班与样式班的一条重要交接约定：视觉重排可以用样式做，但可交互元素的先后关系应尽量在结构里保持自然顺序。
<!-- 焦点顺序的正反对比 --> <!-- 反面：结构顺序与视觉顺序打架 --> <form> <button type="submit">登记工单</button> <!-- 结构上第一个，视觉上被样式班挪到表单末尾： 键盘用户进表单先踩到提交，直接误交空表单 --> <label for="product">产品名称</label> <input type="text" id="product"> </form> <!-- 正面：结构顺序即自然操作顺序 --> <form> <label for="product">产品名称</label> <input type="text" id="product"> <button type="submit">登记工单</button> <!-- 制表键依次经过：产品名输入框 → 提交按钮，与视觉一致 --> </form>
结构班出厂验收清单（逐项打勾才算交付）： - 大纲完整：标题层级递进无跳级，全页一个主题标题 - 区块有名：页头主体侧栏页脚用布局标签，main 唯一 - 控件有标签：每个表单控件绑定文字标签 - 图有替代：信息图替代文本达意，装饰图留空 - 媒体有兜底：音视频有控件有降级文案，字幕轨挂载 - 焦点自然：制表键走一遍页面，顺序符合操作逻辑 - 键盘可过：所有交互不看鼠标也能完成 - 撤掉样式试读：禁用样式后内容仍按合理顺序可读
第二份清单的最后一条是最狠也最有效的一招：在浏览器设置里禁用页面样式（或临时删掉样式引用），页面会退化成一条纯文档流——此时仍然结构清晰、顺序合理、表单可用，骨架就是合格的。这条验收背后是本册反复出现的分层思想：结构层自身必须站得住，样式与行为是增强而非地基。
可访问性还有几处低成本动作，顺手就能做进骨架：纯图标按钮配上看不见的文字标签，让读屏软件有字可读；外链与下载资源在文字里注明去向，不让人盲点；会被脚本动态更新的区域提前做好标记，行为班日后往里填内容时读屏软件才能感知变化（第 4 章会用到这条播报通道）。这些动作的共同点是：写在结构里一次，长期受益，几乎零成本——与"上线后再补无障碍"的事后返工相比，现在的顺手之举便宜得像白捡。
⚠️ 常见坑：为了视觉顺序用样式把侧栏提到主体前面、或把搜索框挪到页头，却在结构里原地不动——读屏用户与键盘用户走的仍是结构顺序，两套顺序分叉越大，这类用户越寸步难行。视觉调整优先考虑改结构，其次才是改样式。
💡 关键直觉：可访问性不是"为少数人做的慈善"，而是结构质量的试纸。语义混乱、焦点错乱、标签缺失的骨架，对机器不友好，对维护者同样不友好——把它当质量门禁，受益的是所有读者。
结构班交班
骨架完工，照 1.2 节的交接界面办理交班手续：向样式班移交元素树一份，附类名与标识清单（统计卡片组、状态徽章、导航列表均有挂点）；向行为班预告可操作舞台（表格行、表单字段、提交按钮），后续章节他们分别进场。你现在手里这份不靠任何样式也条理分明的文档，就是结构班的全部交付物——它朴素，但站得住。
本节要点回顾
- 布局标签：页头、导航、主体、侧栏、页脚把页面分区写进结构，三方受益；
- main 唯一：主体标签全页一份，读屏有直达按键，其余标签按语义克制使用；
- 焦点顺序：结构顺序即键盘路径，可交互元素的自然先后别靠样式颠倒；
- 验收清单：大纲、区块、标签、替代文本、兜底、焦点、键盘、裸读八项逐条过；
- 裸读测试：禁用样式后仍可读可用，结构层才算独立站得住；
- 交班手续：元素树加挂点清单交样式班，可操作舞台预告给行为班。
结构班下班，样式班进场。下一章给这副骨架装修出车间的样子。