标记

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>

我需要将内容保留在单独的部分中，因为在按下扩展按钮之前，部分底部一直处于隐藏状态。因此，当它显示时，我需要指出它是第一个列表的一部分，以便当您向下箭头进入第3项而不是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属性，您将需要继续学习answer中有用的codeMonkey，以了解如何显示/隐藏这些元素。

”“…因为底部一直处于隐藏状态，直到按下扩展按钮为止。”

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节是彼此延续的

2 个答案:

标记

说明