1

我有一个单页网站，向用户显示一排显示新内容的选项卡（照片是按钮） 。

考虑到可访问性和搜索引擎友好性，在
  语义上什么可能被认为是最佳实践？

这是我的想法：

<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>在这种情况下将s包装在<ul>/<li>结构中是多余的吗？

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

更新：

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

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

4

2 回答 2

2

我认为这会奏效，但可能会有更好的整体 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），但如果它的目的不是分发/联合，那么部分就可以了。

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

此外，我认为（但可以更正）使图像和内容在源中更接近对 SEO 有好处，因为图像更有可能与它附近的单词相关联。

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

于 2013-09-06T09:57:38.437 回答
0

遵循@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>可能适合 tablist，因为在我看来，tab 是“水果”部分的导航块似乎是合乎逻辑的。这是可接受的、允许的、不鼓励的还是不可接受的？
  • 标签是否<a>比<button>s 或其他更合适？
  • 怎么样tabindex？这设置正确吗？我不了解tabindex="-1"业务。

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

于 2013-09-07T00:36:56.730 回答