Déclaration d'accessibilité

Lien d'évitement

Un lien « Aller au contenu » visible à la prise de focus clavier permet de sauter la barre de navigation (WCAG 2.4.1).

Langue de la page

L'attribut lang="fr" est positionné sur l'élément <html> (WCAG 3.1.1).

Landmarks sémantiques

La navigation principale est dans un <nav aria-label="Navigation principale">, le contenu dans un <main>, le pied de page dans un <footer> (WCAG 1.3.6).

Page active dans la navigation

L'attribut aria-current="page" est positionné sur le lien de navigation correspondant à la page courante (WCAG 4.1.2).

Menu utilisateur

Le menu déroulant implémente le pattern ARIA complet : role="menu", role="menuitem", aria-haspopup, aria-expanded, aria-labelledby (WCAG 4.1.2).

Bouton hamburger mobile

aria-label dynamique (« Ouvrir / Fermer le menu ») + aria-expanded + aria-controls (WCAG 4.1.2).

Tiroir de navigation mobile — piège de focus

Lorsque le menu mobile est ouvert, le focus est capturé dans le panneau (useFocusTrap). aria-modal="true" est positionné sur l'élément aside. La fermeture via Échap ou un clic hors zone restaure le focus sur l'élément déclencheur (WCAG 2.1.2, 2.4.3).

Recherche — dialog et focus trap

Le panneau de recherche a role="dialog", aria-modal="true", aria-label, et piège le focus à l'intérieur (WCAG 2.1.2, 4.1.2).

Modale Producteur — dialog accessible

La modale ProducteurModal déclare role="dialog", aria-modal="true", aria-labelledby pointant vers son titre h2, piège le focus et ferme via Échap. Un bouton de fermeture visible avec aria-label est présent (WCAG 2.1.1, 2.4.3, 4.1.2).

Fermeture au clavier et restauration du focus

Touche Échap ferme la recherche, le tiroir mobile, la modale Producteur et le lecteur vidéo. Le focus est systématiquement rendu à l'élément déclencheur à la fermeture (WCAG 2.1.1, 2.4.3).

Messages d'erreur et de confirmation — annonces vocales

Tous les messages d'erreur (connexion, inscription, signalement, soumission de film) portent role="alert" aria-live="assertive". Les confirmations de succès utilisent role="status" aria-live="polite". Les lecteurs d'écran annoncent les retours sans interaction supplémentaire (WCAG 3.3.1, 4.1.3).

Boutons de notation (étoiles) — ARIA complet

Les cinq boutons de notation sont regroupés sous role="group" aria-labelledby. Chaque bouton déclare aria-label="N étoile(s) sur 5" et aria-pressed={sélectionné}. Les lecteurs d'écran peuvent noter un film au clavier (WCAG 1.3.1, 2.5.3, 4.1.2).

Formulaire multi-étapes — progression annoncée

Le formulaire de soumission de film (5 étapes) est enveloppé dans un <nav aria-label="Étapes du formulaire">. Chaque bouton d'étape porte aria-current="step" lorsqu'il est actif et aria-label="Étape N sur 5 : [nom]" (WCAG 4.1.3).

Groupes de choix (genre, classification, drapeaux) — fieldset/legend

Dans le formulaire de soumission, les sélecteurs de genre, de classification d'âge et les drapeaux de contenu utilisent <fieldset><legend> pour grouper sémantiquement les options. Les boutons toggle portent aria-pressed (genres/drapeaux) ou role="radio" aria-checked (classification) (WCAG 1.3.1).

Affichage conditionnel (formulaire de signalement) — annoncé

La section d'information spécifique aux signalements concernant des mineurs (CSAM) apparaît avec aria-live="polite" pour en informer les lecteurs d'écran lors de l'affichage dynamique (WCAG 4.1.3).

Carousel de films mis en avant

aria-roledescription="carousel", paginateur avec role="tablist" / role="tab" / aria-selected / aria-label individuels (WCAG 4.1.2).

Icônes SVG décoratives

Toutes les icônes SVG décoratives portent aria-hidden="true" (WCAG 1.1.1).

Textes alternatifs des images

Les vignettes de films et affiches utilisent alt={titre}, les images de fond décoratives utilisent alt="" (WCAG 1.1.1).

Labels des formulaires

Tous les champs de saisie (inscription, connexion, signalement, soumission de film) sont associés à une étiquette via htmlFor/id. Les champs obligatoires portent l'attribut required (WCAG 1.3.1, 3.3.2).

Attribut autocomplete

Les champs email, mot de passe, prénom, nom, pseudo déclarent autocomplete conformément au WCAG 1.3.5.

Titre de l'iframe lecteur vidéo

L'iframe Bunny.net déclare title={titre du film} (WCAG 4.1.2).

Indicateur de focus visible

Un contour or (2px solid var(--gold), !important) avec décalage de 2px est appliqué sur tous les éléments interactifs (:focus-visible), y compris ceux qui déclarent outline:none en style inline (WCAG 2.4.7).

Contrastes des textes

--txt (#f2f2f3) sur --bg (#0b0b0c) : 17,5:1. --txt2 : 16,2:1. --txt3 : 10,8:1. Or --gold sur fond sombre : 13,5:1. Couleur d'erreur #f87171 sur #0b0b0c : 7,0:1. Tous supérieurs au seuil AA de 4,5:1 (WCAG 1.4.3).

Mouvement réduit — carousel et animations globales

La rotation automatique du carousel respecte prefers-reduced-motion. Les animations hero, pulse, glow et fadeIn sont désactivées via @media (prefers-reduced-motion: reduce) dans la feuille de styles globale (WCAG 2.3.3).

Navigation par onglets — lecteur vidéo

La touche Échap ferme le lecteur. Le focus revient sur le bouton « Regarder » au moyen d'une ref explicite. Les contrôles clavier (lecture, pause, volume, plein écran) sont fournis par le lecteur Bunny.net intégré (WCAG 2.1.1, 2.4.3).

Icônes de réseaux sociaux non fonctionnelles dans le pied de page

Les icônes X, YouTube, Instagram et LinkedIn dans le pied de page sont affichées en tant que boutons visuels mais ne sont pas encore interactives (fonctionnalité à venir). Leur état désactivé n'est pas explicitement communiqué aux technologies d'assistance. (WCAG 1.3.1, 4.1.2)