页面无障碍缺失会导致屏幕阅读器用户无法获取标题、操作按钮、理解表单、识别语言，根本原因是未使用语义化HTML：不写alt使图片信息丢失，不用button丧失键盘交互与读屏支持，不加label导致表单无上下文，不设lang引发语音引擎误读。
直接说结论：不写 alt、不用 button、不加 label、不设 lang，页面在屏幕阅读器里基本就是“黑盒”——用户听不到标题、点不了按钮、填不对表单、甚至不知道这是中文页。
为什么 button 不能用 div + onclick 替代
浏览器原生 button 元素自带键盘支持：Tab 可聚焦、Enter/Space 可触发、屏幕阅读器自动播报“按钮”。而 div 默认不可聚焦、不响应空格键、也不被辅助技术识别为可交互控件。
- 必须手动加
tabindex="0"才能进 Tab 流，但仅此还不够 - 还得监听
keydown捕获 Enter 和 Space，否则键盘用户点不了 - 还得加
role="button"和aria-label（如果没可见文字），否则读屏软件只读“div”，不读“这是个关闭按钮” - 视觉焦点样式（
:focus）也得自己写，否则键盘用户根本看不到当前在哪
一句话：用 div 模拟按钮，等于把浏览器已实现的无障碍能力全扔了，再花三倍代码补回来。
label 关联不是可选项，是表单可用性的底线
没有正确关联的 input，屏幕阅读器用户无法知道“这个框要填什么”。光靠 placeholder 或旁边文字不行——它们不会被读作该输入框的标签。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<label for="email">邮箱地址</label><input id="email" type="email"> - 嵌套写法也行：
<label>邮箱地址<input type="email"></label>，语义更紧凑 - 避免：
<span>邮箱地址</span><input type="email">—— 完全无关联 - 单选/复选组必须用
fieldset+legend包裹，否则读屏软件无法理解“这五个选项属于同一问题”
img 的 alt 值怎么写才不算敷衍
alt 不是“要不要加”的问题，而是“加了有没有用”的问题。空值 alt="" 是合法的，但只适用于纯装饰图；功能性图片必须传达等效信息。
- 图标按钮（如放大镜搜索）：
alt="搜索"，不是alt="放大镜" - 数据图表：
alt="2025年Q3销售额同比增长12%，其中华东区贡献最大"，摘要关键结论 - 头像图：
alt="张伟，前端工程师"，带身份信息比“头像”有用得多 - 避免
alt="图片"、alt="logo"、alt="banner"这类无意义描述
lang 和文档结构缺失，会让整页“失声”
没声明 lang="zh-CN"，NVDA、VoiceOver 等读屏软件可能用英文引擎读中文，发音怪异甚至跳过整段；没用 main、nav、header，键盘用户就无法用快捷键（如 NVDA+Insert+B）快速跳转到主体内容。
-
<html lang="zh-CN">必须写在根标签，不能漏 -
<main>应是<body>的直接子元素，且全页只出现一次 -
<nav aria-label="主导航">比单纯<nav>更可靠，多导航时靠aria-label区分 - 标题必须按层级用
h1→h2→h3，跳着用（比如h1后直接h4）会破坏阅读流，读屏软件可能误判章节关系
最常被忽略的是：JS 动态插入的内容（比如弹窗、加载后的列表）如果没补 aria-live 或没重置焦点，屏幕阅读器用户根本感知不到变化——这点连很多老手都会漏。
