如何指示两个 html 部分是彼此的延续

Question

是否有任何属性或者是否有办法表明两个部分是彼此的延续。下面的例子：

<section id="section-top">
    <div>Item 1 </div>
    <div>Item 2 </div>
</section>
<section id="section-bottom">
    <div>Item 3 </div>
    <div>Item 4 </div>
</section>

我需要将内容保存在单独的部分中，因为在按下展开按钮之前，section-bottom 是隐藏的。因此，当它显示时，我需要指出它是第一个列表的一部分，以便当您向下箭头进入第三项而不是 1/2 时，叙述者会读取 3/4，因为它位于单独的部分中。

这可能吗？

Answer 1

您的示例 HTML 的结构在语义上不正确，也就是说您可以使用 aria 角色和属性向屏幕阅读器公开预期含义。

---

标记

<section aria-label="Group of things">
  <div role="list">
    <section role="none presentation" id="section-top"> 
      <div role="listitem">
        <p>Thing 1</p>
      </div>
      <div role="listitem">
        <p>Thing 2</p>
      </div>
    </section> 
    <section role="none presentation" id="section-bottom"> 
      <div role="listitem" hidden>
        <p>Thing 3</p>
      </div>
      <div role="listitem" hidden>
        <p>Thing 4</p>
      </div>
    </section> 
  </div>
</section>

说明

• 使用role=list 将您的原始<section> 元素包装在<div> 中。

  列表包含角色为 listitem 的子元素，或角色为 group 的元素又包含角色为 listitem 的子元素。

• 将<div> 与role=list 包装在另一个<section> 元素中，并使用aria-label 属性将其转换为一个区域，并为其指定一个可访问的名称。

  <section>，当它具有使用 aria-labelledby、aria-label 或 title 属性的可访问名称时的区域。

• 您的原始<section> 元素已被赋予role=presentation 以否定隐含的角色语义但不影响内容。
• 您的原始<div> 元素已被赋予role=listitem。

  作者必须确保带有role=listitem 的元素包含在具有角色列表或组的元素中或归其所有。

• 您最初隐藏的其他元素已被赋予hidden 属性，您需要使用codeMonkey 中的有用answer 跟进您如何显示/隐藏这些元素。

  “...因为 section-bottom 在按下展开按钮之前是隐藏的。”

Answer 2

纯 HTML 不提供一种方式来传达一个元素是另一个元素的延续。

我认为您应该只使用一个section 元素，并根据需要使用尽可能多的div 元素来对section 中的内容进行分组。

<section>
  <div class="section-top">
    <p>Item 1</p>
    <p>Item 2</p>
  </div>
  <div class="section-bottom" hidden>
    <p>Item 3</p>
    <p>Item 4</p>
  </div>
</section>

由于div 元素不是分段元素，它不会分隔您的内容；所有这些都是同一个section 的一部分。