Déclaration d'accessibilité

surdijon.fr · RGAA 4.1 / WCAG 2.1 AA · mise à jour : juin 2026

En bref. Ce site est partiellement conforme au RGAA 4.1. Une majorité de critères sont respectés dès aujourd'hui ; les points en cours sont listés ci-dessous. Un audit complet est prévu au troisième trimestre 2026. Si vous rencontrez une difficulté, contactez-moi directement : je réponds sous 48 heures.

Statut de conformité

SurDijon s'engage à rendre son site accessible conformément à l'article 47 de la loi n°2005-102 du 11 février 2005.

Partiellement conforme, RGAA version 4.1

Engagement. L'objectif est une conformité totale au RGAA 4.1 (Référentiel Général d'Amélioration de l'Accessibilité), aligné sur les critères WCAG 2.1 niveau AA. Chaque nouvelle page est développée en respectant ces critères dès la conception. Un audit de conformité complet avec grille de critères sera réalisé au troisième trimestre 2026 ; la déclaration sera mise à jour à l'issue.

Cette déclaration s'applique à surdijon.fr et à l'ensemble de ses sous-pages.

Navigation au clavier

Le site est entièrement navigable au clavier, sans piège de focus. Toutes les interactions (liens, boutons, formulaires, menus) sont accessibles via la touche Tab et activables avec Entrée.

  • Lien d'évitement. Un lien « Aller au contenu principal » est placé en premier élément du <body> sur chaque page. Il est visible au focus (premier appui sur Tab) et permet de sauter directement le header et la navigation.
  • Focus visible. Un contour de focus personnalisé est appliqué sur tous les éléments interactifs (liens, boutons, champs de formulaire). Le style respecte un rapport de contraste suffisant pour être visible sans être agressif.
  • Ordre de tabulation logique. L'ordre des éléments dans le DOM suit la hiérarchie visuelle de la page : header, navigation, contenu principal, pied de page. Aucun tabindex positif n'est utilisé.
  • Menu mobile. Le tiroir de navigation (drawer) emprisonne le focus à l'ouverture et le restitue au bouton de menu à la fermeture.

Sémantique HTML et points de repère ARIA

Le site utilise une structure sémantique HTML5 rigoureuse, complétée par des attributs ARIA pour les composants interactifs.

  • <header> (bannière), <nav> (navigation principale et secondaire), <main> (contenu principal avec l'identifiant main-content ciblé par le lien d'évitement), <footer> (pied de page) sont utilisés conformément à leur rôle ARIA implicite.
  • Chaque <nav> est accompagné d'un aria-label descriptif (ex. « Navigation principale », « Menu mobile », « Services SurDijon », « Liens légaux ») pour lever toute ambiguïté entre plusieurs zones de navigation.
  • Les <section> sont titrées via aria-labelledby pointant vers leur <h2>, conformément aux bonnes pratiques ARIA.
  • La hiérarchie des titres (H1 → H2 → H3) est cohérente sur l'ensemble du site : un seul <h1> par page, des <h2> pour les sections principales, des <h3> pour les sous-sections.
  • La balise <html lang="fr"> est déclarée. Chaque page possède une <title> unique et descriptive.
  • Les listes de navigation utilisent <ul role="list"> pour préserver la sémantique de liste même lorsque les styles CSS natifs sont réinitialisés.

Contenu et lisibilité

  • Langue. L'intégralité du contenu est rédigé en français clair, sans jargon technique superflu. Les quelques termes anglais (URL, email, footer, etc.) sont employés dans leur usage courant et compris sans ambiguïté.
  • Contraste. Le rapport de contraste entre le texte et son arrière-plan respecte les seuils WCAG 2.1 AA : minimum 4,5:1 pour le texte normal, 3:1 pour le texte large (≥ 18 px gras ou ≥ 24 px). Les couleurs du design system (tokens CSS) ont été vérifiées avec un analyseur de contraste avant validation.
  • Redimensionnement. Le texte peut être agrandi jusqu'à 200 % sans perte de contenu ni de fonctionnalité. Les mises en page utilisent des unités relatives (rem, clamp(), pourcentages) et s'adaptent sans débordement.
  • Typographie. Les polices de caractères (Cabinet Grotesk pour les titres, Satoshi pour le corps de texte) ont été choisies pour leur lisibilité à l'écran. Les tailles de police utilisent un système d'échelle fluide (clamp()) pour un confort de lecture sur mobile comme sur desktop.
  • Formulaires. Chaque champ est associé à son libellé via <label>, aria-label ou aria-labelledby. Les messages d'erreur sont décrits en texte clair.

Images et icônes

  • Images informatives. Toute image qui apporte une information possède un attribut alt textuel renseigné, décrivant le contenu ou la fonction de l'image. C'est le cas notamment du logo dans le header et des images des réalisations.
  • Images décoratives. Les images purement esthétiques (backgrounds, ornements) sont masquées des technologies d'assistance via aria-hidden="true" ou un alt vide, selon leur mode d'insertion.
  • SVG décoratifs. Tous les icônes SVG qui n'ont qu'un rôle décoratif (dans les listes de services, les cartes, les métriques) portent aria-hidden="true" et focusable="false".
  • Icônes fonctionnelles. Les icônes qui accompagnent un lien ou un bouton (ex. icône téléphone, email, réseaux sociaux) sont masquées avec aria-hidden="true" ; la fonction est portée par le libellé texte visible ou un aria-label sur le lien parent.

Animations et réduction de mouvement

  • Transitions de page. La navigation entre les pages utilise l'API View Transitions avec un fondu léger (150 ms sortant, 400 ms entrant). Aucune animation n'est essentielle à la compréhension du contenu.
  • Respect des préférences système. La media query prefers-reduced-motion est respectée. Si un visiteur a activé la réduction de mouvement dans son système d'exploitation, les animations sont désactivées ou réduites à un minimum fonctionnel.
  • Micro-interactions. Les animations de survol (:hover) sur les liens, boutons et cartes utilisent des transitions CSS courtes (200-300 ms) et non bloquantes. Aucun clignement, défilement automatique ou effet stroboscopique n'est présent sur le site.
  • Conformité visée avec le critère RGAA 13.8 (absence d'éléments clignotants ou animés pouvant provoquer des crises d'épilepsie).

Résultats des tests

L'audit d'accessibilité a été réalisé en auto-évaluation sur la base du référentiel RGAA 4.1 (WCAG 2.1, niveau AA).

Points conformes

  • Structure sémantique HTML5 et points de repère ARIA (détaillés ci-dessus).
  • Lien d'évitement, navigation clavier sans piège de focus.
  • Hiérarchie de titres cohérente, un seul H1 par page.
  • Attributs alt sur toutes les images informatives.
  • SVG décoratifs avec aria-hidden="true".
  • Contraste texte/fond conforme WCAG 2.1 AA.
  • lang="fr" sur la balise <html>.
  • Titre de page unique et descriptif via la balise <title>.
  • Formulaires avec <label> ou aria-label pour chaque champ.
  • Redimensionnement du texte jusqu'à 200 % sans perte de contenu.
  • Prise en compte de prefers-reduced-motion.
  • Transitions de page via View Transitions API, sans flash blanc.

Points en cours d'amélioration

  • Audit RGAA complet avec grille de critères détaillée, prévu au troisième trimestre 2026.
  • Test avec lecteur d'écran (NVDA / VoiceOver) sur l'ensemble des pages de service.
  • Vérification approfondie des animations et transitions (critère 13.8 RGAA).
  • Déclaration mise à jour après chaque audit complet.

Technologies utilisées

Le site surdijon.fr est construit avec :

  • HTML5, balisage sémantique statique.
  • CSS3, variables custom properties, Flexbox, Grid, media queries mobile-first.
  • JavaScript vanilla pour le menu mobile et quelques comportements d'interface légers.
  • Astro (générateur de site statique) côté build ; aucun framework côté client.

Aucune dépendance tierce côté client. Pas de cookies, pas de scripts de suivi tiers à l'exception d'un compteur de visites anonyme (Umami, hébergé en propre, sans recueil de données personnelles).

Compatibilité navigateurs

Chaque page est vérifiée sur les environnements suivants avant mise en ligne :

  • Google Chrome (dernière version) / Windows 11 et macOS Sonoma.
  • Mozilla Firefox (dernière version) / Windows 11 et macOS Sonoma.
  • Safari (dernière version) / macOS Sonoma et iOS.
  • Navigation clavier seule dans Chrome et Firefox.
  • Affichage mobile (320 px - 428 px) et desktop (1920 px) avec les outils de développement.
  • Axe DevTools (extension navigateur) pour l'analyse automatisée WCAG 2.1.
  • Lighthouse (onglet Accessibilité) : objectif score ≥ 95/100 sur toutes les pages.

Signaler un problème d'accessibilité

Si vous rencontrez une difficulté pour accéder à un contenu ou une fonctionnalité du site, contactez-moi :

  • E-mail : contact@surdijon.fr
  • Délai de réponse : 48 heures ouvrées.
  • Objet suggéré : « Accessibilité - [description du problème] »

Je m'engage à vous proposer une alternative accessible ou à vous fournir le contenu sous une autre forme dans ce délai.

Voie de recours

Si vous n'obtenez pas de réponse satisfaisante dans les délais impartis, vous pouvez contacter le Défenseur des droits :

  • Via le formulaire en ligne (s'ouvre dans un nouvel onglet).
  • Par courrier postal (gratuit, sans affranchissement) : Défenseur des droits, Libre réponse 71120, 75342 Paris CEDEX 07.
  • Par téléphone : 09 69 39 00 00 (du lundi au vendredi, 8h - 20h).
  • Auprès d'un délégué du Défenseur des droits dans votre région (s'ouvre dans un nouvel onglet).

Date de la déclaration

Cette déclaration a été établie le et mise à jour le . Elle sera mise à jour à chaque modification significative du site ou à l'issue de chaque audit d'accessibilité.