Nouvelles choses à savoir sur les bonnes vieilles listes HTML

Republié par Platon

Suiveurs: 0

Les listes HTML sont ennuyeuses. Ils ne le font pas do beaucoup, donc nous n'y pensons pas vraiment malgré leur large utilisation. Et nous sommes toujours en mesure de faire les mêmes choses que nous avons toujours faites pour les personnaliser, comme supprimer des marqueurs, inverser l'ordre et créer des compteurs personnalisés.

Il y a cependant quelques choses "plus récentes" - y compris les dangers - à savoir lors de l'utilisation de listes. Les dangers sont pour la plupart mineurs, mais bien plus courants que vous ne le pensez. Nous y reviendrons, ainsi que de nouvelles choses que nous pouvons faire avec des listes, et même de nouvelles façons d'aborder les anciennes solutions.

Pour clarifier, voici les éléments HTML dont nous parlons :

Listes ordonnées
Listes non ordonnées
Listes de descriptions
Listes interactives

Les listes ordonnées, les listes non ordonnées et les listes interactives contiennent des éléments de liste (

) qui sont affichés en fonction du type de liste auquel nous avons affaire. Une liste ordonnée (

) affiche des nombres à côté des éléments de la liste. Listes non ordonnées (

) et les éléments de menu (

) affiche des puces à côté des éléments de la liste. Nous appelons ces "marqueurs de liste" et ils peuvent même être coiffés utilisant l' ::marqueur pseudo-élément. Les listes de description utilisent des termes de description (

) et les détails de la description (

) à la place de

et n'ont pas de marqueurs de liste. Ils sont censés être utilisés pour afficher des métadonnées et des glossaires, mais je ne peux pas dire que je les ai jamais vus dans la nature.

Commençons par les choses simples - comment réinitialiser correctement (du moins à mon avis) les styles de liste. Après cela, nous examinerons quelques problèmes d'accessibilité avant de mettre en lumière l'insaisissable

élément, que vous serez peut-être surpris d'apprendre… est en fait aussi un type de liste !

Réinitialiser les styles de liste

Les navigateurs appliquent automatiquement leurs propres styles d'agent utilisateur pour faciliter la structure visuelle des listes dès la sortie de la boîte. Ça peut être génial ! Mais si nous voulons commencer avec une ardoise vierge sans avis de style, nous devons d'abord réinitialiser ces styles.

Par exemple, nous pouvons supprimer les marqueurs à côté des éléments de la liste assez facilement. Rien de nouveau ici :

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

Mais le CSS moderne a de nouvelles façons de nous aider à cibler des instances de liste spécifiques. Disons que nous voulons effacer les marqueurs de toutes les listes, sauf si ces listes apparaissent dans contenu long, comme un article. Si nous combinons les pouvoirs des nouvelles fonctions de pseudo-classe CSS :where() ainsi que :not(), nous pouvons isoler ces instances et autoriser les marqueurs dans ces cas :

/* 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;
}

Pourquoi utiliser :where() au lieu de :is()? La spécificité de :where() est toujours nul, alors que :is() prend la spécificité de l'élément le plus spécifique dans sa liste de sélecteurs. Ainsi, en utilisant :where() est un moyen moins puissant de passer outre les choses et peut facilement être passé outre.

Les styles UA appliquent également un rembourrage pour espacer le contenu d'un élément de liste de son marqueur. Encore une fois, c'est une offre assez intéressante dès le départ dans certains cas, mais si nous supprimons déjà les marqueurs de liste comme nous l'avons fait ci-dessus, nous pouvons également supprimer ce rembourrage. C'est un autre cas pour :where():

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

OK, cela empêchera les éléments de liste sans marqueur de sembler flotter dans l'espace. Mais nous avons en quelque sorte jeté le bébé avec l'eau du bain et retiré le rembourrage dans tous les cas, y compris ceux que nous avions précédemment isolés dans un

. Donc, maintenant, ces listes avec des marqueurs pendent en quelque sorte du bord de la zone de contenu.

Notez que les styles UA appliquent un supplément 40px à la

Donc, ce que nous voulons faire, c'est empêcher les marqueurs de liste de "se bloquer" à l'extérieur du conteneur. Nous pouvons résoudre ce problème avec le list-style-position propriété:

Ou pas… peut-être est-ce une question de préférence stylistique ?

Nouveaux problèmes d'accessibilité avec les listes

Malheureusement, il existe quelques problèmes d'accessibilité en ce qui concerne les listes, même en ces temps plus modernes. Une préoccupation est le résultat de l'application list-style: none; comme nous l'avons fait lors de la réinitialisation des styles UA.

En un mot, Safari ne collecte lire des listes ordonnées et non ordonnées stylisées avec list-style: none sous forme de listes réelles, comme lors de la navigation dans le contenu avec un lecteur d'écran. En d'autres termes, la suppression des marqueurs supprime également la signification sémantique de la liste. La correctif pour ce correctif il faut appliquer un AIR list rôle sur la liste et un listitem rôle aux éléments de la liste afin que les lecteurs d'écran les détectent :


  ...
  ...
  ...



  ...
  ...
  ...

Bizarrement, Safari considère cela comme une fonctionnalité plutôt qu'un bug. Fondamentalement, les utilisateurs signaleraient que les lecteurs d'écran annonçaient trop de listes (parce que les développeurs ont tendance à en abuser), donc maintenant, seuls ceux avec role="list" sont annoncés par les lecteurs d'écran, ce qui n'est finalement pas si étrange que ça. Scott O'Hara possède de aperçu détaillé comment tout s'est passé.

Un deuxième problème d'accessibilité n'est pas de notre fait (hourra !). Alors, tu sais comment tu es censé ajouter un aria-label à

éléments sans titres ? Eh bien, il est parfois logique de faire la même chose avec une liste qui ne contient pas d'élément d'en-tête permettant de décrire la liste.



  Grocery list

Vous absolument ne voulez pas doivent utiliser l'une ou l'autre méthode. L'utilisation d'un en-tête ou d'une étiquette ARIA n'est qu'un contexte supplémentaire, pas une exigence - assurez-vous de tester vos sites Web avec des lecteurs d'écran et faites ce qui offre la meilleure expérience utilisateur pour la situation.

Dans des nouvelles quelque peu connexes, Eric Bailey a écrit un excellent article sur pourquoi et comment il considère aria-label être une odeur de code.

Attendez,
est une liste, aussi?

OK, donc, vous vous posez probablement des questions sur tous les

éléments que j'ai glissés dans les exemples de code. C'est en fait super simple; les menus sont des listes non ordonnées sauf qu'ils sont destinés aux éléments interactifs. Ils sont même exposés à l'arborescence d'accessibilité sous forme de listes non ordonnées.

Aux débuts du web sémantique, je croyais à tort que les menus ressemblaient à

s avant de croire qu'il s'agissait de menus contextuels (ou "barres d'outils" comme la spécification dit) car c'est ce que disaient les premières versions de la spécification HTML. (MDN a une description intéressante sur tous les éléments obsolètes liés à

si cela vous intéresse.)

Aujourd'hui, cependant, c'est la manière sémantique d'utiliser les menus :

Personnellement, je pense qu'il existe de bons cas d'utilisation pour

. Ce dernier exemple montre une liste de boutons de partage social enveloppés dans un étiqueté

élément, l'aspect notable étant que l'étiquette "Partager l'article" apporte une quantité importante de contexte qui aide à décrire ce que font les boutons.

Les menus sont-ils absolument nécessaires ? Non. Sont-ils Repères HTML? Définitivement pas. Mais ils sont là si vous aimez moins

s et vous pensez que le composant pourrait utiliser un aria-label pour un contexte supplémentaire.

Rien d'autre?

Oui, il y a aussi ce qui précède

(liste de description), cependant, MDN ne semble pas les considérer comme des listes de la même façon — c'est une liste de groupes contenant des termes — et je ne peux pas dire que je les ai vraiment vus en usage. Selon MDN, ils sont censés être utilisés pour les métadonnées, les glossaires et d'autres types de paires clé-valeur. Je les éviterais simplement au motif que tous les lecteurs d'écran les annoncent différemment.

Mais ne terminons pas les choses sur une note négative. Voici une liste de choses super cool que vous pouvez faire avec des listes :

Horodatage: 28 novembre 202228 novembre 2022