Ajoutez un conteneur avec la classe clearfix autour de la composante de logo
2.1.8
title ajouté au lien de marque pour l’accessibilité
Grâce à la désignation d’un site Internet, le visiteur reconnait immédiatement l’expéditeur du site et le thème ou l’objectif.
La désignation se compose du logo fédéral (blason et marque verbale en quatre langues) et du nom de l’unité organisationnelle avec le sigle approprié (p. ex. DFAE) ou la forme courte (p. ex. MétéoSuisse).
Ces deux composants sont séparés par une ligne verticale. Pour les smartphones, le logo fédéral dans l’en-tête utilise uniquement le blason. Le nom de l’unité organisationnelle peut être abrégé. Le logo fédéral complet est répété dans le pied de page.
Le logo est un élément de marque: son utilisation est obligatoire et son apparence ne peut être modifiée.
<a href="#" class="brand hidden-xs" title="Back to home">
<img src="../img/logo-CH.svg" onerror="this.onerror=null; this.src='../img/logo-CH.png'" alt="Back to home" />
<h1>Department of the Environment, Transport, Energy and Communications</h1>
</a>
Les couleurs définies servent à la reconnaissance des sites Internet fédéraux, à la distinction d’éléments et interactions spécifiques ainsi qu’à l’orientation. La palette de couleurs utilisée est un élément de marque: son utilisation est obligatoire.
Trois couleurs sont utilisées: le ton rouge du logo fédéral, qui est complété par un ton rouge plus clair, un ton bleu et une palette de tons gris.
On retrouve le rouge dans la ligne rouge qui souligne l’en-tête et comme couleur de sélection dans la navigation et lorsque la souris passe sur un lien (mouseover). A part cela, on travaille avec différents tons gris. Ainsi, les titres et le corps du texte sont par exemple mis en œuvre dans un ton gris sombre.
Un ton gris clair est utilisé comme couleur d’arrière-plan. Il est appliqué automatiquement à <body>.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolores adipisci minus nesciunt facilis. Iure, error, facilis, modi, soluta deleniti maiores corporis impedit ducimus laboriosam porro fugiat et esse blanditiis.
<div class="container-main clearfix">
<div class="col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolores adipisci minus nesciunt facilis. Iure, error, facilis, modi, soluta deleniti maiores corporis impedit ducimus laboriosam porro fugiat et esse blanditiis.</p>
</div>
</div>
Le rapport des côtés des images en format paysage est de 16:10 (format paysage complet – nombre d’or) ou de 16:5 (demi format paysage). Les images en format portrait ne possèdent aucun rapport spécifique des côtés. Cependant, un rapport de 2:3 est recommandé.
Les icônes utilisées sont conçues de manière monochrome et plate. Elles sont stockées sous forme de polices web et se trouvent dans les ressources comme polices TrueType.
Si l’élément est composé d’une seule icône, la classe est définie dans un conteneur <span>. Dans ce cas, la fonction de l’icône doit être expliquée dans un texte «alt». Communiqué: <span class="" alt="vorwärts">...</span>
Accessibilité
Afin que l’élément d’icône puisse être lu par un lecteur d’écran et/ou s’il possède une importance du point de vue sémantique, il doit être muni de l’attribut «aria» approprié. Sinon, on ajoutera un attribut aria-hidden="true".
Selon les besoins, on peut également utiliser <span class="sr-only">icon description</span>.
