HTML无障碍核心是真实可读性：label必须用for/id显式关联，caption替代已废弃的summary，aria-label仅用于无文本图标，alt=""专指装饰图，所有方案均需经屏幕阅读器实测验证。
面试官问“HTML无障碍”不是在考你背规范，而是看你有没有真实写过能被屏幕阅读器读出来的页面——没关掉浏览器开发者工具的“可访问性树”面板就敢交代码的，基本当场淘汰。
label 和 input 怎么关联才真正生效
只写 <label>用户名</label><input type="text"> 是无效的。屏幕阅读器根本不知道这俩是绑定关系。
- 必须用
for和id显式配对：<label for="user-name">用户名</label><input type="text" id="user-name"> -
for值和id值要完全一致，大小写、连字符、下划线都不能错（user_name≠user-name） - 别用嵌套写法
<label>用户名<input></label>：虽然合法，但旧版 NVDA 或 TalkBack 会截断播报，只读出“用户名”，漏掉“编辑文本”类型提示 - 检查方法：打开 Chrome DevTools → “Accessibility” 面板 → 点击
input→ 看accessible name字段是否显示“用户名”
table 里 caption 和 summary 到底用哪个
summary 属性已废弃多年，所有现代屏幕阅读器都不读它，写了等于白写，还污染 DOM。
- 必须用
<caption>，且必须作为<table>的第一个子元素，位置错（比如塞进<thead>里）就失去语义 -
<caption>是唯一会被屏幕阅读器优先朗读的表格描述，用户靠它决定“值不值得往下听” - 如果需要补充说明（比如数据来源、更新时间），用
aria-describedby指向一个隐藏的<div>，而不是堆砌无用属性
aria-label、aria-labelledby、aria-describedby 三者怎么选
不是谁更“高级”就用谁，而是看信息是否已在页面中可见、是否重复、是否动态变化。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
aria-label：仅当**完全没有可见文本**时用，比如纯图标按钮<button aria-label="删除">?</button>；一旦加了可见文字，再加aria-label会覆盖原文字，反而出错 -
aria-labelledby：当标签文字**已存在但不在控件旁边**时用，比如搜索框上方有个<h2 id="search-title">站内搜索</h2>，就用aria-labelledby="search-title" -
aria-describedby：只用于**补充说明类文本**，比如错误提示、格式要求，且目标元素必须在 DOM 中存在、ID 不重复；频繁切换这个属性本身不影响性能，但若配合大量动态插入/移除目标元素，容易导致屏幕阅读器找不到描述节点
alt 属性空字符串到底什么时候用
alt="" 不是“懒得写”，而是明确告诉辅助技术：“这张图纯属装饰，跳过它”。写错比不写更危险。
- 装饰性图片（如分隔线、背景花纹）→
alt=""；用 CSSbackground-image实现更干净 - 功能性图片（如按钮图标、图表关键数据）→ 必须写有意义的
alt，不能为空 - 完全不写
alt：多数屏幕阅读器会直接读出文件路径（icon-arrow-right.svg），用户一脸懵 - 用
role="presentation"替代alt=""是冗余操作，两者效果等价，但alt=""更轻量、兼容性更好
真正卡住人的从来不是记不住 ARIA 属性名，而是写完代码后忘了打开 VoiceOver 或 NVDA 听一遍——很多问题，听三秒就暴露了。
