Jef*_*wrs 7 html html5 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-controls="content">Stuff</a>
</nav>
<section id="content" aria-live="polite" role="region">
<article>...</article>
<article>...</article>
<article>...</article>
</section>
</section>
我对此有一些具体问题.
我在正确的轨道上吗？如果没有,有人可以推荐一些变化？
是的,你绝对是以一种好的方式开始的.如果你想改进它,可以给一些标签相关的东西提供一些与标签相关的角色,但它的功能就是它.
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>
我希望这有帮助.