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

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

html

Html 标签部分的语义标记和WAI-ARIA？,html,accessibility,wai-aria,Html,Accessibility,Wai Aria,我正在为一个网站做标记，我一直在努力磨练我的可访问性技能。我想知道标签式内容最具语义的标记是什么。这就是我现在拥有的： <section> <nav> <a href="#tab" aria-controls="content">Stuff</a> <a href="#tab" aria-controls="content">Stuff</a> <a href="#tab" aria-con

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

<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角色吗

语义在这个层次上会变得模糊，但我认为只要每个标签都是单独的一篇文章，你的思路就对了

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

我不认为这里的

放错了地方，尽管这取决于不同的标签对整个网站的重要性：

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

不过，我不会用

部分

s来包装里面的东西

section元素不是泛型容器元素。当一个元素仅用于样式设计或方便编写脚本时，建议作者改用div元素。一般规则是，只有在文档大纲中明确列出元素的内容时，section元素才是合适的

元素的另一个fist规则是它们应该有一个标题。如果不是，它可能不是一个真正的“部分”，而是一组您需要包装在某个东西中的元素，所以只需使用

1。我走对了吗？如果没有，有人能推荐一些改变吗

是的，你的起步绝对不错。如果你想改进的话，一些标签可以被赋予一些标签相关的角色，但它的功能是不变的

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

不，应该没问题。事实上，这是一个活的地区（测试与NVDA只）意味着新的内容被宣布。这就是你想要的行为吗

3.我需要导航标签吗

不，但我认为这有助于清楚地说明文件的这一部分的用途。不过需要注意的是，如果你像我在下面所做的那样，把它标记为一个小报作者，那么它作为一个导航元素的事实就不会再被宣布了

4.这里的WAI-ARIA角色够了吗

如果通过ARIA角色，您还包括状态和属性，那么本质上您应该负责加载动态内容（如果这是您想要的）。没有理由移动用户的键盘焦点或任何东西。在我看来，只有在用户点击的内容和您提供给他们的内容之间存在大量导航内容时，您才会真正想要这样做

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>


咏叹调测试
$（文档）.ready（函数（）{
$（'nav a'）。在（'click'，函数（）{
隐藏物（）；
取消选择所有选项卡（）；
$（this.attr（'aria-selected'，true）；
var tab='#'+$（this.attr（'aria-controls'）；
$（tab.show（）；
});
});
函数hideArticles（）{
$（'article'）.hide（）；
}
函数deslectalltab（）{
$（'nav a'）.attr（'aria-selected'，false）；
}
第{条显示：无；}
那只懒狗跳过了那只敏捷的狐狸
如果你点击这个标签，你的生活会更好
了解你的角色

我希望这有帮助。

太好了，这真的很有帮助。我想这是含糊不清的。我也在想wai aria的角色。我将更新我的帖子以反映这一点，谢谢。我对wai aria了解不多，恐怕帮不了你。关于“大多数语义标记”的问题主要是基于观点的，往往会引发讨论和辩论，而不是可靠的答案。如果您要求提供最易访问的标记，则会更有建设性，特别是如果您解释了您主要考虑的是哪种残疾。但是，您还应该解释“选项卡式部分”和“选项卡式内容”的含义（特别是从技术实现的角度，即选项卡应该如何工作）。如果您认为这对答案很重要，请随意添加。