HTML5 和 ARIA 语义：DHTML 子导航

Question

我有一个单页网站，向用户展示了一排显示新内容的标签（照片是按钮）。强>

考虑到可访问性和搜索引擎友好性，
  从语义上来说，最佳实践是什么？

这是我的想法：

<section class="fruits">
  <h1>Fruits</h1>
  <nav>
    <a data-article-class="banana"> 
      <p>Learn about <strong>Bananas</strong></p> </a>
    <a data-article-class="apple" class="is-selected"> 
      <p>Learn about <strong>Apples</strong></p> </a>
    <a data-article-class="pear">
      <p>Learn about <strong>Pears</strong></p> </a>
  </nav>
  <div>
    <article class="banana">
      <h1>The Banana</h1>
      <p>A long yellow fruit...</p>
    </article>
    <article class="apple is-selected">
      <h1>The Apple</h1>
      <p>A round red fruit...</p>
    </article>
    <article class="pear">
      <h1>The Pear</h1>
      <p>A funny-shaped green fruit...</p>
    </article>
  </div>
</section>

• 当用户单击<a> 标记之一时，JavaScript 会将is-selected 类放在<a> 及其对应的<article> 上。
• <a> 标记将使用 CSS 设置样式，使其看起来像可点击的图像，其中的文本可见。
• is-selected 类表示当前选择了哪个链接和对应的文章——CSS 将display:none; 所有文章，然后display:block; 具有is-selected 的文章。

确切地说，我的问题是：

• 我应该使用带有内部<a> 元素的<nav> 元素吗？

• 在这种情况下将<a>s 包装在<ul>/<li> 结构中是否多余？

• 有没有更好的方法在语义上表示导航和此类部分的文章之间的关系？

---

更新：

@AlastairC 的信息丰富的回答让我朝着正确的方向前进。不过，他提出了一种更语义化的嵌套格式，不幸的是，这与我想要的这个选项卡单元的基于 display:table-cell; 的布局不兼容。

根据 Alastair 的建议，我使用 ARIA 标准修改了社区 wiki 答案中的标记（将选项卡与它们控制的内容相关联）。我想我会选择 Alastair 的答案，但如果有人可以使用备用标记评论或改进社区 wiki 答案，我将非常感激。

Answer 1

我认为这可行，但可能会有更好的整体 HTML 方法，以更少的工作获得更好的结果。对于可访问性（我的专业领域），我会考虑这种情况的这些要求：

1. 是否可以使用键盘（但看到屏幕）选项卡到图像并选择它们？
2. 有轻度至中度视觉障碍的人能否使用浏览器控件放大并仍然看到内容（这可能更多地是在 CSS 方面而不是语义方面，所以我不会在这里介绍）。
3. 屏幕阅读器用户是否可以通过选择图片告诉您有更多信息，并在选择图片时找到信息。

我可以想到两种主要方法来实现您所描述的内容，到目前为止，您采用了“选项卡”方法，顶部有一组控件，下面的内容显示选定的选项。

另一种方法是嵌套，如下所示：

<section class="fruits">
  <h1>Fruits</h1>
  <ul>
    <li>
       <a data-article-class="banana"> 
         <p>Learn about <strong>Bananas</strong></p>
       </a>
       <div id="content-banana">
         <h2>The Banana</h2>
         <p>A long yellow fruit...</p>
       </div>
    </li>
    ...
  </ul>
</section>

然后您需要将可见内容放置在您希望的位置。从描述中我不能完全确定这是否可行（没有图表），但通常是可行的。

这两种方法都可以满足纯键盘和缩放场景，但您需要为屏幕阅读器执行的操作差异很大。

对于 tab 方法，您需要使用 WAI-ARIA 来设置控件和内容之间的关系，并花费大量时间来操作键盘控件（请参阅 Tabs design pattern） .否则，当屏幕阅读器用户选择图片时，他们不知道内容出现在哪里。

对于嵌套方法，DOM 有一个内在的关系设置，所以事情变得更容易了。 屏幕阅读器用户将向下浏览（通常是“箭头”）到图像并选择它。我建议在选中时将键盘焦点移至新内容，因此在显示内容的函数末尾，您可以添加如下内容：

$('#content-banana').attr('tabindex', '-1').css('outline', 'none');
$('#content-banana').focus();

这使 div 可聚焦，删除轮廓（这不是必需的，因为无论如何您都不能“制表”到它），并将焦点设置在那里。 注意：看起来你可以合并这些行，但我发现这在屏幕阅读器中无法可靠地工作。

完成阅读后，屏幕阅读器用户可以简单地向下箭头到下一个项目并选择（或不选择），不存在知道内容在哪里的问题。

至于使用什么标签，<article> 不是很适合这里，除非有相当多的内容。它可能适用于整个项目（替换section），但如果不是aimed at being distributed/syndicated，则部分很好。

我倾向于使用列表作为容器，因为它为屏幕阅读器用户提供了一种在他们不感兴趣的情况下跳过其余项目的方法。使用嵌套方法“导航”根本不适合。即使在选项卡方法中，W3C 也推荐选项卡控件的列表和链接。

另外，我认为（但可以纠正）图像和内容在源中更靠近有利于 SEO，因为图像更有可能与附近的单词相关联.

注意：我还应该指出，如果图像有意义，它们应该是具有适当 alt 属性的前景图像。

Answer 2

按照@AlastairC 的指导，我已经启动了这个解决方案，其中包括WAI-ARIA Tab Panel Widget 的东西：

<!--( My Fruit Tabbing Widget )-->
<section class="fruits" role="application">
  <h1>Fruits</h1>

  <nav role="tablist"><ul> <!--( The Tabs )-->
    <li>
      <a id="fruit_tab_1" role="tab" 
       tabindex="1" aria-controls="fruit_content_1"> 
        <p>Learn about <strong>Bananas</strong></p> </a> </li>
    <li>
      <a id="fruit_tab_2" role="tab" 
       tabindex="2" aria-controls="fruit_content_2"> 
        <p>Learn about <strong>Apples</strong></p> </a> </li>
    <li>
      <a id="fruit_tab_3" role="tab" 
       tabindex="3" aria-controls="fruit_content_3">
        <p>Learn about <strong>Pears</strong></p> </a> </li>
  </ul></nav>

  <div role="tabpanel"> <!--( The Content )-->
    <section id="fruit_content_1" 
     role="tabpanel" aria-labelledby="fruit_tab_1">
      <h1>The Banana</h1>
        <p>A long yellow fruit...</p> </section>
    <section id="fruit_content_2"
     role="tabpanel" aria-labelledby="fruit_tab_2">
      <h1>The Apple</h1>
      <p>A round red fruit...</p> </section>
    <section id="fruit_content_3"
     role="tabpanel" aria-labelledby="fruit_tab_3">
      <h1>The Pear</h1>
      <p>A funny-shaped green fruit...</p> </section>
  </div>

</section>

<!--( JavaScript will apply and manipulate 
  aria-hidden attributes on the section tabpanels, 
  and aria-selected on the tabs, as well as provide 
  basic CSS changes for showing or hiding content )-->

如果有人可以提供澄清或改进：

• 我是否正确实现了上面的 ARIA？我是新手。 我看到了一些官方示例，其中包括大量用于我选择忽略的键盘功能的 JavaScript。
• 我不禁觉得<nav> 可能适合tablist，因为在我看来，tab 是“水果”部分的导航块似乎是合乎逻辑的。这是可接受的、允许的、不鼓励的还是不可接受的？
• <a> 标签是否比 <button>s 更合适？
• tabindex 呢？这设置正确吗？ 我不了解tabindex="-1" 业务。

此答案设置为社区 wiki，希望像您这样的人可以改进它。