2011-05-19 17 views
8

Una pregunta rápida sobre: ​​navegación HTML5, específicamente la de navegación secundaria (desde un punto de vista semántico).Semántica HTML5 de navegación sub

Tengo <nav> en el encabezado del menú principal. Abajo, a la izquierda de una página estándar, tengo un navegador de segundo nivel y un navegador de tercer nivel correcto (no, no diseñé el sitio). ¿Hay algo que pueda hacer HTML5/ARIA sabio para diferenciar entre los 3 menús? ¿O son todos simples bloques <nav>?

Ni siquiera creo que necesite <aside> en la columna izquierda o derecha ya que no hay información adicional aparte de estos menús reales.

Cualquier pensamiento/consejo sería muy apreciado.

Respuesta

3

Me gustaría diferenciar entre las secciones de navegación, dándoles semánticamente relevante id s y colocándolos en orden de importancia en el código HTML, en los siguientes términos:

<body> 
    <nav id="main-navigation"> 
    <!-- The main menu goes here --> 
    </nav> 
    <nav id="sub-navigation"> 
    <!-- The left hand menu goes here --> 
    </nav> 
    <nav id="leaf-navigation"> 
    <!-- The right hand third level menu goes here --> 
    </nav> 

    <section id="content"> 
    <!-- Actual page content --> 
    </section> 
</body> 

Aparte de eso, no veo necesidad real de mayor diferenciación entre las secciones. El enfoque anterior es fácil de entender, debe ser razonablemente fácil de diseñar y semánticamente claro, lo cual es ciertamente lo suficientemente bueno para mí.

+3

La [** especificación W3 HTML5 **] (http://www.w3.org/wiki/HTML/Elements/nav) aclara: '" El elemento nav es apropiado solo para las secciones que constan de los principales bloques de navegación . "Continúa diciendo que para un grupo de enlaces en un pie de página, un elemento de navegación es excesivo. ** Me parece que la subnavegación es totalmente debatible. ** Estoy en una situación similar a @Adi, el que pregunta: No puedo decidir si mis pestañas de contenido DHTML deberían estar dentro de una

5

Esta puede ser una cuestión de edad, sino que hay una respuesta mejor ahora:

Puede etiquetar cada sección de navegación de forma implícita mediante encabezados, y explícitamente utilizar atributos WAI-ARIA:

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

Para los usuarios -agentes como lectores de pantalla, pueden informarlo como "Páginas locales, navegación" (aunque varían en la forma en que se informa).

Lea más en un W3C wiki page on using labelledby.