创建带有分隔符/子标题的可访问列表
Zen*_*ter 6 html accessibility
我正在尝试确定创建具有子标题（或组分隔符/可折叠标题，如果您愿意）的可访问手风琴/列表的最佳方法。
为了说明，这是默认的外观（示意图）：
有些项目是可点击的（并通过更改背景颜色和更改光标来提供提示），有些则不是（如“列表项目 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>
这个确实有效。它不可访问且未通过 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>
这个通过验证并且在一定程度上可以访问，但不允许区分标题和常规可点击列表项（就屏幕阅读器而言）。
选项 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>
这个，或者它的一些更深思熟虑的变体似乎是一个。可访问，因为我认为屏幕阅读器应该正确读取外部或内部项目符号并通过验证。
编码和维护需要更多的 PITA。从 JS 和 CSS 的角度来看，特别是如果它是一个旨在扩展和定制的插件。
所以问题是 - 以上哪一个（如果有的话）会更好。或者，或者，最终的手风琴/列表实现是什么？（根据我的经验，这可能是一个白日梦）
在可访问性方面，第三个选项远远超过其他两个选项。如果手风琴/列表确实有很多的内容，那么它可能是值得加入标题（<h1>，<h2>，等），每个列表项。这将为页面提供更多语义结构，这将有助于使用辅助技术的用户。
<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>
由于其分层性质，第三个选项也是使用 JavaScript 进行样式和操作的最佳选择。
隐式切片
在评论中有关于隐含和显式部分的讨论，所以我想我会解决它。我试图下载HTML5 Outlier Chrome 扩展程序来测试这个，但不幸的是它似乎没有出现在栏中。以下是我的理解：
HTML5 中的分节根元素是：
<body><blockquote><details><fieldset><figure><td><nav><aside><footer><header>
由于它们都不存在，因此这些部分对于标题元素的使用是隐含的，就像在 HTML4 中一样，因此上面标记的文档大纲如下所示：
部分栏目
1.1. 标题 1
1.2. 标题 2
这正是我们所期望的，也是我们想要的。这是来自unor的评论
它在语法上是允许的。但这将是文档大纲的一个问题：由标题引入的新部分的开始（？开头 li）仍将是上一部分的一部分。如果您明确使用节（或任何其他分节元素），则明确指定该节的开始和结束。
我相信他说的是<li>'1.1. 标题 1' 将是部分 '1. 有些部分是真的，我认为这不是问题，因为它们<li>应该属于上面的部分。使用分<section>节根元素（如显式定义节块）会导致与我们之前的结果非常相似：
<ul>
<li>
<section>
<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>后面</section>仍然是 1.1 Header 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 -->
也就是说，一旦你开始一个小节，你就不能结束它，直到你开始另一个节，所以它</li><li>会被包含在'1.1的末尾。标题 1'，也包含在其父节 '1. 某些部分'。