El trato con el elemento de sección

Dos artículos publicados exactamente el mismo día:

1. Bruce Lawson en Smashing Magazine: ¿Por qué debería elegir HTML5 articleen lugar desection
2. Adam Laki sobre el pino: la diferencia entre un elemento sectiony divun elemento

Están comparando cosas ligeramente diferentes, pero ambas involucran el sectionelemento.

Lo encuentro bastante claro cuando buscas un div: Cuando quieres que ese elemento esencialmente no tenga sentido. Sólo lo estás usando con fines de estilo.

Siempre pienso en RSS cuando pienso article: ¿Tendría sentido este pequeño detalle como entrada (que no necesariamente tiene que ser el contenido completo del artículo)? En caso afirmativo, utilice article; si no, no lo hagas.

Bruce tiene una respuesta a seguir:

[…] Piense en articleno solo como un artículo de periódico o una publicación de blog, sino como una prenda de vestir, una entidad discreta que puede reutilizarse en otro contexto. Entonces tus pantalones son un artículo y puedes usarlos con un atuendo diferente; tu camisa es una prenda y se puede usar con diferentes pantalones; tus botas stiletto de charol hasta la rodilla son un artículo.

Más importante aún, tiene alguna funcionalidad real. Bruce menciona que Apple WatchOS lo usa específicamente para buscar contenido en páginas.

Pero sectiones más nebuloso. En un momento, se suponía que debías pensar en las secciones como lugares donde tus h1encabezados h6se restablecerían, pero eso nunca llegó a un buen término porque requería algo llamado “Esquema HTML5” que ningún navegador admite.

Entonces, ¿deberíamos usarlo section? Según Bruce, ¡a veces! El diseño de los artículos de Smashing Magazine tiene un resumen al principio del artículo. Visualmente, eso es bastante claro, pero no lo es tanto para los usuarios de lectores de pantalla. La solución fue envolver el resumen en un elemento con un aria-labelpara dejarlo claro. Pero se supone que no debes usar aria-label a menos que ese elemento también tenga un archivo role. Podrías aplicar un rol a div, pero sectionya tienes un buen rol predeterminado, entonces:

section aria-label="quick summary"  Summary text/section

El artículo de Adam (lo siento, Adam) es muy vago en cuanto a estos puntos.

La principal diferencia proviene de la semántica. Si tiene una parte en su sitio o aplicación que tiene su lógica, necesita usar la sectionetiqueta para declararla…

… utilícelo sectioncuando sea lógicamente correcto hacer que una parte de su sitio o aplicación sea legible para la tecnología de asistencia. Es un enfoque excelente si se tienen en cuenta los lectores de pantalla.

Entonces obtienes role="region"automáticamente una sección para, pero no estoy seguro de que eso haga algo para los lectores de pantalla, sin la etiqueta. En una prueba rápida (Chrome para escritorio con VoiceOver habilitado), un sectionsin y aria-labelsimplemente no estaba en la sección Puntos de referencia de Web Rotor, pero apareció una vez que tenía un archivo aria-label.

El punto es: no se limita a utilizar sectiony asumir que está haciendo algo bueno para la accesibilidad. Su propósito es bastante limitado y sólo es útil para establecer puntos de referencia. Incluso entonces, no estás ayudando mucho. Leonie Watson en los comentarios:

Cuando la elección está entre un encabezado visualmente oculto y un elemento de sección con un nombre accesible, hay un par de cosas a considerar antes de decidir qué enfoque es el correcto.

Cuando un elemento de sección tiene un nombre accesible, se convierte en un elemento de referencia navegable, por lo que un usuario de lector de pantalla puede usar la tecla de acceso directo de su lector de pantalla para navegar de uno a otro, tal como lo puede hacer con los encabezados.

Sin embargo, según la encuesta más reciente de usuarios de lectores de pantalla WebAIM, el 68% de los usuarios de lectores de pantalla prefieren navegar mediante títulos en comparación con el 2,9% que prefiere puntos de referencia.

Entonces, desde un punto de vista estricto de accesibilidad, probablemente podría eliminar el encabezado, pero desde un punto de vista de usabilidad, realmente desea conservar el encabezado, al menos hasta que más usuarios de lectores de pantalla expresen su preferencia por usar puntos de referencia. para navegar por el contenido.