aria-label是WAI-ARIA规范中用于为元素提供可访问名称的属性，主要作用是给那些本身没有默认语义或者语义不明确的元素补充屏幕阅读器可识别的描述信息。很多开发者在需要给div这种无语义容器添加说明时，会直接在aria-label中写入包含HTML标签的内容，这种做法其实存在明显的问题。
aria-label的基本使用规则
aria-label的值必须是纯文本字符串，规范中明确要求该属性不能包含任何HTML标记，屏幕阅读器在解析时会直接将属性值作为文本朗读，不会对其中的HTML标签进行渲染或语义解析。
如果给div元素设置如下的属性值，就属于典型的误用：
<div aria-label="<span>用户信息区域</span>，包含头像和昵称"> <img src="avatar.jpg" alt="用户头像"> <p>张三</p> </div>
上述代码中，aria-label里包含了<span>标签，屏幕阅读器会直接朗读出“小于号 span 大于号 用户信息区域 小于号 斜杠 span 大于号 包含头像和昵称”，完全不符合预期的表达效果。
误用HTML内容的具体问题
- 语义解析错误：屏幕阅读器不会解析aria-label中的HTML标签，会将标签本身作为文本字符朗读，导致信息传达混乱，视障用户无法理解真实含义。
- 无障碍标准不合规：违反WAI-ARIA的属性值规范，网页的无障碍检测结果会出现错误项，不符合公共网页的无障碍合规要求。
- 维护成本高：如果后续需要调整描述内容，开发者需要同时处理HTML结构和aria-label中的冗余标签，容易出现内容不一致的问题。
正确的实现方案
方案一：使用纯文本作为aria-label值
如果只需要给div补充简单的描述，直接将纯文本作为aria-label的值即可：
<div aria-label="用户信息区域，包含头像和昵称"> <img src="avatar.jpg" alt="用户头像"> <p>张三</p> </div>
方案二：优先使用语义化HTML元素
div本身是无语义的容器元素，如果内容有明确的语义，应该优先使用对应的语义化标签，减少aria-label的使用：
<section aria-label="用户信息区域"> <img src="avatar.jpg" alt="用户头像"> <p>张三</p> </section>
上述代码使用<section>标签替代div，本身就具备区域语义，再配合纯文本的aria-label补充更具体的说明，既符合规范也能达到更好的无障碍效果。
方案三：需要富文本描述时的处理
如果确实需要给区域添加富文本形式的描述，应该使用aria-describedby属性关联页面中已有的描述元素，而不是把HTML内容塞进aria-label：
<div aria-describedby="user-desc"> <img src="avatar.jpg" alt="用户头像"> <p>张三</p> </div> <div id="user-desc" class="visually-hidden"> <span>用户信息区域</span>，包含头像和昵称，支持点击查看详情 </div>
其中visually-hidden是常用的视觉隐藏样式类，让描述内容只在屏幕阅读器中可读，不会影响页面的视觉呈现。
相关注意事项
除了aria-label，WAI-ARIA中的aria-labelledby、aria-description等属性同样要求值为纯文本或者关联已有的元素ID，都不能直接写入HTML内容。开发时如果需要给无语义元素补充可访问信息，先确认是否有对应的语义化HTML标签可以使用，再考虑使用ARIA属性，并且严格遵守属性值的纯文本要求，才能保障网页的无障碍体验符合规范。
aria-labeldiv元素无障碍访问HTML语义化修改时间：2026-06-15 13:42:25