标签段的语义标记和WAI-ARIA？ [英] Semantic mark-up and WAI-ARIA for Tabbed Section?
问题描述
我正在评估一个网站，我一直在努力磨练我的无障碍技能。我想知道标签内容的最大语义标记是什么。这是我现在所拥有的：
< section>
< nav>
< a href =＃tabaria-controls =content> Stuff< / a>
< a href =＃tabaria-controls =content> Stuff< / a>
< a href =＃tabaria-controls =content> Stuff< / a>
< / nav>
< section id =contentaria-live =politerole =region>
<文章> ...< /文章>
<文章> ...< /文章>
<文章> ...< /文章>
< / section>
< / section>
我对此有几个具体问题。
- 我在正确的轨道上吗？如果没有人可以推荐一些更改？
- 我需要进行更改，如果我要通过AJAX加载文章吗？
- nav标签？
- WAI-ARIA角色在这里是否足够？
- 是否使用正确的WAI-ARIA角色？
1.Am我在正确的轨道上吗？如果没有人可以推荐一些改变？
是的，你绝对是以一种好的方式开始的。如果您想改进它，某些选项卡的东西可能会被赋予一些与选项卡相关的角色，但它的功能仍是如此。
2.如果我要通过AJAX加载文章，我需要进行更改吗？
否。应该没问题。事实上，它是一个现场区域应该（仅用于NVDA测试）意味着新内容被宣布。这是你之后的行为吗？
3.我需要导航标签吗？
不，但我认为这有助于让它透明这份文件的用途是什么。但请注意，如果您按照以下所做的操作将其标记为Tablist，则导航元素不会再公布。
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> （'click'，function（）{
hideArticles（）;
deslectAllTabs（）;
$（document）.ready（function（）{
$（'nav a'）。 （）;
$（this）.attr（'aria-selected'，true）;
var tab ='＃'+ $（this）.attr（'aria-controls'）;
$（tab）.show（）;
}）;
}）;
function hideArticles（）{
$（'article'）。hide（）;
}
函数deslectAllTabs（）{
$（'nav a'）。attr（'aria-selected'，false）;
}
< / script>
< style type =text / css>
article {display：none; }
< / style>
< / head>
< body>
<节>
< nav role =tablist>
< a href =＃tabaria-controls =content1id =tab1role =tab> Stuff1< / a>
< a href =＃tabaria-controls =content2id =tab2role =tab> Stuff2< / a>
< a href =＃tabaria-controls =content3id =tab3role =tab> Stuff3< / a>
< / nav>
< section id =contentaria-live =politerole =region>
< article id =content1role =tabpanel>懒狗跳过快狐< / article>
< article id =content2role =tabpanel>如果您点击此标签，那么您的生活将会更好< / article>
< article id =content3role =tabpanel>了解您的角色< / article>
< / section>
< / section>
< / body>
< / html>
我希望这有助于您。
I'm in the process of marking up a site and I've been really trying to hone my accessibility skills. I'm wondering what the most semantic mark-up is for tabbed content. This is what I have now:
<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>
I have a few specific questions about this.
- Am I on the right track? If not can someone recommend some changes?
- Will I need to make changes if I were to load in the articles via AJAX?
- Do I need the nav tag?
- Are WAI-ARIA roles enough here?
- Are these the correct WAI-ARIA roles to use?
1.Am I on the right track? If not can someone recommend some changes?
Yes, you've absolutely started in a good way. Some of the tab stuff could be given some tab-related roles if you want to improve it, but it's functional as is.
2.Will I need to make changes if I were to load in the articles via AJAX?
No. It should be fine. The fact that it is a live region should (tested with NVDA only) mean that new content is announced. Is this the behaviour you're after?
3.Do I need the nav tag?
No, but I think it helps make it crystal clear what that bit of the document is for. A note though, that if you do what I've done below and mark it as a tablist, the fact that it's a navigation element doesn't get announced anymore.
4.Are WAI-ARIA roles enough here?
If by ARIA roles you're also including states and properties, yes essentially you should be covered for loading dynamic content (if that's what you're after). There's no case for moving the user's keyboard focus or anything with things as they are. IMO, you'd only really want to do that if there's a lot of navigational stuff between what the user clicked and what content you're giving them.
5.Are these the correct WAI-ARIA roles to use?
You're not far off. If you really want a tab-style experience, then you need the tablist, tab and tabpanel roles. I'll give an example.
I've taken your code and made a contrived but working example to test it. It's not loading anything in AJAX, just showing and hiding stuff. I wanted to be sure before I gave this answer, but I'll put the code here too in case it helps.
<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>
I hope this helps.
这篇关于标签段的语义标记和WAI-ARIA？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
