6

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

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

在此处输入图像描述

有些项目是可点击的（并通过更改背景颜色和更改光标来提供提示），有些则不是（如“列表项目 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 的角度来看，特别是如果它是一个旨在扩展和定制的插件。

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

4

1 回答 1

5

第三种选择在可访问性方面远远胜过其他两种。如果手风琴/列表确实有很多内容，那么可能值得为每个列表项添加标题（<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

    1.2. 标题 2

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

它在语法上是允许的。但这对于文档大纲来说将是一个问题：由标题引入的新部分的开始（→开头 li）仍然是前一部分的一部分。如果您使用节（或任何其他节元素）显式，则明确指定该节的开始和结束。

I believe he's saying that the <li> before '1.1. Header 1' would be part of the section '1. Some sections' which is true and I'm my opinion not a problem as the <li> should belong to the section above. The usage of a sectioning root element like <section> to explicitly define a section block would lead to very much the same result as we had previously:

<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>

I'm of the opinion (can't find a source) that implicit sectioning is just as 'scoped' as explicit sectioning would be. Since the document outline is a list the </li> after the </section> in the above would still be part of 1.1 Header 1 according to the document outline like this.

<!-- 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. 一些部分'。

参考

于 2013-03-30T18:23:53.580 回答