HTML可访问性格式化是保证不同能力用户都能正常访问网页内容的重要基础，很多开发者容易忽略相关实践，导致页面存在访问障碍。下面我们就详细介绍相关的最佳实践方法。
1. 优先使用语义化HTML标签
语义化标签能让屏幕阅读器等辅助技术准确识别页面结构，避免使用无意义的<div>和<span>堆砌页面。常用的语义化标签包括<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等。
比如导航区域应该使用<nav>标签，而不是用<div class="nav">，这样屏幕阅读器会自动告知用户这是导航区域，方便用户快速跳转。
<!-- 错误的非语义化写法 -->
<div class="header">
<div class="nav">
<a href="/">首页</a>
<a href="/about">关于我们</a>
</div>
</div>
<!-- 正确的语义化写法 -->
<header>
<nav>
<a href="/">首页</a>
<a href="/about">关于我们</a>
</nav>
</header>2. 合理使用ARIA属性补充语义
当现有HTML语义无法完全表达元素的作用时，可以添加ARIA属性补充信息，但不要过度使用，能用语义化标签解决的就不要加ARIA属性。
常见的ARIA属性包括role定义元素角色，aria-label为无可见文本的元素添加标签，aria-hidden="true"告知辅助技术忽略装饰性元素。
<!-- 为图标按钮添加aria-label，让屏幕阅读器知道按钮作用 -->
<button aria-label="关闭弹窗">
<svg aria-hidden="true" width="20" height="20">
<path d="M15 5L5 15M5 5l10 10" />
</svg>
</button>
<!-- 标记当前激活的导航项 -->
<nav>
<a href="/" aria-current="page">首页</a>
<a href="/about">关于我们</a>
</nav>3. 保证键盘可访问性
所有可交互元素都必须支持键盘操作，用户可以通过Tab键聚焦元素，通过Enter或Space键触发交互，不要禁止元素的默认键盘行为。
自定义组件比如下拉菜单、模态框，需要手动管理焦点，比如打开模态框时将焦点移到模态框内部，关闭时把焦点返回触发按钮。
// 打开模态框时移动焦点
function openModal() {
const modal = document.getElementById('modal');
modal.style.display = 'block';
// 将焦点移到模态框的第一个可聚焦元素
modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus();
}
// 关闭模态框时返回焦点到触发按钮
function closeModal(triggerBtn) {
const modal = document.getElementById('modal');
modal.style.display = 'none';
triggerBtn.focus();
}4. 为媒体元素添加替代文本
图片需要添加alt属性，装饰性图片可以设置alt=""，内容性图片需要添加准确描述图片内容的文本；视频需要添加字幕，音频需要提供文字转录内容。
<!-- 内容性图片：alt描述图片内容 --> <img src="product.jpg" alt="银色无线蓝牙耳机，佩戴在耳畔的效果图" /> <!-- 装饰性图片：alt为空，屏幕阅读器会跳过 --> <img src="decorative-line.png" alt="" /> <!-- 视频添加字幕 --> <video controls> <source src="intro.mp4" type="video/mp4" /> <track kind="subtitles" src="intro-subtitles.vtt" srclang="zh" label="中文" default /> </video>
5. 正确使用标题层级
页面标题需要按照层级顺序排列，从<h1>到<h6>依次递减，不要跳过层级，比如<h1>之后直接接<h3>，这样会导致屏幕阅读器用户无法正确感知页面结构。
一个页面通常只有一个<h1>，对应页面核心主题，子章节使用<h2>，子章节下的细分内容使用<h3>，以此类推。
| 标题级别 | 使用场景 |
|---|---|
| <h1> | 页面唯一主标题，描述页面核心内容 |
| <h2> | 页面主要章节标题 |
| <h3> | 章节下的子章节标题 |
| <h4>-<h6> | 更细粒度的内容分层标题 |
6. 表单元素关联正确标签
所有表单输入元素都需要和<label>标签关联，不要只用placeholder作为提示，因为placeholder在输入内容后会消失，屏幕阅读器也无法正确读取。
可以通过for属性和输入框的id关联，也可以把输入框放在<label>标签内部。
<!-- 方式1：for和id关联 --> <label for="username">用户名：</label> <input type="text" id="username" name="username" /> <!-- 方式2：输入框放在label内部 --> <label> 密码： <input type="password" name="password" /> </label> <!-- 错误写法：只用placeholder，无label --> <input type="text" placeholder="请输入用户名" />
注意：可访问性格式化不是额外的负担，而是Web开发的基本要求，遵循这些实践能让你的页面覆盖更多用户，同时提升页面的可维护性和SEO表现。
以上就是HTML可访问性格式化的核心最佳实践，在开发过程中逐步落实这些规则，就能写出兼容性更好、更友好的HTML代码。
HTML_accessibilitysemantic_tagsARIA_attributeskeyboard_navigationscreen_reader修改时间：2026-05-25 11:05:29