Cosas más nuevas que debe saber sobre las buenas listas HTML

Reeditado por Platón

seguidores: 0

Las listas HTML son aburridas. ellos no do mucho, por lo que realmente no pensamos en ellos a pesar de lo ampliamente utilizados que son. Y aún podemos hacer las mismas cosas que siempre hemos hecho para personalizarlos, como eliminar marcadores, invertir el orden y crear contadores personalizados.

Sin embargo, hay algunas cosas "más nuevas", incluidos los peligros, que debe saber al usar listas. Los peligros son en su mayoría menores, pero mucho más comunes de lo que piensas. Llegaremos a eso, además de algunas cosas nuevas que podemos hacer con las listas, e incluso nuevas formas de abordar soluciones antiguas.

Para aclarar, estos son los elementos HTML de los que estamos hablando:

Listas ordenadas
Listas desordenadas
descripción de las listas
Listas interactivas

Las listas ordenadas, las listas desordenadas y las listas interactivas contienen elementos de lista (

) que se muestran según el tipo de lista con la que estemos tratando. Una lista ordenada (

) muestra números junto a los elementos de la lista. Listas desordenadas (

) y elementos de menú (

) muestra viñetas junto a los elementos de la lista. Los llamamos "marcadores de lista" y incluso se pueden peinar usando el ::marcador pseudo-elemento. Las listas de descripción utilizan términos de descripción (

) y detalles de la descripción (

) en lugar de

y no tienen marcadores de lista. Se supone que se usan para mostrar metadatos y glosarios, pero no puedo decir que los haya visto en la naturaleza.

Comencemos con las cosas fáciles: cómo restablecer correctamente (al menos en mi opinión) los estilos de lista. Después de eso, echaremos un vistazo a un par de problemas de accesibilidad antes de arrojar luz sobre el escurridizo

El elemento, que te sorprenderá saber... ¡también es en realidad un tipo de lista!

Restablecimiento de estilos de lista

Los navegadores aplican automáticamente sus propios estilos de agente de usuario para ayudar con la estructura visual de las listas desde el primer momento. ¡Eso puede ser genial! Pero si queremos comenzar con una pizarra en blanco libre de opiniones de estilo, primero debemos restablecer esos estilos.

Por ejemplo, podemos eliminar los marcadores junto a los elementos de la lista con bastante facilidad. Nada nuevo aquí:

/* Zap all list markers! */
ol, ul, menu {
  list-style: none;
}

Pero el CSS moderno tiene nuevas formas de ayudarnos a identificar instancias de listas específicas. Digamos que queremos borrar marcadores de todas las listas, excepto si esas listas aparecen en contenido de formato largo, como un artículo. Si combinamos los poderes de las nuevas funciones de pseudoclase CSS :where() y :not(), podemos aislar esas instancias y permitir los marcadores en esos casos:

/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
  list-style: none;
}

¿Por qué utilizar :where() en lugar de :is()? La especificidad de :where() siempre es cero, mientras que :is() toma la especificidad del elemento más específico en su lista de selectores. Entonces, usando :where() es una forma menos contundente de anular las cosas y se puede anular fácilmente.

Los estilos UA también aplican relleno para espaciar el contenido de un elemento de lista de su marcador. Una vez más, en algunos casos es una posibilidad bastante buena desde el primer momento, pero si ya estamos eliminando los marcadores de lista como hicimos anteriormente, también podemos eliminar ese relleno. Este es otro caso para :where():

:where(ol, ul, menu) {
  padding-left: 0; /* or padding-inline-start */
}

Bien, eso evitará que los elementos de la lista sin marcadores parezcan flotar en el espacio. Pero tiramos al bebé con el agua del baño y quitamos el relleno en todos los casos, incluidos los que aislamos previamente en un

. Entonces, ahora esas listas con marcadores cuelgan del borde del cuadro de contenido.

Tenga en cuenta que los estilos UA aplican un extra 40px En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”.

Entonces, lo que queremos hacer es evitar que los marcadores de lista "cuelguen" fuera del contenedor. Podemos arreglar eso con el list-style-position propiedad:

O no… ¿tal vez se trata de una preferencia estilística?

Inquietudes de accesibilidad más recientes con las listas

Desafortunadamente, hay un par de problemas de accesibilidad cuando se trata de listas, incluso en estos tiempos más modernos. Una preocupación es el resultado de aplicar list-style: none; como hicimos al restablecer los estilos de UA.

En pocas palabras, Safari no leer listas ordenadas y desordenadas diseñadas con list-style: none como listas reales, como cuando se navega por contenido con un lector de pantalla. En otras palabras, eliminar los marcadores también elimina el significado semántico de la lista. los arreglo para este arreglo es aplicar un AIRE list papel en la lista y un listitem rol a los elementos de la lista para que los lectores de pantalla los recojan:


  ...
  ...
  ...



  ...
  ...
  ...

Extrañamente, Safari considera que esto es una característica en lugar de un error. Básicamente, los usuarios informarían que los lectores de pantalla anunciaban demasiadas listas (porque los desarrolladores tienden a usarlas en exceso), por lo que ahora, solo aquellos con role="list" son anunciados por lectores de pantalla, lo que en realidad no es tan extraño después de todo. Scott O'Hara tiene un resumen detallado de cómo todo se vino abajo.

Un segundo problema de accesibilidad no es de nuestra propia creación (¡hurra!). Entonces, ya sabes cómo se supone que debes añadir una aria-label a

¿elementos sin encabezados? Bueno, a veces tiene sentido hacer lo mismo con una lista que no contiene un elemento de encabezado que ayude a describir la lista.



  Grocery list

Absolutamente no tiene que usar cualquiera de los dos métodos. El uso de un encabezado o una etiqueta ARIA es solo contexto agregado, no un requisito; asegúrese de probar sus sitios web con lectores de pantalla y haga lo que ofrezca la mejor experiencia de usuario para la situación.

En noticias algo relacionadas, Eric Bailey escribió un artículo excelente sobre por qué y cómo considera aria-label ser un olor a código.

Espere,
es una lista, también?

OK, entonces, probablemente te estés preguntando acerca de todos los

elementos que he estado deslizando en los ejemplos de código. En realidad es súper simple; los menús son listas desordenadas, excepto que están destinados a elementos interactivos. Incluso están expuestos al árbol de accesibilidad como listas desordenadas.

En los primeros días de la web semántica, creía erróneamente que los menús eran como

s antes de creer que eran para menús contextuales (o "barras de herramientas" como la especificación dice) porque eso es lo que decían las primeras versiones de la especificación HTML. (MDN tiene un artículo interesante en todas las cosas obsoletas relacionadas con

si te interesa.)

Hoy, sin embargo, esta es la forma semántica de usar los menús:

Personalmente, creo que hay algunos buenos casos de uso para

. Ese último ejemplo muestra una lista de botones para compartir en redes sociales envueltos en una etiqueta

elemento, el aspecto notable es que la etiqueta "Compartir artículo" aporta una cantidad significativa de contexto que ayuda a describir lo que hacen los botones.

¿Son absolutamente necesarios los menús? No. ¿Son Puntos de referencia HTML? Definitivamente no. Pero están ahí si disfrutas menos

s y sientes que el componente podría usar un aria-label para contexto adicional.

¿Algo más?

Sí, también está el mencionado

(lista de descripción) elemento, sin embargo, MDN no parece considerarlas listas de la misma manera, es una lista de grupos que contienen términos, y no puedo decir que realmente los haya visto en uso. Según MDN, se supone que deben usarse para metadatos, glosarios y otros tipos de pares clave-valor. Simplemente los evitaría porque todos los lectores de pantalla los anuncian de manera diferente.

Pero no terminemos las cosas con una nota negativa. Aquí hay una lista de cosas geniales que puedes hacer con las listas:

Sello de tiempo: 28 de noviembre.28 de noviembre.