Des choses plus récentes à savoir sur les bonnes listes HTML

Les listes

HTML sont souvent considérées comme relativement monotones et ont des fonctions limitées, nous ignorons donc souvent leur large application. Pourtant, nous pouvons utiliser de vieilles façons de personnaliser la liste, telles que la suppression des balises, l'inversion des commandes et la création de compteurs personnalisés.

Cependant, il existe également de "nouveaux" points de connaissance lors de l'utilisation de la liste, y compris des risques potentiels qui nécessitent une attention. La plupart de ces risques sont insignifiants, mais ils se produisent beaucoup plus fréquemment que vous ne le pensez. Nous explorerons ces risques, ainsi qu'une nouvelle utilisation de la liste, et même de nouvelles idées pour améliorer les anciennes méthodes.

Pour être clair, les éléments HTML discutés dans cet article incluent:

• Liste triée
• Liste non ordonnée
• Description Liste <dl></dl>
• Liste interactive <menu></menu>

Listes triées, listes non ordonnées et listes interactives contiennent tous les éléments de liste ( <code><li> ), et leur affichage dépend du type de liste. Listes commandées (<ol></ol>) Afficher les numéros à côté des éléments de liste; listes non ordonnées ( <code><ul></ul> ) et les éléments de menu (<menu></menu>) Afficher les balles à côté des éléments de la liste. Nous appelons ces "balises de liste" et nous pouvons même les styliser en utilisant le pseudo-élément ::marker. Les listes de description utilisent des termes descriptifs (<dt></dt>) et des détails de description (<dd></dd>), plutôt que des nombres ou des balles, et sont souvent utilisés pour afficher les métadonnées et le vocabulaire, mais ne sont pas courants dans les applications pratiques.

Commençons par la partie simple - comment pour réinitialiser correctement (au moins à mon avis) le style de liste. Après cela, nous explorerons certains problèmes d'accessibilité, puis nous nous concentrerons sur les éléments insaisissables <menu></menu>, que vous pourriez être surpris de trouver… c'est aussi une sorte de liste!

réinitialiser le style de la liste

Le navigateur applique automatiquement son propre style d'agent utilisateur pour aider la structure visuelle de la liste. C'est très utile parfois! Mais si nous voulons commencer par un état vide sans styles, nous devons d'abord réinitialiser ces styles.

Par exemple, nous pouvons facilement supprimer le marqueur à côté de l'élément de liste. Rien de nouveau ici:

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

mais le CSS moderne fournit de nouvelles façons de nous aider à localiser des instances de liste spécifiques. Supposons que nous voulons effacer toutes les listes de marques, mais gardez les marques si ces listes apparaissent dans un contenu long (comme les articles). Si nous utilisons les nouvelles fonctions CSS pseudo-classe :where() et :not(), nous pouvons isoler ces instances et permettre des balises dans ces cas:

/* 对于不是文章中的列表... */
: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 nulle, tandis que :is() prend la spécificité de l'élément le plus spécifique de sa liste de sélecteurs. Par conséquent, l'utilisation de :where() est une méthode de couverture moins obligatoire et est facilement couverte par elle-même.

Le style

UA applique également le rembourrage pour séparer le contenu de l'élément de liste de ses balises. Il s'agit d'un bel effet par défaut dans certains cas, mais si nous avons supprimé le balisage de la liste comme ci-dessus, nous pourrions également effacer le rembourrage. Ceci est un autre cas d'utilisation pour :where():

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

ok, cela empêchera les éléments de liste non marqués de sembler suspendus dans l'espace. Mais nous étions un peu exagérés, en supprimant le rembourrage dans tous les cas, y compris ceux que nous avions auparavant isolés dans <article></article>. Donc, maintenant ces listes avec des marqueurs sont un peu suspendues à l'extérieur du bord de la boîte de contenu.

Notez que le style UA applique un rembourrage supplémentaire de 40px à l'élément <menu></menu>. Donc, ce que nous devons faire, c'est empêcher le marqueur de liste de "suspendre" le conteneur. Nous pouvons utiliser l'attribut list-style-position pour résoudre ce problème:

ou pas… peut-être que cela dépend de la préférence de style?

Nouveaux problèmes d'accessibilité pour les listes

Malheureusement, même dans les temps modernes, il y a des problèmes d'accessibilité avec les listes. Un problème est le résultat de l'application de list-style: none;, comme nous l'avons fait lors de la réinitialisation du style UA.

En bref, Safari ne lit pas les listes commandées et non ordonnées qui utilisent list-style: none; dans la liste réelle, par exemple lors de la navigation du contenu avec un lecteur d'écran. En d'autres termes, la suppression de l'étiquette supprime également le sens sémantique de la liste. La solution consiste à appliquer des rôles de liste Aria sur la liste et à appliquer des rôles d'élément de liste sur l'élément de liste afin que le lecteur d'écran puisse les reconnaître:

/* 对于不是文章中的列表... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
  list-style: none;
}

Étrangement, Safari traite cela comme une fonctionnalité plutôt que comme un bug. Fondamentalement, les utilisateurs rapporteront que les lecteurs d'écran ont annoncé trop de listes (parce que les développeurs ont tendance à les utiliser), donc maintenant, il n'est pas vraiment surprenant que seules ces listes avec role="list" soient annoncées par les lecteurs d'écran. Scott O’Hara décrit comment tout cela s'est produit en détail.

Le deuxième problème d'accessibilité n'a pas été causé par nous (Long Live!). Alors, saviez-vous que vous devriez ajouter aria-label aux éléments sans titres? Eh bien, il est parfois logique de faire de même pour une liste qui ne contient pas d'éléments de titre qui aident à décrire la liste.

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

Vous n'avez absolument pas besoin d'utiliser les deux méthodes. L'utilisation d'un titre ou d'une balise Aria ajoute simplement un contexte, pas une exigence - assurez-vous de tester votre site Web avec un lecteur d'écran et de choisir l'expérience utilisateur qui convient le mieux à la situation actuelle. Dans les nouvelles connexes, Eric Bailey a écrit un article sur pourquoi et comment penser que

est une odeur de code.

attendre, <menu></menu> est également une liste?

ok, donc, vous vous demandez peut-être tous les éléments <menu></menu> que j'ai insérés dans les exemples de code. C'est en fait assez simple; les menus sont des listes non ordonnées, juste qu'ils sont utilisés pour des projets interactifs. Ils sont même affichés en tant que listes non ordonnées dans l'arborescence d'accessibilité. Dans les premiers jours de la Web sémantique, je pensais à tort que les menus étaient similaires à <nav></nav> et je pensais ensuite qu'ils étaient utilisés pour les menus de contexte (ou la "barre d'outils" comme l'appelle la spécification), car c'est ce qu'une version antérieure de la spécification HTML disait. (Si vous êtes intéressé, MDN a une introduction intéressante à tout le contenu obsolète lié à <menu></menu>.)

Aujourd'hui, cependant, c'est la façon sémantique d'utiliser les menus:

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

Personnellement, je pense que <menu></menu> a de bons cas d'utilisation. Le dernier exemple montre une liste de boutons de partage social contenus dans l'élément <menu></menu> avec des balises, et il convient de noter que la balise d'articles de partage contribue beaucoup de contexte et aide à décrire la fonctionnalité du bouton. Le menu est-il absolument nécessaire? Non. Sont-ils des jalons HTML? Absolument pas. Mais si vous aimez moins <div> et que vous pensez que les composants peuvent utiliser <code>aria-label pour fournir un contexte supplémentaire, alors ils sont là.

Autre?

Oui, il y a les éléments <dl></dl> (Liste description) susmentionnés, cependant, MDN ne semble pas penser qu'ils sont les mêmes que les autres listes - c'est une liste de groupes de groupes - et je ne peux pas dire que je les ai réellement vues utilisées. Selon MDN, ils doivent être utilisés pour les métadonnées, le vocabulaire et d'autres types de paires de valeurs clés. Je les éviterais parce que tous les lecteurs d'écran les annoncent différemment. Mais ne terminons pas par des commentaires négatifs. Voici quelques choses vraiment cool que vous pouvez faire avec une liste:

• Créer un répertoire
• visualiser la chronologie des événements
• Convertir la liste en liste séparée des virgules horizontales
• Style-Tags (je n'aime personnellement pas ça, mais c'est toujours cool)