Question

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

<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>

我对此有一些具体问题。

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

Answer 1

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>

我希望这会有所帮助。

Answer 2

语义在这个层面上往往变得含糊不清，但是，只要每个标签真的算作一个单独的文章，我认为你是在正确的轨道上。

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

Source

我不认为<nav>在这里放错了位置，虽然这取决于不同标签对整个网站的重要程度：

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

Source

我不会使用section来包装内容。

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

Source

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

标签部分的语义标记和WAI-ARIA？

2 个答案: