Un flux de travail SVG fonctionnel pour les icônes accessibles

L'utilisation des polices d'icônes est généralement découragée en raison des incohérences de rendu, des problèmes d'accessibilité et des limitations sémantiques. Cet article décrit un flux de travail rationalisé pour la création et la mise en œuvre d'icônes SVG accessibles, en tirant parti de la puissance des sprites SVG.

Bien que les SVG peuvent sembler complexes, cette approche simplifie le processus. Nous utiliserons des icônes facilement disponibles et automatiserons la génération de sprites pour une gestion efficace.

Avantages clés:

• évite les pièges des polices d'icônes.
• simplifie la gestion des SVG avec la génération automatisée de sprite.
• fournit une composante icône facilement réutilisable.
• hiérarrita l'accessibilité grâce à l'utilisation des balises <title></title> et <desc></desc>.

Présentation du flux de travail:

1. Icônes source: Acquérir des icônes SVG (par exemple, à partir d'Icomoon). Nettoyez les fichiers SVG, en supprimant les métadonnées inutiles pour minimiser la taille du sprite.
2. Génération de sprites: Utilisez un outil comme spritesh (installaable via npm: npm install spritesh -g) pour générer un sprite SVG à partir de vos fichiers d'icônes individuels. Cela consolide toutes les icônes en un seul fichier pour un chargement efficace. Un exemple de commande: spritesh --input assets/images/icons --output _includes/sprite.svg --viewbox "0 0 16 16" --prefix icon-
3. Inclusion de sprite: Incluez le sprite généré dans votre disposition principale (par exemple, en utilisant {% include sprite.svg %} dans Jekyll).
4. Composant d'icône: Créez un composant réutilisable (par exemple, un composant Jekyll inclut ou réagir) en utilisant la balise <use></use> pour référence aux icônes du sprite. Ce composant doit permettre une personnalisation facile des classes, viewBox et des attributs d'accessibilité.
5. Accessibilité: Le composant icône doit inclure des balises <title></title> et <desc></desc> pour fournir un contexte pour les lecteurs d'écran, améliorant l'accessibilité. Ces descriptions doivent être spécifiques au contexte, ajoutées dynamiquement en fonction de l'utilisation de l'icône.

Exemple de composant icône (Jekyll):

{% capture id %}{% increment uniqueid %}{% endcapture %}
<svg viewBox="0 0 16 16" role="img" class="icon icon-{{ include.icon }}" aria-labelledby="{% if include.title %}title-{{ id }}{% endif %}{% if include.desc %} desc-{{ id }}{% endif %}">
  {% if include.title %}
  <title id="title-{{ id }}">{{ include.title }}</title>
  {% endif %}
  {% if include.desc %}
  <desc id="desc-{{ id }}">{{ include.desc }}</desc>
  {% endif %}
  <use xlink:href="#icon-{{ include.icon }}"></use>
</svg>

Exemple de composant icône (react):

import { uniqueId } from 'lodash';

const Icon = (props) => {
  const id = uniqueId();
  return (
    <svg role="img" viewBox="0 0 16 16" className={`icon icon-${props.icon}`} aria-labelledby={
      (props.title ? `title-${id}` : '') +
      (props.desc ? ` desc-${id}` : '')
    }>
      {props.title && <title id={`title-${id}`}>{props.title}</title>}
      {props.desc && <desc id={`desc-${id}`}>{props.desc}</desc>}
      <use xlinkHref={`#icon-${props.icon}`} />
    </svg>
  );
};

export default Icon;

Optimisation: Intégrer des outils comme SVGO (npm install svgo) pour optimiser les fichiers SVG avant la génération de sprite pour améliorer les performances. Utilisez des scripts NPM pour automatiser ce processus.

Ce flux de travail fournit une solution robuste, maintenable et accessible pour gérer les icônes SVG dans vos projets. N'oubliez pas de toujours tester vos icônes sur différents navigateurs et lecteurs d'écran pour assurer une accessibilité optimale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!