在学习框架之前，先掌握网页：HTML、CSS 与可访问性基础

Source: Dev.to

我在开发者圈子里经常看到一种模式：很多人一上手就直接跳进 JavaScript 框架。

说实话——我也曾犯过这个错误。刚开始写代码时，我直接投入到 JavaScript 框架中，却没有真正理解网页的基础。我喜欢构建快速、交互式的应用，尝试各种最新的工具和库。但在这些表面之下，我忽视了基础——尤其是可访问性。

我用了 来做按钮。 我用了 来做标题。
我把一切都 看起来 对，但没有真正的结构或意义。

经过一段时间（以及几次痛苦的代码审查），我意识到一件重要的事：

框架会变，网页不会变。
可访问性不是可选的。

当我明白这一点后，我的构建方式彻底改变了。无论你是新手还是有经验的人，想要纠正这个问题永远不嫌晚。

HTML 是网页的结构

HTML 为你的内容赋予意义。它告诉浏览器——以及辅助技术——某个元素 是什么，而不仅仅是它的外观。

我们都有过忽视的几个例子：

• 按钮应 始终 使用 “
• 标题应放在 中以形成
• 列表应使用 或
• 导航应放在 “
• 内容区块应放在 或

当所有东西都是 “ 时，结构就不存在。没有结构，可访问性就会崩溃。

为什么语义化 HTML 很重要

1. 可访问性

数以百万计的用户依赖屏幕阅读器、语音控制和键盘导航等辅助技术。语义化 HTML 为你免费提供可访问性特性：

• “ 自动获得键盘焦点
• “ 天然地关联到输入框
• “ 告诉辅助工具这是一个导航区域
• 标题创建页面的逻辑大纲

只要使用正确的元素，大多数可访问性问题就会消失。

2. WCAG —— 可访问性的基石

WCAG（Web Content Accessibility Guidelines）定义了让网页可访问的方式，遵循四大原则（P.O.U.R.）：

• 可感知（Perceivable） —— 用户应能够看到或听到内容
• 可操作（Operable） —— 用户必须能够使用键盘、鼠标或辅助设备进行导航
• 可理解（Understandable） —— 界面必须清晰且可预测
• 健壮（Robust） —— 你的内容应在各种浏览器和辅助技术上都能正常工作

语义化 HTML 天然支持这四项。

3. SEO 与可发现性

搜索引擎读取你的 HTML 结构的方式与辅助技术相同：

• 标题创建层级结构
• 文章定义内容块
• 区段组织意义

语义化 HTML 在不额外工作情况下提升 SEO。

4. 可维护性

良好的 HTML 是自我文档化的：

• “ 显然是导航
• “ 明显是交互元素
• “ 表明它包含独立内容

这让调试、入职培训和扩展都更加轻松。

理解 ARIA（可访问的富互联网应用）

ARIA 用来填补原生 HTML 无法自行表达意义或状态的空白。

常见的 ARIA 属性包括：

aria-label="Close menu"
aria-expanded="false"
role="button"
aria-live="polite"

黄金法则： 先使用原生 HTML。 ARIA 应该是 增强，而不是 替代 原生元素。如果某件事本可以使用真实的 , 就不要把 通过 role="button" 变成交互元素。原生元素自带可访问性——在使用 ARIA 之前先利用这份力量。

一个快速示例

❌ 错误示例

<button>
  Submit
</button>

问题

• 没有键盘支持
• 没有焦点行为
• 未被朗读为按钮
• 需要额外的 ARIA 来修复基本功能

✅ 正确示例

<button type="submit">
  Submit
</button>

使用原生 HTML 的好处

• 支持键盘访问
• 正确的焦点处理
• 屏幕阅读器友好
• 不需要 ARIA

如何像 Web 开发者一样思考

1. 提出正确的问题

好的开发在写代码之前就已经开始。当你规划 UI 时，停下来问自己：

• 这对应的正确 HTML 元素是什么？
• 这需要可见标签还是可访问名称？
• 这应该是链接还是按钮？
• 辅助技术能否理解这个元素的作用？

这些问题会引导你写出更语义化、可访问且易维护的标记。

2. 分层构建

优秀的界面是从底层向上构建的。遵循以下顺序：

1. 语义化 HTML —— 建立结构和意义
2. CSS —— 定义布局、外观和响应式行为
3. JavaScript —— 添加交互和增强功能
4. 框架集成 —— 将其引入你选择的工具

这种分层方法让代码保持整洁、可扩展且具弹性——无论使用何种框架或工具。

3. 像真实用户一样测试

可访问性不仅仅是代码层面的问题——它关乎人们实际如何使用你的产品。养成像真实用户一样测试界面的习惯，能发现你平时根本注意不到的问题。

快速检查清单

• 仅使用键盘遍历整个页面
• 打开屏幕阅读器（NVDA、VoiceOver）并聆听流程
• 禁用 CSS，看看结构是否仍然完整
• 将页面放大到 200 % 检查是否仍可使用
• 确认标题层级遵循逻辑顺序

如果在没有样式的情况下页面仍然可理解且可用，说明你的语义化做得很好。

结语 —— 你首先是一个 Web 开发者

框架、库和工具会不断演进。React、Vue、Svelte——今天流行的选择明天可能被取代。新东西总会出现。

但 HTML、CSS 和 JavaScript 是网页的基石——这些技能永远不会过时。掌握可访问性和网页基础是你作为开发者最具前瞻性的投资。它确保你的作品可用、可维护且包容——不论以后使用何种工具。

永远不嫌晚，立即开始吧。

• 编写语义化代码。
• 构建可访问的体验。
• 了解浏览器的工作原理。

这才是真正的 Web 开发者应有的素养。

祝编码愉快！