2

我正在学习 HTML5，并获得了一个将 CSS Zen Gardens 转换为 HTML5 语义版本的项目。我已经能够轻松转换其中的大部分内容，但是底部的链接/导航给我带来了一些问题。
转换此/处理多个导航的最佳方法是什么？

<div id="linkList2">
     <div id="lselect">
          <h3 class="select"><span>Select a Design:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="larchives">
          <h3 class="archives"><span>Archives:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="lresources">
          <h3 class="resources"><span>Resources:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
</div>

目前，我在认为 linkList2 应该是一个部分，每个子 div 元素应该是导航元素，或者 linkList2 应该是导航，子 div 元素是部分之间纠结。

4

2 回答 2

6

如果你做linkList2了一个，section那么你的语义是“这是本节的导航”。请注意，nav它已经在对content 进行分段，因此将其包装在 asection中会有些多余。

另请注意，规范说：

并非页面上的所有链接组都需要位于 nav 元素中——该元素主要用于由主要导航块组成的部分。

没有必要nav仅仅为了它而将每组链接都放在一个中。我认为您制作linkList2a的方法nav是最好的，尽管我不会太担心制作子元素section：

<nav id="linkList2">
     <div id="lselect">
          <h1 class="select"><span>Select a Design:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="larchives">
          <h1 class="archives"><span>Archives:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="lresources">
          <h1 class="resources"><span>Resources:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
</nav>

正如我上面提到的，nav是对内容进行分段，所以所有的标题都应该是h1它们各自部分中的所有最高级别的标题（我已经在上面更改了它们）。但是，我认为，从实际可访问性的角度来看，仍然允许将它们保留为标记中的h3前面h2和h1标题。

另一种可以的方法是：

<div id="linkList2">
     <nav id="lselect">
          <h1 class="select"><span>Select a Design:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
     <nav id="larchives">
          <h1 class="archives"><span>Archives:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
     <nav id="lresources">
          <h1 class="resources"><span>Resources:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
</div>

正如我之前提到的，不要用section（或article）包装nav就足够了。

最后一点，因为您的问题是关于语义的。我知道您正在处理 CSS Zen Garden 的标记，所以重点可能是让您的新页面中的元素与所有旧页面相对应，以便所有样式表仍然有效，但您应该知道这不是一个好的示例'语义标记'。以下是您应该注意的一些事项：

  • 这个标记创建于 2003 年，所以它永远不会成为我们目前认为好的语义标记的一个很好的例子。
  • 按照设计，CSS Zen Garden上的标记必须保持不变——它是 CSS 的演示，而不是 HTML 的演示。
  • 因为在2003 年 IE6 是占主导地位的浏览器，而且无论如何都没有其他人在 CSS3 方面真正走得那么远，所以这个标记包含许多不必要的额外元素作为样式的可供性。值得注意的span是标题中的所有元素和（更有争议的）子div元素lselect和。larchiveslresources
  • 除了缺少OOOCSS 之外，这个标记还展示了classitis - 不需要到处都有多个id和class属性。例如，不需要同时具有idoflselect和 a classof select，而是可以只使用选择器#lselect h1。
  • 最后，linkList2是一个可怕的id语义。它不在链表上，它是否是第二个取决于标记的所有其余部分。使用的ids 和class名称也是语义标记的一部分。
于 2012-12-31T11:54:40.797 回答
2

您应该使用<nav>HTML5 元素，因为这不仅是您想要的最语义化的元素，而且它还允许使用屏幕阅读器的人使用地标（<nav>将对应于navigation地标）导航页面。

现在，如果您网站的多个区域带有链接（例如：主导航和辅助导航），您应该确保<nav>正确标记不同的元素。这使得屏幕阅读器正确地宣布地标（例如：“主要，导航”，“次要，导航”），而不是一般地宣布​​一切为“导航”），这可能会造成混淆。

要标记<nav>元素，您可以执行以下操作之一：

选项 1：屏幕上没有可见文本

用于aria-label为元素提供文本替换。

<nav aria-label=’primary’&gt;
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’&gt;
  <ul>
    ...List on links here...
  </ul>
</nav>

选项 2：屏幕上的可见文本

如果屏幕上有可以识别区域的文本（例如：“相关内容”），您可以使用aria-labelledby.

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

这里有一些资源可以进一步解释这一点：

于 2019-10-09T13:23:54.093 回答