字段集替代的语义标记答案

【问题标题】：Semantic markup for fieldset alternative字段集替代的语义标记
【发布时间】：2018-01-24 02:18:50
【问题描述】：

<fieldset> 很棒，因为它有 3 个超级功能。 它...

通过disabled=""变成:disabled
支持<legend>
提供语义分组

但是...我遇到<fieldset> 破坏布局的情况

所以我求助于<div> 并寻求ARIA role

或任何合理的标记替代方式

<div aria-disabled="false">
  What role could this have to simulate fieldset
</div>

似乎可以通过aria-disabled 解决
似乎可以通过进入内部解决。或者通过<figure>？
是否有可以使用的通用分组role？ <div><figure> 或<section>?

【问题讨论】：

您能否详细说明一下如何 <fieldset> 破坏了您的布局？所有浏览器都支持它（尽管:disabled 在 IE 中参差不齐）。您能否分享一个代码示例并指出它适用于哪些浏览器以及它不适用于哪些浏览器？你有什么限制吗？像 CSS 解决方案就足够了吗？
@ObsidianAge 一个可能的原因是<fieldset> 和<legend> 不能是弹性容器。

标签： html markup semantic-markup wai-aria fieldset

【解决方案1】：

你要找的是“组”角色

<div role="group" aria-disabled="false" aria-labelledby="fieldset_title">
  <div id="fieldset_title">Title</div>
  <div>element1</div>
  <div>element2</div>
</div>

您可以在以下页面找到更多示例： Using grouping roles to identify related form controls

【讨论】：