HTML5子导航语义 [英] HTML5 sub nav semantics
问题描述
一个简单的问题是:HTML5 nav,特别是子导航(从语义的角度来看)。
我有<导航>>
在主菜单的标题中。在标准页面的左侧,我有第二级导航,并在右侧第三级导航(不,我没有设计网站)。有什么我可以做HTML5 / ARIA明智区分3菜单吗?或者它们都很简单< nav>
blocks?
我甚至不认为我需要< aside>
,因为除了这些实际菜单之外,还没有其他任何信息。
任何想法/建议都会非常感谢。
这可能是一个老问题,但现在有更好的答案:
$ b
您可以使用标题隐式标记每个导航部分,并显式使用WAI-ARIA属性:
< nav role =navigationaria-labelledby =firstLabel>
< ul />
< / nav>
...
< nav role =navigationaria-labelledby =secondLabel>
< ul />
< / nav>
对于像屏幕阅读器这样的用户代理,他们可以将其报告为本地页面,导航(尽管它们在报道方式上有所不同)。
详细了解关于使用labelledby的W3C wiki页面。
A quick question re: HTML5 nav, specifically that of sub navigation (from a semantic point of view).
I have <nav>
in the header for the main menu. Down the left of a standard page I have second level nav and down the right third level nav (no, I didn’t design the site). Is there anything I can do HTML5/ARIA wise to differentiate between the 3 menus? Or are they all simple <nav>
blocks?
I dont even think I need <aside>
in either left or right column as there isnt any additional info apart from these actual menus.
Any thoughts/advice would be much appreciated.
This may be an old question, but there is a better answer now:
You can label each navigation section implicitly using headings, and explicitly use WAI-ARIA attributes:
<nav role="navigation" aria-labelledby="firstLabel">
<h2 span id="firstLabel" class="hidden">Main menu</h2>
<ul/>
</nav>
...
<nav role="navigation" aria-labelledby="secondLabel">
<h2 span id="secondLabel" class="hidden">Local pages</h2>
<ul/>
</nav>
For user-agents like screenreaders, they can report that as "Local pages, navigation" (although they vary in how it's reported).
Read more on a W3C wiki page on using labelledby.
这篇关于HTML5子导航语义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!