2011-05-19 10 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.

Cuestiones relacionadas