9

我正在标记一个网站，我一直在努力磨练我的可访问性技能。我想知道标签式内容最语义化的标记是什么。这就是我现在所拥有的：

<section>
  <nav>
    <a href="#tab" aria-controls="content">Stuff</a>
    <a href="#tab" aria-controls="content">Stuff</a>
    <a href="#tab" aria-controls="content">Stuff</a>
  </nav>
  <section id="content" aria-live="polite" role="region">
    <article>...</article>
    <article>...</article>
    <article>...</article>
   </section>    
</section>

我对此有几个具体问题。

  1. 我在正确的轨道上吗？如果没有，有人可以推荐一些更改吗？
  2. 如果我要通过 AJAX 加载文章，是否需要进行更改？
  3. 我需要导航标签吗？
  4. 这里的 WAI-ARIA 角色足够了吗？
  5. 这些是正确的 WAI-ARIA 角色吗？
4

2 回答 2

10

1.我在正确的轨道上吗？如果没有，有人可以推荐一些更改吗？

是的，你绝对是以一个好的方式开始的。如果你想改进它，一些选项卡的东西可以被赋予一些与选项卡相关的角色，但它的功能是不变的。

2.如果我通过AJAX加载文章，是否需要进行更改？

不，应该没问题。它是一个实时区域这一事实应该（仅使用 NVDA 测试）意味着宣布了新内容。这是你所追求的行为吗？

3.我需要导航标签吗？

不，但我认为这有助于明确该文件的用途。不过请注意，如果您按照我在下面所做的操作并将其标记为选项卡列表，那么它是导航元素的事实将不再被宣布。

4.WAI-ARIA 的角色够吗？

如果通过 ARIA 角色，您还包括状态和属性，是的，基本上您应该被覆盖以加载动态内容（如果这是您所追求的）。没有任何情况可以移动用户的键盘焦点或任何东西。IMO，只有在用户单击的内容和您提供给他们的内容之间存在很多导航内容时，您才会真正想要这样做。

5.这些是正确的 WAI-ARIA 角色吗？

你不远了。如果你真的想要一个标签式的体验，那么你需要 tablist、tab 和 tabpanel 角色。我举个例子。

我已经采用了您的代码并制作了一个人为但有效的示例来测试它。它不会在 AJAX 中加载任何内容，只是显示和隐藏内容。在给出这个答案之前，我想确定一下，但我也会把代码放在这里以防万一。

<html>
    <head>
        <title>Aria test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('nav a').on('click', function () {
                    hideArticles();
                    deslectAllTabs();
                    $(this).attr('aria-selected', true);
                    var tab = '#' + $(this).attr('aria-controls');
                    $(tab).show();
                });
            });

            function hideArticles() {
                $('article').hide();
            }
            function deslectAllTabs() {
                $('nav a').attr('aria-selected', false);
            }
        </script>
        <style type="text/css">
            article { display: none; }
        </style>
    </head>
    <body>
    <section>
        <nav role="tablist">
            <a href="#tab" aria-controls="content1" id="tab1" role="tab">Stuff1</a>
            <a href="#tab" aria-controls="content2" id="tab2" role="tab">Stuff2</a>
            <a href="#tab" aria-controls="content3" id="tab3" role="tab">Stuff3</a>
        </nav>
        <section id="content" aria-live="polite" role="region">
            <article id="content1" role="tabpanel">The lazy dog jumped over the quick fox</article>
            <article id="content2" role="tabpanel">If you click this tab then your life will be better</article>
            <article id="content3" role="tabpanel">Know your roles</article>
        </section>    
    </section>
    </body>
</html>

我希望这有帮助。

于 2013-10-06T00:33:19.103 回答
1

语义在这个级别上往往会变得模糊，但是我认为你走在正确的轨道上，只要每个选项卡都真正算作单独的文章。

article 元素表示页面的一个组件，该组件由文档、页面、应用程序或站点中的自包含组合组成，并且旨在独立分发或可重复使用，例如在联合中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项目。

资源

我不认为<nav>这里放错了位置，尽管这取决于不同选项卡对整个网站的重要性：

nav 元素表示链接到其他页面或页面内的部分的页面部分：具有导航链接的部分。并非页面上的所有链接组都需要位于 nav 元素中，只有包含主要导航块的部分才适用于 nav 元素。特别是，页脚通常具有指向站点各个关键部分的链接列表，但页脚元素在这种情况下更合适，并且这些链接不需要导航元素。

资源

不过，我不会使用sections 来包装东西。

section 元素不是通用容器元素。当一个元素仅用于样式目的或为了方便编写脚本时，鼓励作者使用 div 元素。一般规则是，只有当元素的内容明确地列在文档大纲中时，section 元素才是合适的。

资源

元素的另一个首要规则<section>是它们应该有一个标题。如果不是，它可能不是真正的“部分”，而只是您需要包装的一组元素，所以只需使用<div>.

于 2013-10-05T23:09:34.367 回答