Installation

Méthode 1 : Téléversement via WordPress

1. Téléchargez le fichier ZIP du plugin depuis votre espace client
2. Accédez au panneau d'administration WordPress
3. Allez dans Extensions → Ajouter
4. Cliquez sur Téléverser une extension
5. Sélectionnez le fichier ZIP et cliquez sur Installer maintenant
6. Activez le plugin

Méthode 2 : Téléversement via FTP

1. Extrayez le fichier ZIP du plugin
2. Connectez-vous à votre serveur via FTP
3. Téléversez le dossier usabilis dans /wp-content/plugins/
4. Accédez au panneau WordPress et allez dans Extensions
5. Trouvez Usabilis et cliquez sur Activer

Post-installation

Après l'activation du plugin :

• Allez dans Réglages → Usabilis
• Entrez votre clé de licence
• Configurez les paramètres du widget
• Vérifiez que le widget apparaît correctement sur le frontend

Configuration

Activation de la licence

1. Accédez à Réglages → Usabilis
2. Entrez la clé de licence dans le champ approprié
3. Cliquez sur Enregistrer la licence
4. Vérifiez que le statut affiche "Licence active"

Configuration du widget

Position du bouton

Vous pouvez choisir où positionner le bouton d'ouverture du widget :

• En bas à droite (par défaut)
• En bas à gauche
• Au centre à droite
• Au centre à gauche

Email de support

Entrez l'email qui sera affiché dans la déclaration d'accessibilité pour permettre aux utilisateurs de vous contacter.

Activer/Désactiver le widget

Vous pouvez temporairement désactiver le widget en décochant l'option "Afficher le panneau d'accessibilité dans le frontend".

Nouvelles options de visibilité (v3.3.0+)

Masquer sur mobile

Cette option vous permet de masquer complètement le widget sur les appareils mobiles. Utile si :

• Vous avez une application mobile dédiée avec des fonctionnalités d'accessibilité intégrées
• Votre design mobile utilise des approches différentes pour l'accessibilité
• Vous souhaitez optimiser les performances sur des appareils aux ressources limitées

Gestion des sections

Vous pouvez maintenant choisir exactement quelles sections du widget afficher à vos utilisateurs :

Comment configurer :

1. Allez dans Réglages → Usabilis
2. Trouvez la section "Configuration du widget"
3. Cochez/décochez les cases pour chaque section
4. Cliquez sur "Enregistrer la configuration"

Fonctionnalités du widget

Profils d'accessibilité

Contrôles du contenu

Contrôles des couleurs

Outils d'orientation

Outils d'accessibilité avancés

Le widget d'accessibilité

Comment ça fonctionne

Le widget est automatiquement chargé sur toutes les pages de votre site WordPress. Les utilisateurs peuvent :

1. Cliquer sur le bouton d'accessibilité pour ouvrir le panneau
2. Sélectionner un profil préconfiguré ou personnaliser les paramètres individuels
3. Les paramètres sont enregistrés dans le navigateur et appliqués automatiquement lors des visites suivantes

Fonctionnalité "Lire la page"

Comment fonctionne la synthèse vocale

Lorsque l'utilisateur active la fonction "Lire la page" :

1. Le curseur de la souris se transforme en indicateur de lecture
2. En cliquant sur n'importe quel élément textuel, le contenu est lu à haute voix
3. Un mini lecteur apparaît montrant l'état de la lecture
4. L'élément en cours de lecture est mis en surbrillance visuellement
5. La lecture peut être arrêtée à tout moment

Types de contenu pris en charge

• Texte normal : Paragraphes, titres, listes
• Liens : Annonce "Lien :" suivi du texte
• Boutons : Annonce "Bouton :" suivi du texte
• Images : Lit le texte alternatif si présent
• Formulaires : Lit les étiquettes des champs

Raccourcis clavier

Compatibilité navigateur

Le widget est compatible avec tous les navigateurs modernes :

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Support de la synthèse vocale par navigateur

Personnalisation

Personnalisation des couleurs (Pro/Enterprise)

Avec une licence Pro ou Enterprise, vous pouvez personnaliser :

• Couleur principale : La couleur du bouton et des éléments actifs
• Taille de l'icône : Petite, Moyenne, Grande ou Très Grande

// Les paramètres sont automatiquement enregistrés
// et appliqués au widget en temps réel

CSS personnalisé (Enterprise)

Avec une licence Enterprise, vous pouvez ajouter du CSS personnalisé pour modifier complètement l'apparence du widget :

/* Exemple : Changer le border radius du widget */
.wpap-section {
    border-radius: 0 !important;
}

/* Exemple : Police personnalisée pour le titre */
.wpap-sidebar-header h2 {
    font-family: 'Montserrat', sans-serif !important;
}

/* Exemple : Animation personnalisée pour le bouton */
.wpap-toggle-button {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Exemple : Personnaliser le mini lecteur de lecture */
.wpap-reading-mini-player {
    background: #1a202c !important;
    border-radius: 20px !important;
}

/* Exemple : Style pour le texte surligné pendant la lecture */
.wpap-reading-active {
    background: rgba(52, 179, 228, 0.2) !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
}

Marque blanche (Enterprise)

Les licences Enterprise suppriment automatiquement la mention "Développé par STUDIO 09" du widget.

Contrôle de visibilité et sections

Visibilité par appareil

Masquer sur mobile

Le widget peut être complètement masqué sur les appareils mobiles. C'est utile pour :

• Applications mobiles : Si vous avez une app avec des fonctionnalités d'accessibilité intégrées
• Design responsive : Si votre design mobile utilise des approches différentes
• Performance : Pour optimiser le chargement sur des appareils avec des connexions lentes

Comment fonctionne la détection mobile ?

Le système utilise trois méthodes pour identifier les appareils mobiles :

1. User Agent : Détecte Android, iOS, Windows Phone, etc.
2. Écran tactile : Vérifie les capacités tactiles
3. Taille d'écran : Considère mobile les appareils avec largeur ≤ 768px

// Le widget vérifie automatiquement s'il est sur mobile
if (config.hideOnMobile && isMobileDevice()) {
    // Le widget n'est pas chargé
    return;
}

Contrôle granulaire des sections

Pourquoi contrôler les sections ?

Tous les sites n'ont pas les mêmes besoins. Quelques exemples :

• Blog minimaliste : Vous pourriez vouloir seulement les contrôles de texte
• Site corporate : Seulement les profils prédéfinis pour la simplicité
• E-commerce : Focus sur le contraste et la lisibilité
• Portail éducatif : Toutes les fonctionnalités actives

Meilleures pratiques

Exemples de configuration

Configuration "Essentielle"

✓ Profils d'accessibilité
✗ Section CONTENU
✗ Section COULEURS
✗ Section ORIENTATION

Idéal pour : Sites avec un design déjà optimisé qui veulent offrir seulement des profils rapides.

Configuration "Lecture"

✗ Profils d'accessibilité
✓ Section CONTENU
✗ Section COULEURS
✓ Section ORIENTATION

Idéal pour : Blogs, sites d'actualités, portails de documentation.

Configuration "Visuelle"

✗ Profils d'accessibilité
✗ Section CONTENU
✓ Section COULEURS
✗ Section ORIENTATION

Idéal pour : Galeries, portfolios, sites avec forte composante visuelle.

Questions fréquemment posées

Résolution de problèmes

Le widget n'apparaît pas sur le site

1. Vérifiez que le plugin est actif
2. Contrôlez que la licence est valide et active
3. Assurez-vous que l'option "Afficher le panneau d'accessibilité" est active
4. Videz le cache du site et du navigateur
5. Vérifiez la console du navigateur pour d'éventuelles erreurs JavaScript

Erreur "Licence non valide"

• Vérifiez que vous avez correctement copié la clé de licence
• Contrôlez que la licence n'a pas expiré
• Assurez-vous que le domaine est autorisé pour cette licence
• Essayez de cliquer sur "Vérifier maintenant" pour actualiser le statut

La fonction "Lire la page" ne fonctionne pas

• Vérifiez que le navigateur prend en charge l'API Web Speech (voir tableau de compatibilité)
• Contrôlez que l'audio n'est pas coupé dans le navigateur
• Sur certains navigateurs mobiles, la synthèse vocale nécessite une interaction de l'utilisateur avant de fonctionner
• Assurez-vous qu'il n'y a pas d'extensions de navigateur qui bloquent la synthèse vocale

Conflits avec d'autres plugins

Si vous rencontrez des problèmes de compatibilité :

1. Désactivez temporairement les autres plugins un par un
2. Identifiez quel plugin cause le conflit
3. Contactez le support avec les détails du conflit

Problèmes de performance

• Vérifiez que votre hébergement respecte les exigences minimales
• Utilisez un plugin de cache (W3 Total Cache, WP Rocket)
• Activez la compression GZIP sur le serveur
• Envisagez l'utilisation d'un CDN
• Si vous utilisez "Désactiver les animations", certaines fonctionnalités comme la ligne de lecture et la loupe pourraient être automatiquement désactivées

Mode débogage

Pour activer le mode débogage et obtenir plus d'informations :

// wp-config.php
define('WPAP_DEBUG', true);

Journal des modifications