Cosas más nuevas que debe saber acerca de las listas HTML buenas y antiguas | trucos CSS

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

Sin embargo, hay algunas cosas "más nuevas", incluidos los peligros, que debe tener en cuenta 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 <ol>
• listas desordenadas <ul>
• Listas de descripciones <dl>
• Listas interactivas <menu>

Las listas ordenadas, las listas desordenadas y las listas interactivas contienen elementos de lista (<li>), que se muestran según el tipo de lista que estemos tratando. Lista ordenada (<ol>) muestra números junto a los elementos de la lista. Listas desordenadas (<ul>) y elementos de menú (<menu>) muestra viñetas junto a los elementos de la lista. Los llamamos "marcadores de lista" e incluso se les puede aplicar estilo usando el pseudo-elemento ::marker. Las listas de descripción utilizan términos de descripción (<dt>) y detalles de la descripción (<dd>) en cambio <li> y no tienen etiquetas de lista. Se supone que se usan para mostrar metadatos y diccionarios, 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. A continuación, veremos algunos problemas de accesibilidad antes de arrojar luz sobre el escurridizo <menu> un elemento que te sorprenderá saber... ¡en realidad también es una especie de lista!

Restablecer estilos de lista

Los navegadores aplican automáticamente sus propios estilos de agente de usuario para ayudar con la estructura visual de las listas listas para usar. ¡Esto podría ser genial! Pero si queremos comenzar con una pizarra en blanco sin comentarios de estilo, primero debemos restablecer esos estilos.

Por ejemplo, podemos eliminar las etiquetas 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 las etiquetas de todas las listas, a menos que esas listas aparezcan en contenido extenso como un artículo. Si combinamos los poderes de las nuevas funciones de pseudoclase CSS :where() y :not()podemos aislar estos casos y resolver las etiquetas en estos 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 que usar :where() en cambio :is()La especificidad de :where() siempre es cero dondequiera que esté :is() toma la especificidad del elemento más específico en su lista de selección :where() es una forma menos poderosa de deshacer cosas y se puede deshacer fácilmente por sí mismo.

Los estilos UA también aplican relleno para colocar el contenido de un elemento de lista desde su etiqueta. Una vez más, esta es una opción bastante buena en algunos casos, pero si ya estamos eliminando marcadores de lista como hicimos anteriormente, también podríamos eliminar ese pad. Este es otro caso para :where():

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

Bien, esto evitará que los elementos de la lista sin etiquetas parezcan flotar en el espacio. Pero de alguna manera tiramos al bebé con el agua del baño y quitamos el acolchado en todos los casos, incluidos los que habíamos aislado previamente en <article>Así que ahora estas listas de viñetas cuelgan del borde del cuadro de contenido.

Tenga en cuenta que los estilos UA se aplican adicionalmente 40px a <menu> elemento.

Entonces, lo que queremos hacer es evitar que las etiquetas de la lista "cuelguen" fuera del contenedor. Podemos arreglar esto con list-style-position Propiedad:

O no... ¿quizás se trata de una preferencia estilística?

Nuevos problemas de accesibilidad con listas

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

En dos palabras Safari no lee listas ordenadas y desordenadas diseñadas con list-style: none como listas reales, por ejemplo, al navegar por el contenido con un lector de pantalla. En otras palabras, eliminar las etiquetas también elimina el significado semántico de la lista. parche para este parche para ser aplicado ARIA list rol de lista y un listitem papel de los elementos de la lista para que los lectores de pantalla los entiendan:

<ol style="list-style: none;" role="list">
  <li role="listItem">...</li>
  <li role="listItem">...</li>
  <li role="listItem">...</li>
</ol>

<ul style="list-style: none;" role="list">
  <li role="listItem">...</li>
  <li role="listItem">...</li>
  <li role="listItem">...</li>
</ul>

extraño Safari considera que esto es una característica no es un error En general, los usuarios informarían que los lectores de pantalla declaran demasiadas listas (porque los desarrolladores tienden a usarlas en exceso), por lo que ahora solo aquellos con role="list" son reportados por lectores de pantalla, lo cual no es tan extraño después de todo. Scott O´Hara hay Descripción detallada sobre cómo sucedió todo.

La segunda preocupación sobre la accesibilidad no es nuestra propio hacer (¡hurra!). Para que sepas cómo debes sumar aria-label a <section> Bueno, a veces tiene sentido hacer lo mismo con una lista que no contiene un elemento de título que ayude a describir la lista.

<!-- This list is somewhat described by the heading -->
<section>
  <h2>Grocery list</h2>
  <ol role="list">
     <!-- ... -->
  </ol>
</section>

<!-- This list is described by the aria-label -->
<ol role="list" aria-label="Grocery list">
  <!-- ... -->
</ol>

usted absolutamente no haga El uso de un título o etiqueta ARIA es solo un 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 que y como piensa aria-label ser un olor a código.

De acuerdo, entonces probablemente te estés preguntando acerca de todos <menu> elementos que inserté 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 en el á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 <nav>antes de que crean que son para menús contextuales (o "barras de herramientas" como la especificacion dice), porque eso es lo que decían las primeras versiones de la especificación HTML. (MDN tiene un artículo interesante de todas las cosas rechazadas relacionadas con <menu> si te interesa.)

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

<menu aria-label="Share article">
  <li><button>Email</button></li>
  <li><button>Twitter</button></li>
  <li><button>Facebook</button></li>
</menu>

Personalmente, creo que hay algunos buenos casos de uso para <menu>El último ejemplo muestra una lista de botones para compartir en redes sociales envueltos en una etiqueta con <menu> 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 ellos Directrices HTMLDefinitivamente no. Pero están ahí si disfrutas menos. <div>s y siente que el componente puede usar un aria-label para contexto adicional.

¿Algo más?

Si, existe lo mencionado <dl> elemento (lista de descripción), sin embargo, MDN no parece enumerarlos del mismo modo, es una lista de grupos que contienen términos, y no puedo decir que los haya visto en uso. Según MDN, deberían usarse para metadatos, diccionarios y otros tipos de pares clave-valor. Simplemente los evitaría porque todos los lectores de pantalla los pronuncian 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: