¿Marcado semántico y WAI-ARIA para la sección con pestañas?
Estoy en el proceso de marcar un sitio y realmente estoy tratando de mejorar mis habilidades de accesibilidad. Me pregunto cuál es el margen de ganancia más semántico para el contenido de pestañas. Esto es lo que tengo ahora:
<section>
<nav>
<a href="#tab" aria-controls="content">Stuff</a>
<a href="#tab" aria-controls="content">Stuff</a>
<a href="#tab" aria-controls="content">Stuff</a>
</nav>
<section id="content" aria-live="polite" role="region">
<article>...</article>
<article>...</article>
<article>...</article>
</section>
</section>
Tengo algunas preguntas específicas sobre esto.
¿Estoy en el camino correcto? Si no puede alguien recomendar algunos cambios?¿Tendré que hacer cambios si tuviera que cargar los artículos a través de AJAX?¿Necesito la etiqueta de navegación?¿Son suficientes los papeles de WAI-ARIA aquí?¿Son estos los roles de WAI-ARIA correctos para usar?