时间戳

首页 > 解决方案 > 如何指示两个 html 部分是彼此的延续

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

问题描述

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

<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，因为它位于单独的部分中。

这可能吗？

标签： htmlwai-arianarrator

解决方案

您的示例 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>

解释

  • 将原始<section>元素包装在<div>with 中role=list。

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

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

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

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

    作者必须确保具有role=listitem角色列表或组的元素包含或拥有的元素。

  • 您最初隐藏的其他元素已被赋予该hidden属性，您需要自行跟进 codeMonkey关于如何显示/隐藏这些 元素的有用答案。

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

推荐阅读