标签部分的语义标记和 WAI-ARIA? [英] Semantic mark-up and WAI-ARIA for Tabbed Section?
问题描述
我正在标记一个网站，我一直在努力磨练我的可访问性技能.我想知道标签式内容最语义化的标记是什么.这就是我现在所拥有的:
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.
- 我在正确的轨道上吗?如果没有，有人可以推荐一些更改吗?
- 如果我通过 AJAX 加载文章，是否需要进行更改?
- 我需要导航标签吗?
- 这里的 WAI-ARIA 角色是否足够?
- 这些是要使用的正确 WAI-ARIA 角色吗?
推荐答案
1.我在正确的轨道上吗?如果没有，有人可以推荐一些更改吗?
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.如果我通过 AJAX 加载文章，是否需要进行更改?
2.Will I need to make changes if I were to load in the articles via AJAX?
没有.应该没问题.它是一个实时区域的事实(仅使用 NVDA 测试)应该意味着宣布新内容.这是您所追求的行为吗?
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.我需要导航标签吗?
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.这里的 WAI-ARIA 角色够不够?
4.Are WAI-ARIA roles enough here?
如果通过 ARIA 角色，您还包括状态和属性，是的，基本上您应该涵盖加载动态内容(如果这就是您所追求的).没有必要移动用户的键盘焦点或任何事物的原样.IMO，如果在用户点击的内容和您提供给他们的内容之间有很多导航内容，您才会真正想要这样做.
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.这些是要使用的正确 WAI-ARIA 角色吗?
5.Are these the correct WAI-ARIA roles to use?
离你不远了.如果你真的想要一个 tab 风格的体验，那么你需要 tablist、tab 和 tabpanel 角色.我举个例子.
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.
我已经使用了您的代码并制作了一个人为但有效的示例来测试它.它不会在 AJAX 中加载任何内容，只是显示和隐藏内容.在给出这个答案之前，我想确定一下，但我也会把代码放在这里，以防万一.
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>
我希望这会有所帮助.
这篇关于标签部分的语义标记和 WAI-ARIA?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
