the - Elemento de navegación HTML5 vs. role="navegación"
new semantic structural elements html5 (6)
Como señaló Alohci , según HTML5, el ejemplo 3 no está permitido .
Pero los ejemplos 1 y 2 no son semánticamente equivalentes.
nav es un elemento de seccionamiento, div no. El ejemplo 1 crea una sección sin título (similar a un encabezado vacío), cambiando el outline documento completo.
También nav siempre pertenece a su contenido principal de seccionamiento (o raíz de seccionamiento), por lo que puede tener una navegación para todo el sitio, una navegación para el contenido principal, una navegación solo para el capítulo 3 del contenido principal, y / o una navegación para contenido secundario en la barra lateral, etc.
Esta diferencia se representa en las definiciones del rol de navigation
Una colección de elementos de navegación (generalmente enlaces) para navegar por el documento o documentos relacionados.
y el elemento nav (en negrita):
El elemento
navrepresenta una sección de una página que enlaza con otras páginas o con partes dentro de la página: una sección con enlaces de navegación.
También tenga en cuenta que un usuario-agente de HTML5 que no admite / conoce WAI-ARIA no entendería que el ejemplo 2 contiene navegación (y viceversa).
¿Todos los siguientes llevan el mismo significado semántico? Si no, explica tu respuesta.
1.
<nav>
<ul>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
</nav>
2.
<div role="navigation">
<ul>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
</div>
3.
<ul role="navigation">
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
navigation is not an allowed value of role on ul -->
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
Los primeros dos casos son semánticamente equivalentes. El tercero no es. <ul> tiene una semántica de list ARIA implícita predeterminada , y solo puede establecerse válidamente como directory , list , listbox , menu , menubar , presentation , tablist , toolbar o tree , por lo que configurarlo para la navigation no es válido y rompe la list semántica que el elemento <ul> tiene en los primeros dos casos.
OK, esta es una buena pregunta, y en resumen, esto es lo que sucede cuando dos o más especificaciones que proponen problemas similares se lanzan en diferentes momentos y son compatibles con diferentes navegadores / lectores de pantalla.
Al elemento <nav> se le debe navigation automáticamente la función de navigation , por lo que, en teoría, puede usar su opción 1. Sin embargo, algunos lectores de pantalla aún no lo saben, por lo que sería mejor usar 2. La opción 3 parece extraña, ya que es más que una lista desordenada, es un navegador.
Por supuesto, este es un buen ejemplo: para muchas funciones de ARIA, no hay un elemento HTML que coincida, por lo que puede optar por la opción 2 porque está utilizando otras cosas de ARIA y desea ser explícito.
Personalmente, utilizo 2 porque GZIP hace que el tamaño del archivo sea irrelevante y lo hace funcionar en el AT que probé con (Voz en off y algo más en Windows, no recuerdo ahora).
Twitter Bootstrap usa <nav role="navigation">
Parece que cubre todas las necesidades de manera más efectiva.
Asegúrese de agregar un rol = "navegación" a cada barra de navegación para ayudar con la accesibilidad.
La herramienta de accesibilidad web WAVE se puede usar para obtener información sobre cosas como esta.
Aunque encuentro la documentación allí y la vista de resultados al revisar un poco confusa. Creo que sería bueno con ejemplos claros, ya que no todo el mundo sabe mucho sobre accesibilidad en la web. (La vista de resultados se ve muy bien, pero aún así serían útiles ejemplos).
<nav role="navigation"> valida para mí usando HTML5 dtd en el servicio de validación W3C.
Me parece una buena opción, ya que es compatible tanto con lo viejo como con lo nuevo hasta que la tecnología de asistencia se pone al día.