textarea 必须用 label 显式关联，placeholder 仅为视觉提示；表格表头需用 th 加 scope 属性；ARIA 属性是补丁而非替代，优先使用原生语义标签。

textarea 必须配 ，不能只靠 placeholder

placeholder 不是 label 的替代品，它只是视觉提示，屏幕阅读器默认不读、焦点进入时自动消失、表单验证失败时也不显示。只写 placeholder 会导致视障用户完全不知道这个多行输入框要填什么。

正确做法是用 <label></label> 显式关联：for 属性值必须和 textarea 的 id 严格一致：

<label for="feedback">您的意见（至少20字）</label>
<textarea id="feedback" name="feedback" required minlength="20"></textarea>

• 如果使用嵌套写法（<label>文本<textarea></textarea></label>），可省略 for/id，但语义结构必须紧邻，中间不能插其他块级元素
• name 属性仍需设置，它是后端接收字段的唯一标识，和 id 无绑定关系
• 避免把 label 写在 textarea 后面——部分旧版屏幕阅读器会跳过或误读顺序

HTML 表格中 和 scope 属性怎么配才不翻车

表格用于展示二维数据时，必须让屏幕阅读器能明确“某单元格属于哪一行/哪一列”。光靠视觉对齐不行，得靠语义标签。核心是：所有表头必须用 <th>，且单层表头必须加 <code>scope 属性。

常见错误是把 <th> 当成加粗样式工具，或者只在第一行加 <code><th> 却忽略列方向：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>行表头（如“张三”“李四”这类左侧标题）：用 <code><th scope="row"> <li>列表头（如“姓名”“邮箱”“状态”）：用 <code><th scope="col"> <li>如果是复杂表头（比如带合并单元格的多级表头），优先用 <code>id + headers 属性显式关联，而不是依赖 scope

别给 <td> 加 <code>scope——它不支持该属性，加了也无效

aria-label 和 aria-labelledby 别混着用

当无法用原生 <label></label> 或 <th> 做语义关联时（比如动态渲染的表格、封装好的组件），才轮到 ARIA 补位。但两者适用场景完全不同： <ul> <li> <code>aria-label 是“硬编码描述”，适合按钮、图标等无可见文本的控件，例如 <button aria-label="删除第3行">✕</button>

aria-labelledby 是“引用已有文本”，值是空格分隔的 id 列表，适合复用页面中已存在的标题或说明文字

绝对不要同时写 aria-label 和 aria-labelledby——后者会覆盖前者，且可能引发重复播报

所有 ARIA 属性都是“补丁”，不是替代方案。原生语义标签（label、th、fieldset）永远优先

focus 状态和键盘导航容易被忽略的细节

无障碍不只是“能读出来”，还得“能操作”。很多表格和文本域在键盘 Tab 进入后没明显焦点样式，或按方向键无法移动，等于直接拒斥键盘用户。

• textarea 默认可聚焦，但若加了 tabindex="-1" 就会脱离 Tab 顺序——除非你有明确理由（比如仅通过 JS 触发聚焦）
• 表格本身不参与焦点流，但里面的 input、button、select 等控件必须保持自然 Tab 顺序，且焦点样式（:focus）不能被 CSS 重置为 outline: none 且不提供替代
• 对于可编辑表格（如 inline-edit 模式），确保 Enter 切换编辑态、Escape 退出、Tab 在单元格间移动——这些行为不能只靠鼠标事件模拟

最常被绕开的是 name 和 id 的一致性：它们不是装饰，是屏幕阅读器定位、JS 获取值、后端解析字段的共同锚点。少一个 id，整个 label 关联就断了；错一个 name，后端收不到数据。