如何表示两个 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>

我需要将内容放在单独的部分中，因为在按下展开按钮之前，部分底部是隐藏的。因此，当它显示时，我需要指出它是第一个列表的一部分，以便当您向下箭头进入项目三而不是 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> 中。

Lists contain children whose role is listitem, or elements whose role is group which in turn contains children whose role is listitem.
将 <div> 和 role=list 包裹在另一个 <section> 元素中，并使用 aria-label 属性将其转换为一个区域，并为其指定一个可访问的名称。

<section>, region when it has an accessible name using aria-labelledby, aria-label or title attribute.
您的原始 <section> 元素已被赋予 role=presentation 以否定隐式角色语义但不影响内容。
您的原始 <div> 个元素已被赋予 role=listitem。

Authors MUST ensure elements with role=listitem are contained in, or owned by, an element with the role list or group.
您最初隐藏的其他元素已被赋予 hidden attribute, and you will need to follow up yourself with the useful from codeMonkey 关于您如何 show/hide 这些。

"…because section-bottom is hidden until an expanding button is pressed."

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.

的一部分

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

How to indicate two html sections are continuation of each other

html

wai-aria

narrator

标记

说明