InMy.Live

Le HTML <hr> L’élément ajoute une règle horizontale (ou ligne) partout où vous le placez. Une règle horizontale est utilisée pour fournir une pause visuelle et diviser le contenu. Comme les autres éléments HTML, les règles horizontales peuvent être stylisées à l’aide de CSS (et de SVG). Cela signifie qu’ils ne doivent pas ressembler à des lignes horizontales simples et ennuyeuses. Vous pouvez faire preuve d’un peu de créativité avec eux, en ajoutant une belle petite touche personnelle à votre contenu et à vos conceptions.

Si vous êtes un lecteur assidu de ce blog, vous avez probablement déjà vu à quoi ressemble une règle horizontale ici. En fait, si vous ne l’avez jamais vu auparavant, vous avez peut-être juste c’est fait. L’illustration des oiseaux sur un fil au-dessus de ce paragraphe est un style <hr> élément.

Avant de créer ce style de règle horizontale, mes règles horizontales semblaient aussi ennuyeuses que vous pourriez l’imaginer. Jusqu’au jour où j’ai regardé cette ligne ennuyeuse et j’ai imaginé un groupe d’oiseaux assis dessus (parce que, eh bien, OISEAUX!). Et puis ça a cliqué ! J’ai obtenu une image SVG d’un groupe d’oiseaux (silhouettes) sur un fil, je l’ai modifiée pour qu’elle ressemble à ce que je voulais et je l’ai utilisée pour styliser mon <hr> éléments pour ressembler à ce que vous pouvez voir ci-dessus.

Dans cet article, je vais vous expliquer comment j’ai procédé, et comment mes règles horizontales peuvent éventuellement encore être améliorées, afin qu’elles s’adaptent à divers contextes, tout en restant sémantiques et accessibles.

Sémantique et accessibilité

Une règle horizontale HTML est, par définition, pas seulement un séparateur visuel. Il a une sémantique et joue un rôle significatif dans le contexte de son contenu environnant :

Le HTML <hr> L’élément représente une rupture thématique au niveau du paragraphe, par exemple un changement de scène dans une histoire ou une transition vers un autre sujet dans une section d’un livre de référence.

Le hr élément a un rôle implicite de separator. En tant que tel, <hr> est compris et annoncé par les lecteurs d’écran. UN hr est annoncé comme “Horizontal Splitter” par VoiceOver sur macOS. Le hr est également affiché sous forme de ligne horizontale par les applications de lecture et les modes de lecture, où votre CSS est généralement supprimé et la sémantique HTML est utilisée pour déterminer le style d’un élément par l’application de lecture.

Ce qui est intéressant, c’est qu’une règle horizontale a une orientation implicite qui est horizontal par défaut. Cela signifie que si vous utilisez vertical règles pour fractionner le contenu, vous pouvez informer les lecteurs d’écran que la règle est verticale en définissant le aria-orientation valeur d’attribut à vertical:

<hr aria-orientation="vertical">

VoiceOver sur macOS annonce des règles horizontales avec une orientation verticale comme “Séparateur vertical”.

En plus de séparer les paragraphes d’un article, des règles horizontales peuvent être utilisées pour séparer des groupes d’éléments de menu dans un menu, par exemple. Ils peuvent aussi être interactifs.

Lecture complémentaire :

Puisque les règles horizontales sont des éléments sémantiques annoncés par les lecteurs d’écran, alors sauf si vous utilisez une règle horizontale pour sémantiquement diviser le contenuvous devez le masquer des lecteurs d’écran en utilisant aria-hidden="true". Autrement dit : utiliser aria-hidden="true" pour masquer les lignes horizontales décoratives. Faire pas masquez-les s’ils fournissent des ruptures de contenu sémantiques et thématiques.

Styliser avec CSS

Comme les autres éléments HTML vides, le <hr> L’élément peut être stylisé de manière limitée à l’aide de CSS. Par exemple, vous pouvez modifier sa largeur et sa hauteur, sa bordure et sa couleur d’arrière-plan, ainsi qu’utiliser des dégradés ou appliquer une image d’arrière-plan, etc. Et même s’il s’agit d’un élément sans contenu, il semble que vous puissiez même créer de simples hr styles utilisant ::before et ::after pseudo-éléments aussi.

Pour créer les règles horizontales des oiseaux sur un fil utilisées sur ce site, je n’ai fait que définir les dimensions du hret appliquez l’image SVG comme image d’arrière-plan dans CSS :

hr {
    width: ..;
    height: ..;
    background-image: url("data:image/svg+xml,...");
    background-repeat: no-repeat;
    background-size: 100% auto;
    
}

Il n’y a rien de trop fantaisiste dans le CSS. Mais les styles ci-dessus m’ont irrité depuis que je les ai écrits. Généralement, j’essaie d’éviter d’utiliser des images d’arrière-plan pour tout ce qui n’est pas purement décoratif. Et les règles horizontales, comme mentionné précédemment, sont pas pure décoration. Je préfère également éviter d’utiliser des SVG comme images d’arrière-plan et j’ai tendance à les incorporer chaque fois que je le peux afin de pouvoir tirer pleinement parti de leur stylisation avec CSS.

Un SVG implémenté en tant qu’image d’arrière-plan ne peut pas être stylisé à partir de sa feuille de style contenante (ou référençante). je veux le hr être adaptatif. Je veux pouvoir le personnaliser pour différents thèmes et avoir la possibilité de modifier et de contrôler sa ou ses couleurs via CSS quand je le souhaite. Je souhaite également lui donner un style afin qu’il reste accessible dans les environnements contrôlés par l’utilisateur (comme le mode contraste élevé de Windows, par exemple). Et même si je ne prévois pas d’animer les règles horizontales sur ce blog, j’aimerais toujours avoir la possibilité d’ajouter une animation subtile si jamais je le souhaite. Après tout, les SVG sont pratiques car ils sont si puissants et flexibles – ils ne se limitent pas à des lignes et des illustrations nettes.

Pour styliser la règle horizontale afin qu’elle corresponde à différents thèmes, je pourrais éventuellement modifier l’image d’arrière-plan sur le hr pour chaque thème. Cela fonctionnerait. Mais si les images sont alignées dans le CSS, je terminerai avec un fichier CSS plus volumineux. Et s’ils ne sont pas alignés, je me retrouverai avec plusieurs requêtes sur plusieurs images, ce qui n’est pas bon pour les performances. Sans parler de devoir créer et gérer plusieurs images, ce qui n’est pas le meilleur flux de travail pour quelque chose qui pourrait être plus simple.

De plus, en mode contraste élevé de Windows, nous n’avons aucun contrôle sur les couleurs du thème actif. Donc, si je veux m’assurer que la règle horizontale a toujours suffisamment de contraste avec l’arrière-plan, je devrai pouvoir changer et contrôler ses couleurs dans mon CSS, ce que je ne peux pas faire si le SVG est une image d’arrière-plan . Cela signifie que je pourrais finir par une règle horizontale noire sur un fond noir, par exemple.

(D’un autre côté, si vous ne vous souciez pas vraiment des styles de la règle horizontale dans WHCM et que vous voulez juste qu’elle reste correctement accessible, vous pouvez simplement supprimer l’image d’arrière-plan et laisser WHCM styliser le hr comme il le ferait par défaut.)

Je pourrais simplement utiliser une image d’arrière-plan sur le <hr> et s’arrêter là. Mais si je veux que la règle horizontale soit vraiment adaptative, alors j’ai besoin d’un peu plus de flexibilité que le <hr> l’élément lui-même ne fournit pas…

Une implémentation plus flexible et adaptative avec SVG et ARIA en ligne

La meilleure façon d’obtenir toute la flexibilité d’un SVG est de l’intégrer. Mais le <hr> L’élément est sans contenu – il n’a pas de balises d’ouverture et de fermeture dans lesquelles vous pouvez placer d’autres éléments.

La seule façon de contourner les limites de <hr> tout en préservant la sémantique pour les utilisateurs de lecteurs d’écran est d’utiliser un div et fournir la sémantique d’un hr à l’aide d’ARIA. Oui, je grince des dents à l’idée que je tape ceci. Mais écoutez-moi. Je pense que cela vaut la peine d’explorer et de suivre cette voie si vous voulez faire preuve de créativité avec vos règles horizontales tout en vous assurant qu’elles restent visuellement accessibles et personnalisables dans divers contextes et environnements.

L’approche alternative à la création de règles horizontales flexibles ressemblerait essentiellement à ceci :

<div role="separator">
    
    <svg aria-hidden="true" focusable="false" width="..." height="..." viewBox="...">
        
    </svg>
</div>

Ou, comme mon ami Scott l’a souligné, le separator rôle pourrait être directement appliqué à la svgauquel cas il n’est pas nécessaire de masquer le SVG avec aria-hidden plus:

<svg role="separator" width="794px" height="51px" viewBox="0 0 794 51" xmlns:xlink="http://www.w3.org/1999/xlink">
    
</svg>

En utilisant le balisage ci-dessus :

• nous créons une règle horizontale sémantique qui est comprise et correctement annoncée par les lecteurs d’écran, et
• l’illustration, étant maintenant un SVG en ligne, devient plus facile à styliser et à contrôler avec CSS.

Pour plus de commodité, le balisage de règle horizontale ci-dessus peut être enveloppé dans un composant personnalisé, ou séparé dans un modèle partiel ou un shortcode, afin qu’il puisse être inséré plus efficacement là où un <hr> irait autrement.

Avec le SVG en ligne, je peux utiliser les propriétés personnalisées CSS pour contrôler à quoi ressemble le SVG dans différents contextes. Par exemple, avec des propriétés personnalisées CSS parsemées dans le SVG, je pourrais alors contrôler ce contenu à l’aide de CSS, en modifiant et en changeant ses couleurs. Par exemple, en mode contraste élevé de Windows, je pourrais définir la couleur du SVG sur la couleur actuelle du texte :

@media screen and (-ms-high-contrast: active) {
    div[role="separator"] svg {
        --hr-color: windowText;
    }
}

@media screen and (forced-colors: active) {
  div[role="separator"] svg {
        --hr-color: CanvasText;
    }
}

De cette façon, la règle horizontale aura toujours suffisamment de contraste avec l’arrière-plan derrière elle.

Si le contenu du SVG est multicolore, vous pouvez définir et définir des valeurs pour plusieurs variables de la même manière, créant ainsi différentes versions (ou thèmes) de la règle horizontale pour différents contextes ou environnements.

Lecture complémentaire :

En utilisant cette technique :

• La règle horizontale est stylisée et personnalisable à l’aide de CSS.
• Il peut être animé avec CSS et/ou JavaScript.
• Il s’affichera comme prévu (oiseaux sur un fil) même dans des environnements où mon CSS est dépouillé, comme la lecture d’applications. Parce que c’est maintenant un imageil sera affiché tel quel, par opposition à un <hr> qui serait affiché et stylisé par l’application de lecture.
• À l’aide de la requête multimédia à contraste élevé, il peut être adapté pour rester toujours accessible quel que soit le thème utilisateur actuellement actif.

Voici une vidéo de moi changeant la couleur de ma règle horizontale d’oiseaux sur un fil en temps réel à l’aide des outils de développement Chrome. Ceci est rendu possible en utilisant des propriétés personnalisées SVG et CSS en ligne pour appliquer la couleur au contenu SVG :

Réflexions finales

Tout comme l’utilisation de SVG en ligne pour les icônes est la meilleure pratique pour garantir que les icônes restent adaptatives et accessibles, SVG peut également fournir une meilleure résilience pour les règles horizontales lorsque vous souhaitez être plus créatif avec elles. Que vous utilisiez ou non cette technique, il est bon de l’avoir dans votre base de connaissances, juste au cas où vous en auriez besoin.