HTML面试题无障碍_html面试题无障碍开发知识点【快速上手】-html教程-PHP中文网

html无障碍核心是真实可读性：label必须用for/id显式关联，caption替代已废弃的summary，aria-label仅用于无文本图标，alt=""专指装饰图，所有方案均需经屏幕阅读器实测验证。

html面试题无障碍_html面试题无障碍开发知识点【快速上手】

面试官问“HTML无障碍”不是在考你背规范，而是看你有没有真实写过能被屏幕阅读器读出来的页面——没关掉浏览器开发者工具的“可访问性树”面板就敢交代码的，基本当场淘汰。

只写 <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 字段是否显示“用户名”

summary 属性已废弃多年，所有现代屏幕阅读器都不读它，写了等于白写，还污染 DOM。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

必须用 <caption></caption>，且必须作为 <table> 的第一个子元素，位置错（比如塞进 <code><thead> 里）就失去语义 <li> <code><caption></caption> 是唯一会被屏幕阅读器优先朗读的表格描述，用户靠它决定“值不值得往下听”
如果需要补充说明（比如数据来源、更新时间），用 aria-describedby 指向一个隐藏的 <div>，而不是堆砌无用属性 <h3>aria-label、aria-labelledby、aria-describedby 三者怎么选</h3> <p>不是谁更“高级”就用谁，而是看信息是否已在页面中可见、是否重复、是否动态变化。</p> <ul> <li> <code>aria-label：仅当**完全没有可见文本**时用，比如纯图标按钮 <button aria-label="删除">?</button>；一旦加了可见文字，再加 aria-label 会覆盖原文字，反而出错
aria-labelledby：当标签文字**已存在但不在控件旁边**时用，比如搜索框上方有个 <h2 id="search-title">站内搜索</h2>，就用 aria-labelledby="search-title"
aria-describedby：只用于**补充说明类文本**，比如错误提示、格式要求，且目标元素必须在 DOM 中存在、ID 不重复；频繁切换这个属性本身不影响性能，但若配合大量动态插入/移除目标元素，容易导致屏幕阅读器找不到描述节点