COMPOSANTS

Accordéon

Un accordéon est un élément interactif utilisé sur les sites web et les applications pour organiser du contenu de manière compacte. Il permet aux utilisateurs de cliquer sur des titres ou des boutons afin d’afficher ou de masquer des sections de contenu, ce qui permet de gagner de l’espace à l’écran et de rendre l’information facilement accessible.

6 Bonnes Pratiques pour être en Conformité

Aujourd’hui, encore beaucoup de sites Web et d’applications mobiles sont conçus sans penser à la navigation des personnes en situation de handicap. Pourtant, pour ces personnes, l’outil digital représente un véritable levier d’intégration, et leur apporte bien souvent un surcroît d’indépendance. Selon les différents types de handicaps, les manquements les plus couramment relevés sur le Web ne sont pas les mêmes.

Comment ont été conçus les PDF ?

À l’origine, les documents PDF n’étaient pas conçus pour être lus via un ordinateur mais pour être imprimés. Aujourd’hui, les documents PDF sont de plus en plus utilisés par les entreprises pour échanger et diffuser de l’information numérique de façon plus professionnelle (présentation, sécurité pour la protection de données). Sans traitement, les documents PDF sont inaccessibles pour des personnes non-voyantes utilisant des outils tels qu’un lecteur d’écran.

Gérer efficacement la création

PubliSpeak a été pensé pour vous faciliter la gestion de vos publications. Toutes les informations relatives à votre publication sont consultables en un clin d'œil. Titre, clients, nombre de pages, langues, dates et statuts. Les statuts font intégralement partie du cycle de vie d’une publication et de votre gestion de projet. Rendre visible son travail pour le faire valider par ses collaborateurs ou ses clients n’est pas de tout repos.

Nos équipes vous accompagnent

Notre plateforme de publications digitales répond à vos besoins mais vous n’êtes pas à l'aise avec l’accessibilité numérique .Pas de panique, onboarding, formation et support, nos équipes vous accompagnent vers l’autonomie et la prise en main de l’accessibilité numérique.Associez vos publications entre elles et construisez un corpus de documents afin de permettre à votre lecteur de naviguer facilement entre vos différentes publications.

Installation

Suivez les étapes ci-dessous pour installer et utiliser le composant ip-accordion dans votre projet.

Étape 1

Installez le composant ip-accordion en tant que dépendance dans votre projet :

npm install ip-accordion

Étape 2

Importez le module dans votre fichier script :

Utilisation

Pour utiliser le composant ip-accordion, vous devez définir les propriétés sous forme d’attributs et fournir du contenu dans les slots pour chaque élément de l’accordéon.

Propriétés

Propriété	Attribut	Nécessité	Description	Type	Valeur par défaut
accordionHeaders	accordion-headers	Requise	Définit les en-têtes de chaque élément de l’accordéon à l’aide d’un tableau JSON.	accordionHeadersInterface[] \| string	Non défini
isFirstPanelOpen	is-first-panel-open	Optionnel	Contrôle si le premier panneau est ouvert par défaut.	boolean	Non défini
isSingleOpen	is-single-open	Optionnel	Détermine si un seul panneau peut être ouvert à la fois.	boolean	Non défini
titleTag	title-tag	Optionnel	Spécifie la balise HTML à utiliser pour les en-têtes de l’accordéon.	string	h2

accordion-headers

Cet attribut permet de définir les informations des en-têtes de l’accordéon. Chaque objet d’en-tête peut contenir les propriétés suivantes :

title : le titre de l’en-tête de l’accordéon (optionnel).
iconPath : chemin vers l’icône affichée par défaut (optionnel).
iconActivePath : chemin vers l’icône affichée lorsque l’en-tête est ouvert/actif (optionnel).
subtitle: un sous-titre pour l’en-tête (optionnel).
btnAlt: texte alternatif du bouton lorsque le panneau est fermé (optionnel).
btnAltClose: texte alternatif du bouton lorsque le panneau est ouvert (optionnel).
id: identifiant unique associé au bouton (optionnel).
ariaText: nom accessible du panneau (obligatoire).

Contenu des panneaux

Le contenu de chaque panneau doit être placé dans des éléments <div> comportant un attribut slot, dont la valeur correspond à accordion-1, accordion-2, etc.

Exemple

Personnalisation

Un ensemble de variables prédéfinies permet de personnaliser le composant accordion-panel :

--ip-acc-primary-color
--ip-acc-secondary-color
--ip-acc-font
--ip-acc-icon-size

Pour modifier ces valeurs, utilisez l’exemple suivant :

Class

Un ensemble de classes est disponible pour personnaliser le composant selon vos besoins :

ip-accordion: pour le conteneur des panneaux.
acc-content: pour le contenu du panneau.
acc-header:pour l’en-tête du panneau.
acc-panel: pour chaque élément <div> représentant un panneau.

Exemple

Accordéon

Demo

6 Bonnes Pratiques pour être en Conformité

Comment ont été conçus les PDF ?

Gérer efficacement la création

Nos équipes vous accompagnent

Code

Documentation