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的文章。

确切地说，我的问题是：

• 我应该将<nav>元素与内部<a>元素一起使用吗？

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

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

---

更新：

@AlastairC的翔实答案向正确的方向发送了我。 不过，他提出了一种更具语义的嵌套格式，很遗憾，该格式与display:table-cell;不兼容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>

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

两种方法都可以满足仅使用键盘和缩放的情况，但是您需要为屏幕阅读器做的工作却相差很大。

对于选项卡方法，您将需要使用WAI-ARIA来设置控件和内容之间的关系，并花费大量时间来操作键盘控件（请参见选项卡设计模式 ）。 否则，当屏幕阅读器用户选择图片时，他们不知道内容出现在何处。

对于嵌套方法 ，DOM提供了一个固有的关系设置，因此事情变得更加容易。 屏幕阅读器用户可以浏览（通常为“箭头”）图像，然后选择它。 我建议您选择键盘焦点时将其移至新内容，因此在显示内容的功能结尾处，您将添加以下内容：

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

这样就可以使div具有焦点，删除轮廓（不需要，因为您始终无法“跳至”轮廓），然后在此处设置焦点。 注意：看起来您可以组合使用，但我发现在屏幕阅读器上无法正常工作。

阅读完毕后，屏幕阅读器用户只需简单地向下箭头导航到下一项并选择（或不选择），就不会知道内容在哪里。

至于使用什么标签，除非有很多内容，否则<article>并不真正适合这里。 它可能适用于整个项目（替换section ），但是如果不旨在进行分发/联合，则section很好。

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

另外，我认为 （但可以纠正）源中将图像和内容更靠近在一起对于SEO很有好处，因为图像更可能与附近的单词相关联。

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

Answer 2

遵循@AlastairC的指导，我开始了此解决方案，其中包括WAI-ARIA选项卡面板小部件 ：

<!--( 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>可能适合该选项卡列表，因为对我来说，这些选项卡是“水果”部分的导航块似乎很合逻辑。 这是可接受的，允许的，沮丧的还是不可接受的？
• <a>标签是否比<button>更合适？
• 那么tabindex呢？ 这个设置正确吗？ 我不了解tabindex="-1"业务。

该答案被设置为社区Wiki，希望像您这样的人可以改善它。