COMPONENTS

Accordion

An accordion is an interactive element used on websites and applications to organize content in a compact way. It allows users to click on titles or buttons to show or hide sections of content, saving screen space and making information easily 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

Follow these steps to install and use the ip-accordion component in your project.

Step 1

Install the ip-accordion component as a dependency in your project:

npm install ip-accordion

Step 2

Import the module into your script file:

Usage

To use the ip-accordion component, you need to define the properties as attributes and provide slot content for each accordion item.

Properties

Property	Attribute	Necessity	Description	Type	Default
accordionHeaders	accordion-headers	Required	Defines headers for each accordion item using a JSON array	accordionHeadersInterface[] \| string	Undefined
isFirstPanelOpen	is-first-panel-open	Optional	Contrôle si le premier panneau est ouvert par défaut.	boolean	Undefined
isSingleOpen	is-single-open	Optional	Détermine si un seul panneau peut être ouvert à la fois.	boolean	Undefined
titleTag	title-tag	Optional	Spécifie la balise HTML à utiliser pour les en-têtes de l’accordéon.	string	h2

accordion-headers

This attribute sets the accordion header details. Each header object can have the following properties:

title : The title of the accordion header (optional)
iconPath : Path to the icon image (optional)
iconActivePath : Path to the icon image when the header is active (optional)
subtitle: The subtitle of the accordion header (optional)
btnAlt: The alternative text for the button when the panel is closed (optional)
btnAltClose: The alternative text for the button when the panel is open (optional)
id: Unique ID associated with the button (optional)
ariaText: Accessible name for the panel (required)

Panels Content

The content of each panel should be placed inside <div> elements with a slot attribute matching accordion-1, accordion-2, etc.

Example

Customization

We have a set of predefined variable used to customize the accordion-panel:

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

To update the values use the following:

Class

We have a set of classes that could be used to customise accordingly:

ip-accordion: for the container of the panels
acc-content: for the content of the panel
acc-header:for the header of the panel
acc-panel: for each <div> element representing a panel

Example

Accordion

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