正确做法是用 包裹按钮组、 作标题，确保语义清晰和无障碍支持；单选用 type="radio" 并共享 name，监听 change 事件，保持原生可访问性。
用 <fieldset></fieldset> + <legend></legend> 包裹按钮组，语义才正确
很多开发者直接用 <div> 套一堆 <code><button></button> 或 <label></label>，结果屏幕阅读器无法识别这是“一组有共同主题的选项”。真正符合无障碍规范且语义清晰的做法是：用 <fieldset></fieldset> 定义控制域，<legend></legend> 作分类标题。浏览器和读屏软件会自动把内部所有可交互元素关联到这个分类下。
常见错误现象：TypeError: element.getAttribute is null（某些 JS 库尝试读取父级 legend 文本失败），往往是因为漏写了 <legend></legend> 或把它放到了 <fieldset></fieldset> 外面。
-
<legend></legend>必须是<fieldset></fieldset>的第一个子元素 - 不要用
<h3></h3>替代<legend></legend>—— 语义不同，辅助技术不认 - 如果分类标题需隐藏视觉样式但保留可访问性，用
class="sr-only"配合 CSS，而非aria-hidden="true"或display: none
单选还是多选？决定用 <input type="radio"> 还是 <input type="checkbox">
导航类分类按钮，绝大多数场景是「单选」——用户一次只选一个频道、一个栏目、一个筛选维度。这时候必须用 radio，且所有同组按钮共享同一个 name 属性；若误用 checkbox，会导致逻辑混乱，JS 判断选中状态时容易漏掉“取消其他项”的逻辑。
使用场景差异：
- 筛选条件（如“价格区间”“品牌”）→ 用
radio，强调互斥 - 组合筛选（如“支持 iOS / 支持 Android / 支持 Web”）→ 才用
checkbox - 导航主菜单项（如“首页 / 产品 / 关于”）→ 实际是链接，应优先用
<a></a>，而非表单控件
注意：radio 组默认无初始选中项，若业务要求默认选中第一项，务必显式加 checked 属性，否则 JS 里 document.querySelector('input[name="cat"]:checked') 会返回 null。
按钮外观靠 CSS 控制，但别用 appearance: none 破坏原生行为
想让单选按钮看起来像卡片或标签？可以。但很多人直接对 <input type="radio"> 设置 appearance: none 再手动画 UI，结果导致 macOS Safari 或旧版 Edge 上焦点环消失、键盘 Tab 跳过该控件、甚至部分安卓 WebView 无法触发 change 事件。
更稳妥的做法：
- 保持
<input>原生存在（哪怕透明），用相邻兄弟选择器input[type="radio"] + label控制样式 - 确保
<label></label>包裹文字或图标，并通过for属性或嵌套绑定到对应input - 禁用鼠标默认点击反馈时，改用
pointer-events: none在input上，而不是移除它
示例结构：
JS 监听选中变化时，别只监听 click，要兼顾键盘操作
用户可能用 Tab 键聚焦后按空格或方向键切换 radio，此时不会触发 click 事件。只监听 click 会导致键盘用户操作无响应。
正确做法是监听 change 事件 —— 它在所有选中状态变更时触发（包括鼠标、空格、方向键、脚本赋值）：
- 监听对象必须是
<input type="radio">元素本身，不是<label></label> - 避免给每个
radio单独绑事件，用事件委托监听fieldset更高效 - 获取当前值用
event.target.value，别依赖querySelector(':checked')—— 后者在异步回调里可能已滞后
容易被忽略的一点：如果按钮组用于导航（比如跳转页面），change 触发后应立即执行跳转，不要等用户再点“确认”按钮 —— 导航场景下延迟交互反而破坏直觉。
