优先使用 aria-label 或 aria-labelledby 为无文本元素添加可访问描述；表单控件必须配 label，不可依赖 placeholder；图片需正确设置 alt，装饰性图用 alt=""；title 和 ::after 不具备可访问性。
HTML 中给元素加描述文字，优先用 aria-label 或 aria-labelledby
直接说结论：纯视觉图标、按钮没文字、或表单控件缺乏上下文时，别靠注释或 title 强撑，该用 ARIA 描述就用 aria-label。它被读屏器识别率高，且不影响布局。
常见错误是把描述塞进 title 属性——鼠标悬停才显示，对键盘用户和读屏器基本无效；或者写一堆无语义的 <span class="sr-only">...</span> 却忘了绑定 aria-labelledby，导致描述根本没被关联上。
-
aria-label适合简单、静态描述，比如<button aria-label="关闭弹窗"></button> -
aria-labelledby适合复用已有文本，比如把标题 ID 挂过去：<h2 id="chart-title">月度销售额</h2> <canvas aria-labelledby="chart-title"></canvas> - 别在
input上同时写aria-label和label，读屏器可能重复播报；有<label></label>就别画蛇添足
表单控件必须配 <label></label>，而不是只靠 placeholder
placeholder 不是描述文字，它是提示，一聚焦就消失，对读屏器支持差，且无法形成“控件-标签”语义关联。WCAG 明确要求每个 input、select、textarea 都得有可访问的 <label></label>。
最容易踩的坑是用 for/id 绑定时拼错 ID，或者把 label 写成块级包裹却忘了加 display: inline 导致样式崩坏。
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 推荐显式绑定：
<label for="email">邮箱地址</label><input id="email" type="email"> - 也可以隐式包裹：
<label>邮箱地址<input type="email"></label>，更简洁，兼容性一样好 -
placeholder="请输入邮箱"只能当辅助提示，不能替代label文本
alt 是图片的描述文字，空字符串有明确语义
alt 不是可选项，是 HTML 规范强制属性。它的值不是“随便写点”，而是决定这张图是否需要被读出来：有意义的图写描述，装饰性图写 alt=""（空字符串），不是删掉属性，也不是写 alt="图片" 这种废话。
很多人以为不写 alt 浏览器会自动忽略，其实会导致读屏器朗读文件名或路径，非常混乱；还有人用 alt="logo"，但没说明是什么公司的 logo，对视障用户毫无信息价值。
- 内容图（如新闻配图）：
<img src="protest.jpg" alt="市民在市政厅前举牌呼吁环保立法"> - 装饰图（如分割线、背景 icon）：
<img src="deco-dot.png" alt=""> - 带链接的图，如果链接本身已说明意图（如“点击进入首页”），图的
alt可为空
不要用 title 属性假装实现可访问描述
title 的行为不可控：触屏设备基本不触发，键盘用户无法通过 Tab 访问，读屏器支持参差不齐，Chrome 甚至默认禁用它的语音播报。它从来就不是为可访问性设计的。
你看到别人在图标上写 title="删除"，那只是临时糊弄，上线后一测无障碍工具就会暴露问题。真要描述，回到前面三条：用 aria-label、<label></label>、或 alt。
-
title唯一合理场景：补充非关键、纯辅助的信息，比如缩写全称：<abbr title="World Health Organization">WHO</abbr> - 按钮、链接、表单控件上慎用
title，它不会提升可访问性，反而增加维护负担 - CSS 里用
::after伪元素加提示文字？同样不可读，脱离 DOM 结构，读屏器看不到
