Html 创建带有分隔符/子标题的可访问列表

我正在尝试确定创建具有子标题（或组分隔符/可折叠标题，如果愿意）的可访问手风琴/列表的最佳方法

为了说明这一点，这是默认设置的外观（示意图）：

有些项目是可点击的（并通过更改背景颜色和光标提供提示），有些则不是（如“列表项目13”）

某些（或所有）子标题可能是可折叠的（稍后添加一些附加提示）：

现在，可以通过几种可能的方式实现该结构：

选项1。让标准和可访问性见鬼去吧

<ul>
  <div class="header"><a href="...">Header 1</div>
  <li><a href="...">List item 11</a></li>
  <li><a href="...">List item 12</a></li>
  <li><span>List item 13</span></li>
  <div class="header"><a href="...">Header 2</div>
  <li><a href="...">List item 21</a></li>
  <li><span>List item 22</span></li>
</ul>

清单项目13

清单项目22

这个确实有用。它是不可访问的，也不能通过HTML验证，但它可以工作

选项2。嗯，至少它通过了验证程序

<ul>
  <li class="header"><a href="...">Header 1</a></li>
  <li><a href="...">List item 11</a></li>
  <li><a href="...">List item 12</a></li>
  <li><span>List item 13</span></li>
  <li class="header"><a href="...">Header 2</a></li>
  <li><a href="...">List item 21</a></li>
  <li><span>List item 22</span></li>
</ul>

清单项目13


清单项目22

这一个通过了验证，并且在一定程度上可以访问，但不允许在标题和常规可单击列表项之间进行区分（就屏幕阅读器而言）

选项3。TL；DR

<ul>
  <li>
    <a class="header" href="...">Header 1</a>
    <ul>      
      <li><a href="...">List item 11</a></li>
      <li><a href="...">List item 12</a></li>
    </ul>
  </li>
  <li>
     <a class="header" href="...">Header 2</a>
     <ul>       
       <li><a href="javascript:;">List item 21</a></li>
       <li><span>List item 22</span></li>
     </ul>
  </li>
</ul>

清单项目22

这一个，或者是一些经过深思熟虑的变化，似乎就是其中之一。可访问，因为我假设屏幕阅读器应该正确读取外部或内部项目符号，并通过验证

它只是需要更多的PITA代码和维护。从JS和CSS的角度来看，尤其是如果它是一个插件，打算扩展和定制

---

所以问题是——如果有，上面哪一个会更好。或者，最终的手风琴/列表实现是什么？（根据我的经验，这可能是一个白日梦）

第三个选项在可访问性方面远远优于其他两个选项。如果手风琴/列表确实有很多内容，那么在每个列表项中添加标题（

，

，等等）可能是值得的。这将为页面提供更多的语义结构，这将有助于使用辅助技术的用户

<h1>Some sections</h1>

<ul>
  <li>
    <h2><a class="header" href="...">Header 1</a></h2>
    <ul>      
      <li><a href="...">List item 11</a></li>
      <li><a href="...">List item 12</a></li>
    </ul>
  </li>
  <li>
     <h2><a class="header" href="...">Header 2</a></h2>
     <ul>       
       <li><a href="javascript:;">List item 21</a></li>
       <li>List item 22</li>
     </ul>
  </li>
</ul>

某些部分










清单项目22

第三个选项也是使用JavaScript进行风格设计和操作的最佳选择，因为它具有层次性

隐式剖切 评论中有一个关于隐含和明确部分的讨论，所以我想我会解决它。我试图下载来测试这一点，但不幸的是，它似乎没有显示在酒吧。以下是我的理解：

HTML5中的分段根元素是：

我认为（找不到来源）隐式分区和显式分区一样具有“范围”。由于文档大纲是一个列表，根据这样的文档大纲，上面的
后面的
仍然是1.1标题1的一部分

<!-- start 1. Some sections -->
<h1>Some sections</h1>

<ul>
  <li>
    <section>
      <!-- start 1.1. Header 1 -->
      <h2><a class="header" href="...">Header 1</a></h2>
      <ul>      
        <li><a href="...">List item 11</a></li>
        <li><a href="...">List item 12</a></li>
      </ul>
    </section>
  </li>
  <li>
    <!-- end 1.1. Header 1 -->
    <section>
      <!-- start 1.2. Header 2 -->
      <h2><a class="header" href="...">Header 2</a></h2>
      <ul>      
        <li><a href="javascript:;">List item 21</a></li>
        <li>List item 22</li>
      </ul>
    </section>
  </li>
</ul>

<!-- end 1. Some sections -->

部分章节










清单项目22

也就是说，一旦你开始一个子部分，你就不能结束它，直到你开始另一个部分，所以
将包含在'1.1'的末尾。标题“1”，也包含在其父节“1”中。“某些部分”
工具书类
---

注意：对于HTML5，您应该明确使用

部分

然后（在列表中使用标题时）。@unor这是从哪里获得的？根据W3C-任何流内容（H2是）都可以是

li

的内容。以上是完全有效的HTML5。@ZenMaster:在语法上是允许的。但这将是文件大纲的一个问题：新章节的开始(→ 标题所介绍的开场白

li

），仍然是上一节的一部分。如果您明确地使用

部分

（或任何其他部分元素），则该部分的开始和结束将被明确指定。@unor不确定我是否遵循。如果H2位于不同的流动元件中，为什么它仍然是上一节的一部分？@DanielImms给出了令人惊叹的答案和解释。然而，@unor似乎意味着下一个“外部”

li

，这让我大吃一惊，并引发了讨论的大部分。接受。你能举一个实际的例子吗？嗯。。。什么都可以。标题为字母的项目列表，该部分中的项目以字母开头。或任务列表，任务根据优先级分为多个子部分。你的选择。

<!-- start 1. Some sections -->
<h1>Some sections</h1>

<ul>
  <li>
    <section>
      <!-- start 1.1. Header 1 -->
      <h2><a class="header" href="...">Header 1</a></h2>
      <ul>      
        <li><a href="...">List item 11</a></li>
        <li><a href="...">List item 12</a></li>
      </ul>
    </section>
  </li>
  <li>
    <!-- end 1.1. Header 1 -->
    <section>
      <!-- start 1.2. Header 2 -->
      <h2><a class="header" href="...">Header 2</a></h2>
      <ul>      
        <li><a href="javascript:;">List item 21</a></li>
        <li>List item 22</li>
      </ul>
    </section>
  </li>
</ul>

<!-- end 1. Some sections -->