这是正确的语义html吗？

Question

我正在为一个网站制作一个组件，我需要根据不同的 W3C 指南制作一个清单。我目前使用表单作为父元素，其中包含文章和不同的详细信息/摘要元素，但我觉得这不是正确的语义 HTML。在组件之外，我已经使用了

和

，所以我并不担心这一点。我只是觉得我使用了

和

元素是错误的。

<form action="">
  {#each principe.richtlijnen as richtlijn}
    <article>
      <div>
        <span>Richtlijn {richtlijn.index}</span>
        <h3>{richtlijn.titel}</h3>
      </div>
      {#each richtlijn.succescriteria as succescriterium}
        <details>
          <summary>
            <label>
              <div>
                <span>Criteria {succescriterium.index} ({succescriterium.niveau})</span>
                <h4>{succescriterium.titel}</h4>
              </div>
              <input
                type="checkbox"
                checked={checkedSuccescriteria.find((e) => e.id === succescriterium.id)}
              />
              </label>
            </summary>
          <div>{@html richtlijn.uitleg.html}</div>
        </details>
      {/each}
    </article>
  {/each}
</form>

这是该组件当前的实时链接：https://dry-checklist-vervoerregio.vercel.app/（由于学校项目，它只是实时的组件）。

任何人都可以帮助我使我的代码更加语义化 HTML 吗？

以下是一些建议。有些是部分主观的语义解释，有些则更为客观。

表格

仅在提交数据时使用表单元素。 表单元素用于“提交信息”。如果表单中的信息没有被发送到任何地方或以某种方式进行处理，则不需要表单元素（并且可能不应该使用）。输入元素不必是表单元素的子元素。

章节与文章

每个标准都有意义被标记为一篇文章。文章元素适用于“独立的组合物”，“旨在独立分发或可重复使用”。 W3C 可访问性清单中的每个标准都可以独立作为独立的、可独立分发的内容。

使用章节元素作为指南。虽然标准本身是文章元素的良好候选者，但指南大多只是将它们分组和组织为“文档的通用独立部分”的模式，因此是一个章节元素似乎最适合他们。

事实上，这就是 W3C 本身在其如何满足 WCAG（快速参考）指南中标记事物的方式：标准的文章元素，指南的章节元素。

摘要元素中的标题和输入元素

虽然根据 HTML 规范将标题和输入元素放在摘要元素内是有效的，但实际上这可能会出现问题。

摘要元素中的标题可能会导致可访问性问题。MDN HTML 元素参考警告：

由于

<summary>

元素具有按钮的默认角色（这会去除子元素的所有角色），因此此示例不适用于屏幕阅读器等辅助技术的用户。遗嘱的角色已被删除，因此不会被视为这些用户的标题。

摘要元素中的输入也是如此。同样，由于摘要元素的作用类似于按钮，因此在其中放置另一个交互式元素（例如复选框输入）可能会给辅助技术用户以及普通用户带来问题，具体取决于在他们的浏览器上。

这些元素最好放置在摘要和详细信息元素之外。

标题组

考虑使用 hgroup 作为补充标题。最近未弃用的 heading group 元素“允许将标题与任何辅助内容（例如副标题、替代标题）进行分组”。与在 div 中使用跨度标记补充标题相比，这是一种更语义化的方法。 请注意，hgroup 中的补充标题应该用段落标记，这不是很直观。请参阅使用说明了解更多信息。

示例

这是采用上述建议的另一种方法：

{#each principe.richtlijnen as richtlijn}
  <section>
    <hgroup>
      <p>Richtlijn {richtlijn.index}</p>
      <h3>{richtlijn.titel}</h3>
    </hgroup>
    <ol>
      {#each richtlijn.succescriteria as succescriterium}
        <li>
          <article>
            <hgroup id={succescriterium.id}>
              <p>Criteria {succescriterium.index} ({succescriterium.niveau})</p>
              <h4>{succescriterium.titel}</h4>
            </hgroup>
            <input aria-labelledby={succescriterium.id} type="checkbox" checked={checkedSuccescriteria.find((e) => e.id === succescriterium.id)} />
            <details>
              <summary>Beschrijving van {succescriterium.titel}</summary>
              <div>{@html richtlijn.uitleg.html}</div>
            </details>
          </article>
        </li>
      {/each}
    </ol>
  </section>
{/each}

Answer 1

以下是一些建议。有些是部分主观的语义解释，有些则更为客观。

表格

仅在提交数据时使用表单元素。 表单元素用于“提交信息”。如果表单中的信息没有被发送到任何地方或以某种方式进行处理，则不需要表单元素（并且可能不应该使用）。输入元素不必是表单元素的子元素。

章节与文章

每个标准都有意义被标记为一篇文章。文章元素适用于“独立的组合物”，“旨在独立分发或可重复使用”。 W3C 可访问性清单中的每个标准都可以独立作为独立的、可独立分发的内容。

使用章节元素作为指南。虽然标准本身是文章元素的良好候选者，但指南大多只是将它们分组和组织为“文档的通用独立部分”的模式，因此是一个章节元素似乎最适合他们。

事实上，这就是 W3C 本身在其如何满足 WCAG（快速参考）指南中标记事物的方式：标准的文章元素，指南的章节元素。

摘要元素中的标题和输入元素

虽然根据 HTML 规范将标题和输入元素放在摘要元素内是有效的，但实际上这可能会出现问题。

摘要元素中的标题可能会导致可访问性问题。MDN HTML 元素参考警告：

由于

<summary>

元素具有按钮的默认角色（这会去除子元素的所有角色），因此此示例不适用于屏幕阅读器等辅助技术的用户。遗嘱的角色已被删除，因此不会被视为这些用户的标题。

摘要元素中的输入也是如此。同样，由于摘要元素的作用类似于按钮，因此在其中放置另一个交互式元素（例如复选框输入）可能会给辅助技术用户以及普通用户带来问题，具体取决于在他们的浏览器上。

这些元素最好放置在摘要和详细信息元素之外。

标题组

考虑使用 hgroup 作为补充标题。最近未弃用的 heading group 元素“允许将标题与任何辅助内容（例如副标题、替代标题）进行分组”。与在 div 中使用跨度标记补充标题相比，这是一种更语义化的方法。 请注意，hgroup 中的补充标题应该用段落标记，这不是很直观。请参阅使用说明了解更多信息。

示例

这是采用上述建议的另一种方法：

{#each principe.richtlijnen as richtlijn}
  <section>
    <hgroup>
      <p>Richtlijn {richtlijn.index}</p>
      <h3>{richtlijn.titel}</h3>
    </hgroup>
    <ol>
      {#each richtlijn.succescriteria as succescriterium}
        <li>
          <article>
            <hgroup id={succescriterium.id}>
              <p>Criteria {succescriterium.index} ({succescriterium.niveau})</p>
              <h4>{succescriterium.titel}</h4>
            </hgroup>
            <input aria-labelledby={succescriterium.id} type="checkbox" checked={checkedSuccescriteria.find((e) => e.id === succescriterium.id)} />
            <details>
              <summary>Beschrijving van {succescriterium.titel}</summary>
              <div>{@html richtlijn.uitleg.html}</div>
            </details>
          </article>
        </li>
      {/each}
    </ol>
  </section>
{/each}