# 从页面结构到可操作的界面

原文: https://yishto.com/learn/web-interface/html-layout-accessibility/

作者: [Yishto](https://yishto.com/about/)

以资料目录页连接 HTML 语义、CSS 盒布局与键盘反馈，区分离线结构检查和真实浏览器可访问性验证。

首次发布: 2026-11-10
内容更新: 2026-11-10

一个资料卡片页面在宽屏上很整齐，缩窄后标题溢出，键盘也无法触发“收藏”。这说明页面截图只能展示一种状态，不能证明界面可操作。HTML 决定内容含义和原生行为，CSS 决定盒子如何排列，两者需要一起设计。

本课的独立案例是一页资料目录：带搜索输入、分类筛选、资料链接和收藏按钮。先让文档在没有视觉装饰时仍可理解，再加入布局与反馈。离线代码只检查一小部分控制项契约，不会渲染浏览器页面。

## 从内容结构确定 HTML 语义

页面使用有意义的区域和标题层级，让读者知道导航、主要内容与筛选区在哪里。资料列表表达一组条目，每张卡片包含标题、描述、分类和操作。不要为了字号选择标题级别；视觉大小由 CSS 控制，标题层级表达文档关系。

前往资料详情使用链接，改变收藏状态使用按钮。原生控件已提供键盘行为与语义，点击 div 后再补 tabindex、角色和键盘事件会增加维护负担。链接要有真实目的地址，按钮要有可理解名称；只有图标时，也需要提供适当的可访问名称。

搜索框应有明确标签，可见占位文字不是标签的替代品。使用 label 与控件关联，ID 在文档中保持唯一。错误提示要说明哪个输入有问题和如何修正，不只把边框变红。装饰图可以避免重复朗读，承载信息的图则需要说明其信息用途。

## 盒模型决定可用空间

元素的内容、内边距、边框和外边距共同影响排列。明确 box-sizing 能减少“声明宽度却更宽”的意外。卡片最大宽度、容器间距与长文本换行都要考虑，固定高度容易让翻译变长或用户放大文字后被裁切。

普通文档流应是布局基础。Flexbox 适合一条轴上的分布，例如按钮行；Grid 适合行列关系，例如资料卡片网格。它们都不是必须按屏幕像素逐一写位置的工具。先确定内容的最小可用宽度，再设计宽屏多列与窄屏单列之间的变化。

图片声明合理的固有宽高或比例，让浏览器在加载前预留空间。内容高度变化仍需检查，不能因为设置了尺寸就宣称布局不会跳动。长 URL、没有空格的标题、空分类和加载失败都应该作为实际布局输入。

## 浏览器渲染与测量要有边界

浏览器把 HTML 形成 DOM，结合 CSS 规则计算样式，再进行布局、绘制等工作。页面修改可能触发这些阶段，但具体成本取决于修改内容与浏览器优化。不要把所有 CSS 变动都描述成同样昂贵，也不能只凭属性名称保证动画性能。

如果循环中每修改一个节点就读取一次尺寸，浏览器可能需要反复完成布局来回答测量。先汇总读取，再集中写入，往往更容易控制工作。对资料页通常不需要用脚本逐张计算卡片坐标，布局工具可以直接处理流式排列。

调试时先看元素实际盒子与计算样式，区分父容器限制、溢出规则和内容尺寸。视觉上像是字体问题，可能是固定高度或最小宽度导致。修改一个约束后，复查相邻断点与文本放大场景。

## 键盘操作需要真实浏览器验证

按 Tab 浏览页面，焦点顺序应符合阅读与操作顺序，焦点样式应清楚可见。不要用正数 tabindex 重排整个页面来补救不合理的 DOM。收藏按钮应能用原生键盘操作触发，筛选后也不要让焦点无故消失。

反馈需要能被发现。加载期间说明正在处理；失败时保留输入并给出可再次尝试的操作；无结果时展示明确空状态。如果使用动态通知，应按内容与频率选择合适方式，避免每次输入都产生过量朗读。

可访问性还包括对比度、缩放、触摸目标、减少动画偏好，以及辅助技术实际解释。自动检查能发现一部分结构错误，但不能替代键盘和屏幕阅读器验证。遵循一条检查规则也不等于符合完整 WCAG 标准。

## 用合成控制项检查最小契约

示例把控件简化成 ID 与名称，检查 ID 唯一、名称不是空字符串，以及标签目标存在。真实 label 的关联、DOM 角色和可访问名称计算更复杂，这个模型只展示如何把结构约束变成可检查条件。

```python
controls = [{"id": "email", "label": "Email"}, {"id": "submit", "label": "Save"}]
ids = [c["id"] for c in controls]
assert len(ids) == len(set(ids))
assert all(c["label"].strip() for c in controls)
label_targets = {"email"}
assert label_targets <= set(ids)
print(ids)
```

输出是 `['email', 'submit']`。断言会拒绝重复 ID、空名称或不存在的标签目标。这里 email 只是合成控件标识，未输入邮箱，也没有验证表单格式。所有断言通过仍不能判断颜色对比、焦点可见性和屏幕阅读器体验。

为资料目录应用可以把控制项替换为 search 和 save，再加入两张卡片的独立按钮。名称应让用户理解操作对象，例如“收藏：事务入门”，而不是所有按钮都叫“点击这里”。这项设计需要和实际界面内容一致。

收藏状态也需要语义表达。按钮视觉变色后，键盘与辅助技术用户仍需要知道状态是否改变；按控件含义选择状态属性或清楚的文字反馈。提交中禁止重复操作时，要说明原因和恢复时机，不能只让按钮失去对比度。

资料标题链接与收藏按钮应是独立操作，避免把整张卡片设为一个按钮，再在内部嵌套其他交互控件。鼠标能点击内部图标不代表结构合法。设计点击区域时，同时考虑文字选择、链接打开方式和触摸操作。

## 练习：让同一页面通过不同操作方式

先画出资料页区域与标题关系，再实现链接、按钮和带标签的搜索控件。加入窄屏、长标题、图片失败、空结果、加载与错误状态。每种状态都写出用户下一步可以做什么，避免只制作默认成功截图。

验收要求：键盘可以完成查询、打开资料和收藏；焦点能看见且顺序合理；窄屏没有正文横向溢出；文字放大后关键操作仍可达；图片失败不隐藏资料标题。离线结构检查应拒绝重复 ID 与失效标签关联，真实浏览器记录则说明对比度和辅助技术检查实际做到了哪一步。

## 资料来源与延伸阅读

- [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
- [CSS layout](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
- [Accessible interface design](https://www.w3.org/WAI/tutorials/)

资料核验：2026-11-10。教学示例不代表线上实测。

## 相关文章

- [把需求变成能验证的原型和界面](https://yishto.com/learn/product-building/prototypes-design-systems-and-assets/)
- [给学习页面加入可控的离线能力](https://yishto.com/learn/application-platforms/pwa-offline-learning/)