从入门到精通：HTML可访问性（a11y）的正确打开方式

会员源码网 2026-03-19 14:58:54

语义化HTML是指使用恰当的HTML标签来准确描述内容的含义和结构，而不是仅仅用div和span来堆砌页面。这不仅有助于搜索引擎理解页面内容，更是屏幕阅读器等辅助技术正确解析页面的关键。

标题标签的正确使用 HTML中的h1到h6标签用于定义页面的标题层级，它们不仅能让页面结构清晰，还能帮助辅助技术用户快速了解页面的内容框架。一个页面应该只有一个h1标签，作为页面的主标题，然后按照逻辑层级依次使用h2到h6标签。

Html

复制

 <h1>我的个人博客</h1> <h2>前端技术</h2> <h3>HTML可访问性指南</h3>  <div class="title">我的个人博客</div> <div class="subtitle">前端技术</div> <div class="sub-subtitle">HTML可访问性指南</div>

段落与列表标签 使用p标签来定义段落，使用ul、ol和li标签来定义无序列表和有序列表，而不是用div来模拟。这样屏幕阅读器可以识别出内容的结构，让用户更轻松地阅读。

Html

复制

 <p>HTML可访问性是前端开发中非常重要的一部分，它能让更多的用户顺畅地使用我们的网页。</p> <ul> <li>语义化HTML</li> <li>表单可访问性</li> <li>图片可访问性</li> </ul>  <div>HTML可访问性是前端开发中非常重要的一部分，它能让更多的用户顺畅地使用我们的网页。</div> <div> <div>语义化HTML</div> <div>表单可访问性</div> <div>图片可访问性</div> </div>

语义化区块标签 使用header、nav、main、article、section、aside、footer等语义化区块标签来划分页面的不同部分，而不是只用div标签。这些标签能让辅助技术用户清楚地知道自己在页面中的位置。

Html

复制

<header> <h1>我的个人博客</h1> <nav> <ul> <li><a href="/">首页</a></li> <li><a href="/articles">文章</a></li> <li><a href="/about">关于我</a></li> </ul> </nav> </header> <main> <article> <h2>HTML可访问性指南</h2> <p>...</p> </article> </main> <footer> <p>版权所有 © 2024 我的个人博客</p> </footer>  <div class="header"> <div class="title">我的个人博客</div> <div class="nav"> <div class="nav-item"><a href="/">首页</a></div> <div class="nav-item"><a href="/articles">文章</a></div> <div class="nav-item"><a href="/about">关于我</a></div> </div> </div> <div class="main"> <div class="article"> <div class="article-title">HTML可访问性指南</div> <div class="article-content">...</div> </div> </div> <div class="footer"> <div class="copyright">版权所有 © 2024 我的个人博客</div> </div>

📋 表单可访问性：让输入更顺畅

表单是网页中常见的交互元素，确保表单的可访问性能让所有用户都能轻松地填写和提交表单。

标签与输入框的关联 使用label标签将输入框和其描述文本关联起来，这样屏幕阅读器在聚焦到输入框时，会同时读出label标签中的文本，帮助用户了解输入框的用途。可以通过for属性将label标签与输入框的id属性关联起来，或者将输入框嵌套在label标签内部。

Html

复制

 <label for="username">用户名：</label> <input type="text" id="username" name="username">  <label> 密码： <input type="password" name="password"> </label>  用户名：<input type="text" name="username">

占位符的局限性 虽然占位符可以为用户提供输入提示，但它不能替代label标签。当用户开始输入内容时，占位符会消失，对于视力不佳或记忆有困难的用户来说，可能会忘记输入框的用途。因此，始终要为输入框添加label标签。

Html

复制

 <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@example.com">  <input type="email" name="email" placeholder="请输入您的邮箱">

表单验证与错误提示 当用户输入的内容不符合要求时，要及时给出清晰的错误提示，并且确保错误提示能被屏幕阅读器识别。可以使用aria-describedby属性将错误提示与输入框关联起来，这样屏幕阅读器在聚焦到输入框时，会同时读出错误提示信息。

Html

复制

<label for="phone">手机号码：</label> <input type="tel" id="phone" name="phone" aria-describedby="phone-error"> <div id="phone-error" class="error-message">请输入有效的11位手机号码</div>

🖼️ 图片可访问性：让每一张图都能被“看见”

对于视觉障碍用户来说，图片的内容需要通过替代文本（alt文本）来传达。因此，为图片添加准确、简洁的alt文本是图片可访问性的关键。

有意义图片的alt文本 对于有意义的图片，比如产品图片、插图等，alt文本应该准确描述图片的内容。如果图片是链接的一部分，alt文本还应该描述点击链接后的操作。

Html

复制

 <img src="product.jpg" alt="一款红色的智能手机，屏幕上显示着主屏幕界面">  <a href="/products"> <img src="product-list.jpg" alt="查看全部产品"> </a>

装饰性图片的alt文本 对于装饰性图片，比如页面背景、分隔线等，这些图片不传达任何重要信息，应该将alt文本设置为空字符串（alt=""），这样屏幕阅读器会忽略这些图片。

Html

复制

<img src="decorative-line.jpg" alt="" aria-hidden="true">

复杂图片的处理 对于复杂的图片，比如图表、地图等，仅用alt文本可能无法完整描述图片的内容。这时可以提供一个链接，指向包含图片详细描述的页面，或者使用longdesc属性（虽然有些浏览器和辅助技术对longdesc的支持不太好）。

Html

复制

<img src="chart.jpg" alt="2024年第一季度销售数据图表" longdesc="/chart-description.html">

🎯 交互元素可访问性：让操作更便捷

网页中的交互元素，比如链接、按钮等，也需要具备良好的可访问性，确保所有用户都能轻松地与之交互。

链接文本的清晰度 链接文本应该清晰地描述点击链接后的目的地，而不是使用“点击这里”、“详情”等模糊的文本。这样用户在不查看上下文的情况下，也能知道链接的用途。

Html

复制

 <a href="/html-accessibility-guide">阅读HTML可访问性详细指南</a>  <a href="/html-accessibility-guide">点击这里</a>

按钮的正确使用 使用button标签来创建按钮，而不是用a标签模拟按钮。button标签默认就具备可访问性特性，比如可以通过键盘聚焦和激活，而a标签需要额外的处理才能具备这些特性。如果需要用a标签来实现按钮的功能，要添加相应的ARIA属性和JavaScript事件处理。

Html

复制

<button onclick="submitForm()">提交表单</button>  <a href="#" role="button" onclick="submitForm()" onkeydown="handleKeyDown(event)">提交表单</a> <script> function handleKeyDown(event) { // 处理键盘事件，确保可以通过Enter和空格键激活按钮 if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); submitForm(); } } </script>  <a href="#" onclick="submitForm()">提交表单</a>

键盘可访问性 确保所有交互元素都可以通过键盘访问和操作，这对于运动障碍用户来说非常重要。用户应该能够通过Tab键在交互元素之间切换焦点，通过Enter键或空格键激活链接和按钮。同时，要为焦点元素添加明显的焦点样式，让用户清楚地知道当前聚焦的元素。

Css

复制

/* 为焦点元素添加明显的样式 */ a:focus, button:focus, input:focus { outline: 2px solid #007bff; outline-offset: 2px; }

📊 ARIA属性：增强可访问性的补充手段

ARIA（Accessible Rich Internet Applications）是一组属性，用于增强网页的可访问性，特别是当原生HTML标签无法满足需求时。但需要注意的是，ARIA属性应该是原生HTML语义化标签的补充，而不是替代。

aria-label和aria-labelledby 当无法使用label标签来描述元素的用途时，可以使用aria-label属性直接为元素添加描述文本。如果描述文本已经存在于页面中，可以使用aria-labelledby属性将元素与描述文本的id关联起来。

Html

复制

 <button aria-label="关闭模态框">×</button>  <div id="modal-title">提示信息</div> <div role="dialog" aria-labelledby="modal-title"> <p>您确定要删除这条记录吗？</p> <button>确定</button> <button>取消</button> </div>

aria-hidden 使用aria-hidden="true"属性可以让屏幕阅读器忽略某些元素，比如装饰性图标、重复的文本等。但要注意，不要将这个属性应用于交互元素或重要信息。

Html

复制

 <i class="icon-decorative" aria-hidden="true"></i>

🧪 可访问性测试：确保效果达标

做好HTML可访问性后，还需要进行测试，确保我们的实现真正有效。以下是一些常用的可访问性测试方法：

屏幕阅读器测试 使用常见的屏幕阅读器，比如NVDA（Windows系统免费开源）、VoiceOver（macOS和iOS系统内置）、JAWS（商业软件）等，来测试页面的可访问性。通过屏幕阅读器浏览页面，检查是否能准确地读出页面的内容和结构。
键盘导航测试 仅使用键盘（Tab键、Shift+Tab键、Enter键、空格键等）来浏览和操作页面，检查所有交互元素是否都能通过键盘访问和激活，以及焦点样式是否明显。
可访问性测试工具 使用一些自动化的可访问性测试工具，比如WAVE（Web Accessibility Evaluation Tool）、 axe DevTools等，来扫描页面，找出可能存在的可访问性问题。这些工具可以快速检测出许多常见的可访问性问题，比如缺少alt文本、标签关联错误等。