Question

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

为了说明，这是默认的（示意性）：

enter image description here

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

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

enter image description here

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

选项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的角度来看，特别是如果它是一个旨在扩展和定制的插件。

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

Answer 1

在可访问性方面，第三种选择远远超过了其他两种选择。如果手风琴/列表确实包含大量内容，则可能值得为每个列表项添加标题（<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 extension来测试这个，但不幸的是它似乎没有显示在栏中。以下是我的理解：

HTML5中的切片根元素是：

<body>
<blockquote>
<details>
<fieldset>
<figure>
<td>
<nav>
<aside>
<footer>
<header>

由于它们都不存在，所以这些部分隐含在标题元素的使用中，就像在HTML4中一样，因此上面标记的文档大纲将如下所示：

部分内容

1.1。标题1

1.2。标题2

这正是我们所期望的和我们想要的。这是来自unor的评论

语法上允许这样做。但是对于文件大纲来说这将是一个问题：标题引入的新部分（→开放式li）的开始仍将是上一部分的一部分。如果您使用明确的部分（或任何其他切片元素），则明确指定该部分的开头和结尾。

我相信他说'{1}}之前的'{1}}。标题1'将成为第1节的一部分。有些部分是真的，我认为这不是问题，因为<li>应该属于上面的部分。使用像<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>仍然是1.1 Header 1的一部分，根据文档大纲这样。

</section>

也就是说，一旦你开始一个小节，你就不能结束它，直到你开始另一节，所以{1.1}将包含在{1.1}的末尾。标题1'也包含在其父节'1中。有些部分'。

使用分隔符/子标题创建可访问列表

1 个答案:

隐式切片

参考