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

textarea 必须配 ，不能只靠 placeholder

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

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

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

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

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

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

常见错误是把 当成加粗样式工具，或者只在第一行加 却忽略列方向：

• 行表头（如“张三”“李四”这类左侧标题）：用
• 列表头（如“姓名”“邮箱”“状态”）：用
• 如果是复杂表头（比如带合并单元格的多级表头），优先用 id + headers 属性显式关联，而不是依赖 scope
• 别给 加 scope——它不支持该属性，加了也无效

  aria-label 和 aria-labelledby 别混着用

  当无法用原生 或 做语义关联时（比如动态渲染的表格、封装好的组件），才轮到 ARIA 补位。但两者适用场景完全不同：

  • aria-label 是“硬编码描述”，适合按钮、图标等无可见文本的控件，例如 ✕
  • aria-labelledby 是“引用已有文本”，值是空格分隔的 id 列表，适合复用页面中已存在的标题或说明文字
  • 绝对不要同时写 aria-label 和 aria-labelledby——后者会覆盖前者，且可能引发重复播报
  • 所有 ARIA 属性都是“补丁”，不是替代方案。原生语义标签（label、th、fieldset）永远优先

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

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

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！