← Retour aux rapports

Audit Perplexity API - SOS Toutou Grand Public

Date : 2026-03-28

Modele : Perplexity Sonar

Nombre de pages auditees : 15

1. index.html

1. NOTE /10

8/10 (UX: 8.5, Design: 9, Contenu: 8, Technique: 7). Design moderne et responsive, UX fluide mais incomplet (code tronqué), contenu impactant.

2. BUGS ou erreurs

`, ``).
  • **Liens potentiellement cassés** : `compte.html`, `en/index.html`, `/manifest.webmanifest`, `/img/icon-180.png` (non vérifiables sans fichiers).
  • **Accents OK** mais entités HTML (`é`, `è`) : bien gérées, pas d'erreurs visibles.
  • **JS manquant** : `toggleAccept()`, `id="cguCheck"`, `id="accountLink"` référencent fonctions non définies.

    • 3. PROBLÈMES UX

    4. AMÉLIORATIONS concrètes (priorité ↓)

    1. **Compléter HTML/JS** : Fermer balises, implémenter `toggleAccept()` pour activer cards (bloque flux principal).
    2. **Accessibilité WCAG** : Ajouter `alt=""` emojis, `role="button" aria-label` cards, `aria-expanded` panels stats.
    3. **Feedback utilisateur** : Loader/spinner sur clics cards, confirmation CGU, bouton "Commencer" visible post-acceptation.
    4. **Mobile nav** : Menu hamburger <700px, masquer badge tôt.
    5. **SEO/Perf** : `` mismatch projet ("SOS Toutou" vs "SOS Animal"), lazyload futur contenu.</li> </ul> <h3>5. CE QUI EST BIEN</h3> <ul> <li>**Design cohérent** : Thème rouge/vert/teal intuitif (compagnie/élevage/NAC), hover fluides, shadows modernes.</li> <li>**Responsive solide** : Grids adaptatifs, clamps typography, PWA-ready (manifest, theme-color).</li> <li>**Contenu engageant** : Mission/stats impactants (70%/84%), charte persuasive avec sources fiables.</li> </ul> <hr> <h2>2. compagnie.html</h2> <h2>1. NOTE /10</h2> <p><strong>UX: 8/10</strong> | <strong>Design: 9/10</strong> | <strong>Contenu: 7/10</strong> | <strong>Technique: 6/10</strong> </p> <p><strong>Note globale: 7.5/10</strong> – Design pro et immersif, UX fluide mais perfectible mobile/accessibilité, technique incomplète (code tronqué).</p> <h2>2. BUGS ou erreurs</h2> <ul> <li>**HTML invalide** : Style `<style>` tronqué (`cursor: poi` au lieu de `cursor: pointer;`), balises body/main/footer manquantes dans extrait.</li> <li>**Liens cassés potentiels** : `href="css/rc-theme.css"` non fourni ; `script QRCode` OK mais non utilisé visiblement.</li> <li>**Accents manquants** : Aucun détecté (français correct), mais `lang="fr"` bien présent.</li> <li>**Police manquante** : `--font: 'Barlow'` sans `<link Google Fonts>`, fallback Arial OK mais dégradé.</li> </ul> <h2>3. PROBLÈMES UX</h2> <ul> <li>**Navigation** : Pas de menu global (seulement header sticky basique), retour "compagnie.html" ambigu sans fil d'Ariane.</li> <li>**Lisibilité mobile** : `viewport maximum-scale=5.0` trop permissif (zoom excessif) ; grid `animal-grid` (1fr 1fr) casse sur petits écrans sans media queries visibles.</li> <li>**Accessibilité** : Pas d'`alt` sur images/emoji (`animal-collage`, `upload-preview img`) ; contrastes OK mais checkboxes modales sans `aria-label` ; focus states manquants sur `.tool-btn`, `.animal-card`.</li> <li>**Heuristiques Nielsen** : Statut système faible (pas de feedback loading sur modales/upload) ; cohérence partielle (styles inline vs externe).[1]</li> </ul> <h2>4. AMÉLIORATIONS concrètes (priorité ↓)</h2> <ol> <li>**Ajouter Google Fonts** : `<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700;800&family=Barlow+Condensed:wght@700;800&display=swap" rel="stylesheet">` dans `<head>`.</li> <li>**Media queries mobile** : `@media (max-width: 768px) { .animal-grid { grid-template-columns: 1fr; } .header { padding: 0 16px; } }` pour stacker cartes/toolbar.</li> <li>**Accessibilité** : Ajouter `role="button" tabindex="0" aria-label="Choisir chien"` sur `.animal-card` ; `alt="Photo chien"` sur images ; `aria-modal="true"` sur modales.</li> <li>**Feedback UX** : Ajouter spinner JS sur `.disc-accept` et upload ; indiquer étape active (ex: `.animal-section.selected`).</li> <li>**Optimiser viewport** : Changer en `width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes` pour équilibrer zoom/accessibilité.</li> </ul> <h2>5. CE QUI EST BIEN</h2> <ul> <li>**Design cohérent Royal Canin** : Palette rouge/blanc, gradients thématiques (chien/orange, chat/bleu), hover fluides – esthétique pro et engageante.</li> <li>**Structure logique** : Flux clair (disclaimer → hero → choix animal → outils → spécialités → urgence), modales bien pensées.</li> <li>**Performance visuelle** : CSS variables, transitions subtiles, shadows immersifs ; responsive partiel via `clamp()` et `max-width`.</li> </ul> <hr> <h2>3. go.html</h2> <h3>1. NOTE /10</h3> <p><strong>8/10</strong> (UX: 9/10, Design: 8/10, Contenu: 8/10, Technique: 8/10). Page simple et efficace, mais perfectible en accessibilité et cohérence branding.</p> <h3>2. BUGS ou erreurs</h3> <ul> <li>**Accent manquant** : "Symptomes" → "Symptômes" (JS ligne info).</li> <li>**Incohérence branding** : Titre "SOS Animal" vs projet "SOS Toutou" (chiens/chats).</li> <li>**HTML valide** (DOCTYPE, sémantique OK), pas de liens cassés (redirection dynamique). Script `auth-gate.js` non fourni, risque d'erreur si absent.</li> <li>Pas d'erreurs console évidentes (testé mentalement).</li> </ul> <h3>3. PROBLÈMES UX</h3> <ul> <li>**Accessibilité** : Pas d'attributs ARIA (ex: `role="status"` sur spinner/info), contrastes OK mais hover `scale(1.03)` non clavier-focusible, emoji logo non textuel (`alt` manquant).</li> <li>**Mobile** : Responsive (viewport OK, max-width), mais padding 20px trop faible sur petits écrans (<320px).</li> <li>**Navigation** : Auto-redirect 2s trop court (pas de contrôle utilisateur clair), fallback bouton OK mais pas prioritaire visuellement.</li> <li>**Lisibilité** : Police system OK, mais info text-align:left dans card centrée désoriente.</li> </ul> <h3>4. AMÉLIORATIONS concrètes (priorité ↓)</h3> <ol> <li>Ajouter `role="status" aria-live="polite"` sur `#info` et `#redir-msg` + `aria-label` sur bouton pour WCAG 2.1 AA.</li> <li>Corriger "Symptômes" et aligner titre sur "SOS Toutou" (ex: "SOS Toutou - Évaluation {module}").</li> <li>Augmenter timeout à 4s, bouton visible dès chargement avec `display:block` initial.</li> <li>Ajouter media query : `@media (max-width:320px) { .card {padding:20px} }`.</li> <li>Remplacer emoji par SVG/logo avec `aria-hidden="true"` + texte descriptif.</li> </ul> <h3>5. CE QUI EST BIEN</h3> <ul> <li>**Design minimaliste et esthétique** : Carte centrée, dégradé bleu pro, animations fluides (spinner, hover).</li> <li>**Feedback utilisateur clair** : Info dynamique des params, spinner + message de fallback.</li> <li>**Performance** : Inline CSS/JS, pas de dépendances externes critiques, responsive natif.</li> </ul> <hr> <h2>4. SOS_Cardiologie.html</h2> <h2>1. NOTE /10</h2> <p><strong>8/10</strong> (UX: 8.5, Design: 9, Contenu: 8, Technique: 7.5) </p> <p>Design moderne et cohérent, UX fluide pour un outil de triage, mais manques techniques et accessibilité.</p> <h2>2. BUGS ou erreurs</h2> <ul> <li>**Code tronqué** : CSS coupé à `.vet-result-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8` → incomplet, risque d'erreurs de rendu (boutons vétérinaires cassés).</li> <li>**HTML invalide potentiel** : Pas de `<body>`, `<main>`, scripts JS absents → page non fonctionnelle sans JS (sections cachées par `display: none`).</li> <li>**Liens externes** : Dépendances CDN (jsPDF, JSZip, QRCode) sans fallback → risque de blocage si offline ou CDN down.</li> <li>**Accents OK** : Tous les textes en français corrects (ex: "cardiologie").</li> </ul> <h2>3. PROBLÈMES UX</h2> <ul> <li>**Navigation mobile** : `user-scalable=no` bloque zoom → pénalise seniors/malvoyants (WCAG violation).</li> <li>**Lisibilité mobile** : `font-size: 18px` sur `html` trop grand (720px max-width OK mais padding excessif sur petits écrans).</li> <li>**Accessibilité** : Pas d'`aria-label` sur boutons (ex: `.race-btn`, `.symp-btn`), icônes sans `alt` (`.race-img`), contrastes limites (ex: `--muted` sur fond blanc).</li> <li>**Étapes masquées** : `.section { display: none; }` sans JS = page vide au chargement.</li> </ul> <h2>4. AMÉLIORATIONS concrètes (priorité ↓)</h2> <ol> <li>**Ajouter structure HTML/JS** : Inclure `<body>` complet, scripts pour `.section.visible` et gestion étapes (priorité haute : page inutilisable sinon).</li> <li>**Accessibilité WCAG** : Ajouter `aria-label`, `role="button"`, `alt` sur images ; autoriser zoom (`user-scalable=yes`).</li> <li>**Responsive fin** : `@media (max-width: 480px)` réduire `font-size: 16px`, padding container à `16px`.</li> <li>**Charger JS différé** : `defer` sur scripts CDN ; fallback local pour audio/QR.</li> <li>**Contraste/lecture** : Booster `--muted` à `#4A5568` ; tester avec WAVE tool.</li> </ul> <h2>5. CE QUI EST BIEN</h2> <ul> <li>**Design cohérent** : CSS variables propres, charte claire (navy/rouge), animations fluides (fadeUp, hover).</li> <li>**UX intuitive** : Grilles tactiles (races/symptômes), indicateur étapes, feedbacks visuels (couleurs risque MVD/DCM).</li> <li>**Mobile-first solide** : Sticky header, boutons full-width, viewport optimisé.</li> </ul> <hr> <h2>5. SOS_Respiratoire.html</h2> <h2>1. NOTE /10</h2> <p><strong>8/10</strong> </p> <p>UX solide (fl wizard clair), design cohérent et moderne, contenu pertinent pour triage vétérinaire. Technique robuste mais perfectible (JS manquant, accessibilité).</p> <h2>2. BUGS ou erreurs</h2> <ul> <li>**HTML incomplet** : Code tronqué (fin CSS brutal à `.rh-orang`), JS absent pour interactions (sections, boutons, audio, QR).</li> <li>**Liens externes** : Dépendances `css/rc-theme.css` et jsPDF non fournis ; risque de FOUT/FOUC.</li> <li>**Accents OK** : Tous présents (ex: Respiratoire, symptômes).</li> <li>**HTML valide** : Structure sémantique bonne (DOCTYPE, meta), mais tester full DOM pour erreurs JS-render.</li> <li>**Titres incohérents** : `<title>SOS Animal` vs projet **SOS Toutou**.

      6. 3. PROBLÈMES UX

      4. AMÉLIORATIONS concrètes (priorité ↓)

      1. **Ajouter JS complet** : Gérer `section.visible`, sélections boutons, audio recorder, QR gen → page inutilisable sans.
      2. **Accessibilité WCAG** : Ajouter `aria-*`, supprimer `user-scalable=no`, tester contrasts (outil WAVE).
      3. **Responsive fin** : `@media (max-width: 480px)` → `grid-template-columns: 1fr` pour grilles, `padding: 16px` boutons.
      4. **Perf** : Lazyload fonts/jsPDF, préconnecter CDN, minifier CSS inline (trop volumineux).
      5. **SEO/Title** : `SOS Toutou - Pré-diagnostic Respiratoire` + meta description.

        6. 5. CE QUI EST BIEN

        6. SOS_Digestif.html

        1. NOTE /10

        8/10 (UX: 8.5, Design: 9, Contenu: 8, Technique: 7). Design soigné et responsive, UX fluide pour un outil de diagnostic, mais incohérences techniques et code incomplet.

        2. BUGS ou erreurs