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屋！