html - div - scroll to section jquery

¿Puedes usar un elemento<aside> dentro de un elemento<section role=“main”>?

Question

Estoy en el proceso de mejorar la accesibilidad en mi HTML usando HTML5 y WAI-ARIA.

¿Está bien tener la siguiente configuración?

<!-- main content -->
<section id="main" role="main">
<h1>The main content</h1>
<!-- This div needs to be here for styling reasons -->
<div class="the-content">
<p>All the text that goes with the main content</p>
</div>
<!-- the sidebar -->
<aside id="sidebar" role="complementary">
<h2>A title</h2>
<p>Some text</p>
<aside>
</section>

De lo que no estoy seguro es si debería tener el elemento <aside> fuera del contenedor <section> y la role="main" . ¿Eso importa?

Answer 1

Estaré de acuerdo con Darren en cuanto a dónde sueltas la etiqueta. Además, su etiquetado es un poco raro. Varias etiquetas tienen roles WAI-ARIA de forma nativa, mientras que sí, puede sobrescribir los roles nativos, pero ¿por qué lo haría? Esta publicación sobre WAI-ARIA en el blog del Grupo Paciello habla más sobre esto. Ex:

En lugar de usar

<section id="main" role="main">

simplemente puede usar <main> , que significa lo mismo, y mejor práctica. La etiqueta <aside> tiene el rol complementario agregado de forma nativa, así que es como decir: Mi nombre es Ryan, en realidad mi nombre es Ryan .

Answer 2

La especificación ( el borrador del editor que ya incluye main ) no permite anidar el elemento main dentro del article , aside , footer , header o nav , pero no dice nada acerca de anidar estos elementos dentro de main . También proporciona dos ejemplos que utilizan el article y la nav ( nav dentro del documento) dentro de la página main . Por lo tanto, al menos a un aside , anidado en el article o section (y, por lo tanto, con alcance a su nivel), también debe permitirse. También puedo imaginar el caso en el que parte del contenido con información adicional en el interior (como en los ejemplos de uso aside en el WCAG Wiki) puede formar el contenido principal de la página, así que no creo que no sea razonable .

Por otro lado, el algoritmo de esquema (que ahora parece ser la razón principal de la existencia de todo el contenido de la sección , incluso a aside ) todavía está marcado como "en riesgo" , por lo que la definición de estos elementos puede cambiar y algunas aclaraciones pueden ser agregado.

Probablemente deberíamos hacer esta pregunta a los editores de especificaciones HTML5.

Answer 3

Sí importa, sí. Dónde colocarlo se define por la forma en que el contenido de la etiqueta aside relaciona con la section principal.

Por ejemplo:

Si el contenido en el aside está relacionado con el artículo principal, debe estar dentro de la main section . Sin embargo, si el contenido dentro de la sidebar aside tag es diferente al main , lo pondría fuera de la main section

http://html5doctor.com/aside-revisited/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

Answer 4

Sí, el <aside> dentro de la <section> tiene un marcado perfectamente válido y pasará la validación W3C, si eso es lo que le preocupa.

El elemento <section> permite el contenido de flujo dentro del cual puede incluir el elemento <aside> ; sin embargo, si solo está utilizando secciones para estilos de estilo, probablemente debería usar un div en su lugar.

Aparte de eso (intento de juego de palabras) tengo mis dudas sobre el role=main parte role=main es válida; de acuerdo con esto , los únicos valores de atributo de rol permitidos en los elementos de <section> se muestran a continuación:

Semántica predeterminada de ARIA:

role=region .

¿Qué otros roles, estados y propiedades de ARIA pueden usarse?

alert , alertdialog alert , application , información de contenido, dialog , document , log , marquee , search o status .

Cualquier atributo global aria-* y cualquier atributo aria- * aplicable a los roles permitidos.

Lo que notablemente no incluye el papel main .