应使用+而非role="group"进行表单控件归组，因后者无语义关联、不参与提交、不传播disabled、缺乏屏幕阅读器支持；仅当视觉分组但无逻辑表单关系时才谨慎使用role="group"并必须配aria-label。
role="group" 不是表单控件归组的推荐方式，它既不提供语义上的表单关联，也不影响提交行为或键盘导航逻辑——真正该用的是 <fieldset></fieldset> + <legend></legend>。
为什么 role="group" 不能替代 <fieldset></fieldset>
屏幕阅读器对 role="group" 的支持非常有限：多数不会朗读其子元素的可访问名称，也不会将其与表单数据绑定；而 <fieldset></fieldset> 自带隐式 role="group"，且强制要求 <legend></legend> 作为唯一可访问标签，浏览器还保证其内控件在提交时被正确序列化。
-
role="group"不触发任何表单行为（如 disabled 传播、name 属性继承） - 没有
<legend></legend>时，role="group"完全无法被屏幕阅读器识别为有意义的组 - Chrome 和 Safari 对
role="group"的焦点管理存在差异，可能跳过整个组
什么时候可以（谨慎）用 role="group"
仅适用于视觉上成组、但语义上不属于同一逻辑表单域的 UI 区块，比如工具栏按钮组、筛选条件面板里的非关联控件、或嵌套在已有的 <fieldset></fieldset> 中需二次分组的子区域。
- 必须手动添加
aria-label或aria-labelledby，否则组名不可访问 - 避免包裹
<input type="radio">或<input type="checkbox">—— 这些必须用<fieldset></fieldset>+<legend></legend>或role="radiogroup"/role="checkboxgroup" - 不要给
role="group"设tabindex：它不是焦点容器，强行加会导致键盘导航混乱
role="group" 的最小可用示例
以下代码仅在视觉分组且无更好语义选项时才考虑：
<div role="group" aria-label="字体样式选项"> <button aria-pressed="false">粗体</button> <button aria-pressed="false">斜体</button> <button aria-pressed="true">下划线</button> </div>
注意：aria-label 是必需的；按钮必须用 aria-pressed 表达状态；不能用 <input type="button">，因为原生 button 更易获得默认可访问性。
真正需要表单控件归组时，别碰 role="group" —— 它解决不了 name 绑定、disabled 传播、提交包含这些字段的问题。那些“看起来像一组”的错觉，很容易掩盖语义断裂的真实代价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
