应优先使用原生语义化标签（如、），而非滥用aria；role="button"仅适用于无原生对应标签的场景，且需手动实现键盘交互与状态同步；语义结构决定读屏逻辑，错误嵌套或隐藏会直接破坏无障碍。

直接用 @#@#@#@#@#@#@#@#@#@0 被朗读为 “article, heading level 3, link, 标题”，上下文完整；而给 <article></article> 加 role="link" 或监听 click 后跳转，读屏只会说 “article”，无法关联内容主题。

• 跳转链接必须是语义化锚点，且包裹至少一个标题级元素（<h2></h2>–<h6></h6>）
• 视觉上想隐藏下划线？用 text-decoration: none，别删 <a></a> 标签本身
• 避免在 <a></a> 外层再套 <div onclick="..."> —— 事件目标错位、冒泡中断、移动端热区被裁切都由此引发 <h3> <code><label></label> 扩大复选框/单选框热区时，三个条件缺一不可

  <label></label> 映射热区不是靠 CSS 或 JS，而是浏览器对 DOM 结构的硬性解析。哪怕你把 <input type="checkbox"> 用 position: absolute 移出视口，只要它仍是 <label></label> 的直接子节点、未被 display: none 隐藏、且 <label></label> 有渲染尺寸，点击 label 任意位置仍有效。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • <input> 必须是 <label></label> 的**直接子节点**（中间不能有 <span></span>、<div> 或 React Fragment） <li> <code><input> 不能被 display: none、visibility: hidden、opacity: 0 隐藏
  • <label></label> 必须有可渲染尺寸：默认 display: inline 不占空间，需设 display: inline-block 或 block + padding + min-height: 44px

  图像热点（<map></map> + <area>）必须配 alt，否则无障碍直接失败

  <area> 本身不渲染内容，屏幕阅读器完全依赖其 alt 属性提供可访问文本。没有 alt，该区域对视障用户就是“不可见、不可达、不可知”。

  • <img> 的 alt 描述整图用途（如“中国省份分布图”），<area> 的 alt 描述该区域功能（如“点击进入广东省详情页”）
  • 坐标系原点固定为图片左上角，CSS 缩放会破坏 coords 对应关系 —— 若需响应式适配，必须用 JS 动态重算比例，不能只靠媒体查询
  • <area> 不支持 title 属性做无障碍替代，title 仅用于鼠标悬停提示，读屏不读

  真正容易被忽略的是：无障碍不是加一堆 aria- 属性就能修好的。当结构语义断裂（比如用 div 模拟卡片、用 span 包裹复选框）、或视觉与 DOM 错位（比如 pointer-events: none 父容器、overflow: hidden 裁切热区）时，再多 ARIA 也补不回基础可访问性。先理清“这是什么”，再决定“怎么让它可操作”。