HTML5 sub nav semantics

前端未结

关注

 2  2080

情话喂你

A quick question re: HTML5 nav, specifically that of sub navigation (from a semantic point of view).

I have

相关标签:

2条回答

执笔经年

2021-02-14 03:59
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
你的背包

2021-02-14 04:02
I would differentiate between the navigation sections by giving them semantically relevant ids and by placing them in order of importance in the HTML code, along the following lines:
```
<body>
  <nav id="main-navigation">
    
  </nav>
  <nav id="sub-navigation">
    
  </nav>
  <nav id="leaf-navigation">
    
  </nav>

  <section id="content">
    
  </section>
</body>
```
Other than that, I see no real need for further differentiation between the sections. The above approach is easy to understand, should be reasonably easy to style and is semantically clear, which is certainly good enough for me.
0 讨论(0)
发布评论:

提交评论
- 加载中...