<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角色吗？
是的,你绝对是以一种好的方式开始的.如果你想改进它,可以给一些标签相关的东西提供一些与标签相关的角色,但它的功能就是它.
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> 我希望这有帮助.
总结以上是内存溢出为你收集整理的html – 标签部分的语义标记和WAI-ARIA？全部内容，希望文章能够帮你解决html – 标签部分的语义标记和WAI-ARIA？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）