Ce guide a pour objectif de faciliter l’identification des sites et services en ligne du Département de la Seine-Maritime, en lien avec sa charte graphique, en proposant un certain nombre de règles à suivre tant au niveau graphique qu’ergonomique.

Logos

Logo du Département

Le logo officiel du Département doit être utilisé sous sa forme quadri ou en monochrome, par exemple en cas d'arrière-plan monochrome :

Dans les cas où l’arrière-plan n’est pas blanc, il est possible d’utiliser une forme monochrome.

Logo pour entête de site

Il est possible d’utiliser une forme monochrome, notamment si le fond n'est pas blanc.

Mini logo

Sur les versions smartphone, il est possible de n'afficher que le "76" pour gagner en lisibilité sur l'entête.

Couleurs

Cette gamme de couleurs est la seule autorisée à être utilisée sur les sites du Département. Leurs associations se doivent de respecter les critères 3.2 et 3.3 du RGAA afin d’obtenir un niveau de contraste conforme aux exigences entre les couleurs d’arrière-plan et ces des textes et pictogrammes porteurs d’information d’avant-plan.

Bleu

Vert

Couleurs typographiques

Fond clair

Mode nuit

Association de couleurs

Seules ces associations de couleurs fond + texte sont autorisées au regard du RGAA 4.1, permettant d’avoir un contraste supérieur ou égal à 4,5:1.

Variables CSS

Il est recommandé d’utiliser des variables dans les feuilles de style. Les voici concernant les couleurs présentées ci-dessus :

:root {

	--texte: #00232E;

	--lien: #00829B;

	--lien-visite: #896D92;

	--important: #CA2E2E;

	--dark-fond: #00232E;

	--dark-texte: #FFFFFF;

	--dark-lien: #6294EC;

	--dark-lien-visite: #C480D2;

	--dark-important: #FE534B;

	--bleu-marine:#004156;

	--bleu-ciel:#00A2B3;

	--bleu-sombre:#002E3C;

	--vert-clair:#93C01F;

	--vert-moyen:#68972E;

	--vert-sombre:#5E7C27;

}
	

Typographie

Polices

La police Montserrat est la police de référence pour tous les textes présents sur les sites du Département de la Seine-Maritime : https://fonts.google.com/specimen/Montserrat

font-family: 'Montserrat', sans-serif;
	

La police Inter peut éventuellement se substituer à la précédente police sous réserve de validation de la Direction de la Communication et de l’Information (par exemple dans certains titres ou éléments de menu) : https://fonts.google.com/specimen/Inter

font-family: 'Inter', sans-serif;
	

Pour le mode « dyslexie », il est recommandé d’utiliser l’Open Dyslexic en lieu et place de l’ensemble des polices du site : https://www.dafont.com/fr/open-dyslexic.font

font-family: 'opendyslexicregular', sans-serif;
	

Style

Les règles suivantes doivent être suivies en matière de traitement du style des éléments textuels :

• Les tailles de police sont définies en em ou rem, pas en px
• L’interligne doit représenter 1,5 fois la taille du texte
• Le texte est toujours ferré à gauche, pas de justification (Règle Opquast n°186)
• La famille générique sans-serif doit être indiquée en dernier élément de substitution (Règle Opquast n°185)
• Les mises en majuscules dans les titres et éléments de menu doivent l’être via la valeur uppercase de la propriété CSS text-transform (Règle Opquast n°187)
• L’utilisation de variables pour les couleurs en CSS est recommandée

Liens

• Les liens hypertextes doivent être compréhensibles et en rapport avec la page ciblée. Il faut donc éviter les textes comme « voir plus », « ce lien », en savoir plus »
• Les liens dans le corps du contenu doivent toujours être soulignés par défaut et ne plus l’être au survol. La couleur doit être respectée comme indiquée dans la rubrique « Couleurs typographiques ». Inversement, les liens dans les éléments de navigation ou boutons ne doivent pas être soulignés par défaut mais seulement au survol
• Seuls les liens doivent être soulignés, aucun autre élément ne peut l’être (Règle Opquast n°134)
• Les effets de survol des liens (balise "a") doivent aussi être appliqué sur le focus
• Les liens cliqués précédemment doivent être identifiés par la couleur indiquée dans la rubrique « Couleurs typographiques » (Règle Opquast n°136)
• Un lien ouvrant une nouvelle fenêtre ou un site externe doit avertir l’internaute via l’attribut « title ». Il est recommandé d’afficher le pictogramme adéquat pour les liens sortants (Règle Opquast n°141). De plus, il ne faut réserver ce genre de liens, si possible, qu’à l’ouverture d’un nouveau site ou d’un document.
• Les liens de téléchargement de document indiquent le poids et le format des fichiers (Règle Opquast n°142)
• Les numéros de téléphone sont activables via le protocole approprié (Règle Opquast n°140)

Exemple de liens externes

Mise en exergue

Fond clair

La mise en avant de contenu se réalise via un bloc de couleur de fond #00232E et de texte blanc #FFFFFF.

Mode nuit

La mise en avant de contenu se réalise via un bloc de couleur de fond #004156 et de texte blanc #FFFFFF.

Vigilance sur la saisie de texte

Une vigilance toute particulière doit être apportée sur les copier-coller de textes pouvant poser problèmes sur les caractères accentués ou apostrophes par exemple.

Entête

En premier niveau de navigation, le site doit proposer des liens d’accès rapide permettant aux utilisateurs consultant le site en mode vocal ou avec un écran de faible largeur d’accéder rapidement au contenu. Si les éléments suivants ne sont pas disponibles immédiatement après l’entête de page, ce premier niveau de navigation doit contenir des liens leur donnant accès :

• Le menu principal
• Le contenu principal
• Le formulaire de recherche

Il est possible que ce premier niveau soit masqué (obligatoire en consultation sur smartphone) au chargement de la page et affiché lors de la première tabulation entrant dans celle-ci, via CSS ou Javascript.
Ce menu peut aussi contenir les éléments affichant les options d’accessibilité. Il adoptera la préconisation de couleurs précédemment énoncée.
(Règle Opquast n°159)

Logo

Le logo du Département est toujours situé en haut à gauche de l’entête, avec une marge suffisante pour l’aérer et centré verticalement.
Le logo doit proposer une alternative texte claire dans ses attributs et proposer un lien de retour à l’accueil sur clic (Règle Opquast n°150).
En cas de fond sombre de l’entête, il convient d’utiliser la version blanche du logo.

Menu

Les menus doivent être structurés avec les éléments nav, ul et li en veillant à la bonne imbrication des listes, afin de permettre la consultation du menu aux lecteurs alternatifs.
La rubrique active (marquage de position) doit être signalée en conservant le soulignement, celui-ci apparaissant aussi au survol.

Seules les couleurs suivantes peuvent être utilisées pour styliser le menu : #FFFFFF, #00232E, #00A2B3

Mode clair

• Avec un fond blanc, les éléments textuels du menu sont en #00232E
• Les éventuels éléments pictographiques ou de décoration sont en #00A2B3

Mode sombre

• Avec un fond sombre en #00232E, les éléments textuels sont en #FFFFFF
• Les éventuels éléments pictographiques ou de décoration sont en #00A2B3

Menu burger

Utilisé pour la version mobile du site, il est nécessaire de faire apparaître le mot « MENU » accolé au picto représenté par 3 barres :

Celui-ci sera ferré en haut à droite de l’entête.

Méga menu

En cas d’utilisation d’un méga menu, celui-ci doit s’afficher immédiatement sous le premier niveau de menu et descendre sur la totalité de l’écran.
Le fond sera un aplat de couleur adapté au mode clair ou sombre, avec une couleur de liens en conséquence.
La navigation déroulante doit se faire à l’intérieur de ce méga menu, par l’apparition des sous-rubriques sur clic, le nom de la rubrique supérieure s’affichant alors en haut à gauche du méga menu, à côté du picto « Flèche retour » accompagné du texte « Retour ».

Pied de page

Le pied de page du Département se présente de préférence en 2 parties, à égale largeur :

• Une partie institutionnelle avec la reprise du logo, l’adresse et le téléphone de l’Hôtel du Département, ainsi que les icônes des réseaux sociaux, sur fond gris clair #CBD8DD, texte et icône en #004156
• Une partie contenant un menu additionnel, sur fond sombre #004156 et liens en #FFFFFF

En mode sombre, l’ensemble du pied de page prend la couleur sombre #00232E en fond, texte et icônes en #FFFFFF

Éléments de navigation

Bouton de retour en haut de page

Un bouton de retour en haut de page, avec un attribut title « Retour en haut de page » doit être positionné en bas à droite du navigateur.

Sommaire interne à une page

Le Département de la Seine-Maritime privilégie le regroupement d’informations d’une même thématique sur une seule page avec un menu interne fixé (sticky) plutôt que plusieurs pages distinctes.

Fil d’Ariane

Chaque page devra comporter un fil d’Ariane comprenant des liens vers l’accueil et les rubriques parentes, en plus du nom de la page sans lien.

Liens d’évitement

Pour améliorer la navigation au clavier, des liens d’évitement non visibles sont à ajouter dans le code avant et après :

• Une vidéo
• Un formulaire en iframe
• Une carte dynamique style Google Map
• Un carrousel d’images sans contenu autre

Formulaires

Les formulaires doivent suivre les règles d’accessibilité ainsi qu’un certain nombre de recommandations visant à simplifier leur saisie.

Textes d’accompagnement

• Le texte introductif doit clairement énoncer l’objectif de la saisie du formulaire, les informations attendues (pièces jointes, identifiants, données personnelles…) et si nécessaire un lien vers la page d’information présente sur le site. S’il y a plusieurs pages ou la possibilité de donner une durée de saisie, il faut en informer l’internaute dans ce premier texte
• Un texte d’information sur la règlementation relative au traitement des données personnelles doit obligatoirement être affiché en bas du formulaire. Celui-ci peut faire références aux pages de mentions légales du site du Département ou afficher l’information complète de manière autonome
• Un texte final, après soumission du formulaire, récapitulera les étapes d’instruction et/ou le délai de traitement

Champs du formulaire

• Chaque champ est rattaché à un label, sauf cas exceptionnel dû au détournement de la fonctionnalité initiale du formulaire (ex : inscription S comme Sport)
• Tout champ obligatoire doit l’être signalé par un astérisque et par l’attribut required. La mention « Les champs suivis d’un astérisque (*) sont obligatoires » doit être accolée à chaque étape de la saisie la nécessitant
• Favoriser le remplissage automatique en utilisant l’attribut autocomplete
• La taille affichée des champs textarea doit pouvoir être redimensionnée par l’internaute pour le confort de sa saisie. Si le nombre de caractères est restreint, il faut généralement afficher les caractères restants
• S’il y a besoin d’un descriptif pour un champ, celui-ci est placé en placeholder ou après son label
• Les champs d’import de fichier doivent préciser les formats et poids limites attendus

Style

En version claire

• Le formulaire, sur fond #FFFFFF, est entouré d’une bordure de 2 pixels, en pointillés, de couleur #00A2B3, avec une marge interne de 40px
• Les champs de saisie ont un fond gris #CBD8DD et une couleur de texte #00232E
• Les labels et descriptifs sont en #004156

En version sombre

• Le formulaire, sur fond #00232E, est entouré d’une bordure de 2 pixels, en pointillés, de couleur #00A2B3, avec une marge interne de 40px
• Les champs de saisie ont un fond blanc #FFFFFF et une couleur de texte #00232E
• Les labels et descriptifs sont en #FFFFFF

Accessibilité

Le Département de la Seine-Maritime suit les recommandations du Référentiel Général d’Amélioration de l’Accessibilité dans sa version 4.1.
Le site affiche son score de conformité au regard du RGAA 4.1 et détaille les éléments non conformes ainsi qu’un plan d’actions.

Sobriété énergétique

En relation avec le Plan Climat de la collectivité, les sites du Département de la Seine-Maritime se doivent d’être le moins consommateur d’énergie. Quelques bonnes pratiques peuvent être suivies :

En phase de conception

• Éliminer les fonctionnalités non essentielles
• Quantifier les besoins, par exemple pour le dimensionnement des images, le nombre d’éléments dans une liste ou préciser le niveau de qualité ou de quantité minimale (nombre d’éléments affichés dans un moteur de recherche)
• Optimiser le parcours utilisateur, diminuer les points de friction pouvant le dégrader (utilisation de tests A/B sur le maquettage)
• Préférer un design web simple et épuré
• Privilégier une approche « mobile first »
• Favoriser un développement sur-mesure plutôt que l’utilisation d’un CMS

En phase de développement

• Limiter ne nombre de requêtes HTTP
• Éviter les requêtes SQL dans une boucle
• Ne charger que les ressources externes nécessaires et adaptées au support (exemple les fichiers CSS et Javascript adaptés au contexte). En limiter le nombre, mais penser à une feuille de style pour l’impression
• Utiliser de préférence des classes CSS plutôt que de modifier des propriétés une à une
• Favoriser l'utilisation de spritesheet CSS plutôt que de multiples images
• Préférer la saisie assistée à l’auto-complétion, ou en limiter les impacts (nombre de résultats, temps de réponse légèrement augmenté, nombre de caractères minimal)
• Minifier / compresser les fichiers CSS et Javascript
• Préférer la pagination au défilement infini
• Mettre en place un sitemap efficient
• Valider les pages auprès du W3C
• Valider les Javascript et CSS avec un Linter

En phase de production

• Choisir un hébergeur écoresponsable
• Préférer les serveurs virtualisés
• Optimiser les images et les PDF
• Adapter les textes au format web
• Adapter les sons et vidéos aux contextes de visualisation. Ne pas les charger automatiquement et fournir une alternative textuelle
• Limiter les outils d’analyses et les données collectées
• Pour une version similaire, privilégier le site en version mobile plutôt qu’une application mobile native
• Limiter l’utilisation des carrousels
• Entretenir régulièrement son site
• Mettre en place un plan de fin de vie du site