Pictogrammes d'accessibilité : 36 icônes ligne

Ce pack réunit 36 pictogrammes d’accessibilité en icônes ligne, livrés en SVG, en PNG et en sprite SVG, sous licence commerciale. Il s’adresse aux designers et aux développeurs qui préparent une déclaration d’accessibilité, une page qui présente les services d’un lieu ou d’une application, un panneau de réglages d’affichage ou la signalétique d’un accueil : accès sans marche, ascenseur, sous-titres, boucle magnétique, langage clair, taille du texte, personnel formé. Chaque fichier porte un nom anglais simple (step-free, captions, text-size), que vous reprenez tel quel dans votre code. Toutes les icônes partagent le même trait, sans remplissage, avec des terminaisons arrondies, pour qu’une liste de services et un menu de réglages restent dans un seul style.

Ces pictogrammes illustrent une information, ils ne rendent pas une page accessible. L’accessibilité d’un site tient à son code, à ses contenus et à ses tests avec des utilisateurs, pas aux icônes qui l’annoncent. Dans une interface, une icône seule ne suffit pas : accompagnez-la d’un libellé visible, ou d’un texte alternatif quand elle porte un sens, et masquez-la des technologies d’assistance quand elle est décorative.

Les dessins sont originaux : le pack ne reproduit aucun pictogramme officiel déposé ni aucun logo de label. wheelchair dessine le fauteuil seul, sans personnage, reserved-parking n’est pas un panneau routier, et captions ou audio-description ne portent aucun sigle. Si votre signalétique doit afficher un pictogramme normalisé, utilisez sa version officielle, avec ses règles d’usage.

• 36 icônes en style ligne, réparties en 6 familles de 6 :
  • Déplacement (6) : wheelchair, ramp, elevator, reserved-parking, accessible-toilet, step-free ;
  • Vue (6) : screen-reader, braille, magnifier, high-contrast, audio-description, large-print ;
  • Ouïe (6) : captions, hearing-loop, sign-language, transcript, visual-alert, volume-boost ;
  • Cognition (6) : plain-language, step-by-step, pause, no-time-limit, reading-mode, help ;
  • Réglages d’affichage (6) : text-size, text-spacing, readable-font, reduce-motion, dark-mode, large-cursor ;
  • Services (6) : trained-staff, assistance-dog, companion, priority-appointment, phone-assistance, accessibility-statement.
• 36 fichiers SVG, un par icône.
• 108 fichiers PNG : chaque icône en 24, 48 et 96 px.
• 1 sprite SVG qui rassemble les 36 icônes sous forme de symboles.
• 1 page HTML de démonstration.

Quelques choix de dessin à connaître avant l’achat. large-print est une page portant une grande lettre « A », pour un document imprimé, alors que text-size porte la lettre « T » et désigne un réglage d’interface. magnifier reprend la loupe de recherche des autres packs de la gamme. hearing-loop et sign-language sont des dessins propres au pack, à doubler d’un libellé dans votre interface.

Le pack suit la même grille que les autres packs d’icônes ligne de Beryl Design : 24 px, trait de 1,5, mêmes rayons et mêmes terminaisons arrondies. Si vous utilisez déjà l’un de ces packs, les icônes se combinent dans une même interface sans retouche.

Organisation des fichiers :

svg/
png/24/
png/48/
png/96/
sprite/accessibility-line-icons.svg
demo/index.html

Fabrication et IA

Les icônes ont été dessinées en SVG avec un assistant d’IA, puis relues et contrôlées une à une : rendu à 24 et à 48 px sur fond clair et sur fond sombre, vérification de la grille et du trait, puis relecture de chaque icône sur planche. Le pack ne contient aucune image générée par IA.

• SVG : vecteurs sans remplissage dont le trait prend la couleur du texte (currentColor). Vous changez la couleur avec la propriété CSS color et l’épaisseur avec l’attribut stroke-width, posé une seule fois sur la balise racine. Les fichiers s’ouvrent dans la plupart des outils de design et s’utilisent directement dans le code (HTML, composants).
• PNG 24, 48 et 96 px : icônes noires sur fond transparent, pour une présentation, un document, une affiche ou un logiciel qui n’importe pas le SVG.
• Sprite SVG : un fichier unique où chaque icône est un <symbol> portant le nom de son fichier, à appeler par <use href="#captions"/>.
• HTML : une page de démonstration autonome, sans script ni ressource externe, qui affiche les icônes par famille, en plusieurs tailles et en plusieurs couleurs, y compris sur fond sombre.

Les icônes sont livrées sous licence commerciale : vous pouvez les utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les produits que vous vendez, mais pas revendre ni redistribuer les fichiers, même gratuitement.

• Les principes à garder en tête dès la maquette : la conception pour l’accessibilité.
• Savoir quel référentiel s’applique à votre projet : RGAA, EAA, WCAG : quelle norme s’applique en 2026 ?
• Pour annoter vos maquettes et préparer un audit, ces pictogrammes complètent le kit accessibilité RGAA et EAA de Beryl Design (annotations, grille d’audit, composants).

Ces pictogrammes rendent-ils mon site accessible ?

Non. Ils signalent une information ou un service, ils ne remplacent ni un code bien structuré, ni des contenus adaptés, ni un audit. Une page qui les affiche n’est pas plus accessible pour autant : chaque icône qui porte un sens doit être accompagnée d’un libellé ou d’un texte alternatif.

Le pack reproduit-il des pictogrammes officiels ?

Non. Tous les dessins sont originaux, et le pack ne contient aucun pictogramme officiel déposé ni aucun logo de label. Si un lieu ou un document doit afficher un pictogramme normalisé, utilisez sa version officielle.

Comment changer la couleur et l’épaisseur des icônes ?

Dans le SVG, le trait suit la couleur du texte : la propriété CSS color suffit. L’épaisseur se règle avec l’attribut stroke-width, présent une seule fois sur la balise racine de chaque fichier. Les PNG, eux, sont livrés en noir sur fond transparent.

1.0.0 (12 novembre 2026) : première version.