Amélioration de l’accessibilité en déplaçant les tabs avant le contenu sans changer la présentation visuelle
Ajout d'un attribut aria-label sur les bouttons de nagivation du carousel de remplacement en mode mobile
3.0.0
– Amélioration de l’accessibilité en mettant le diaporama en pause lorsque l’utilisateur interagit avec le composant et aussi en ajoutant un bouton de lecture/pause.
Le teaser «à la une» comprend deux à quatre articles actuels et sélectionnés par la rédaction qui doivent être affichés de manière bien visible. Normalement, le teaser «à la une» est placé tout en haut de la page d’accueil. Il est composé d’une grande image, d’un titre, d’un texte d’accroche court et d’un lien pour en savoir plus. L’affichage bascule automatiquement entre les articles sélectionnés. L’utilisateur peut sélectionner un article spécifique via une barre d’onglets; la bascule automatique est alors interrompue. Elle est également interrompue lorsque l’utilisateur clique sur le bouton Start/Stop en haut à gauche de l’image, lorsqu’il déplace la souris dans le conteneur du teaser (hover) ou qu’il commande ce dernier via son clavier (focus). En quittant le teaser (souris/focus), la bascule automatique reprend.
Sur les tablettes et smartphones, la barre d’onglets est remplacée par une série de points.
Attention:
Veuillez respecter la longueur des textes et des mots. La hauteur du teaser est déterminée de manière fixe.
*** Accessibilité
Le format de titre H3 dans les exemples de teaser ne constitue pas une exigence générale. Le format (H1, H2, H3, etc.) dépend de l’importance du titre au sein de la structure de la page.
Voluptates mollitia, consequuntur dignissimos maiores quasi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam mollitia modi porro, libero totam. Vero ipsum iste labore, tempora optio, modi dolores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo maxime, voluptatibus deserunt natus assumenda. In rem iste error cupiditate adipisci, qui quaerat! Magni quis reiciendis laborum dolores provident voluptatibus
sequi, architecto necessitatibus assumenda delectus incidunt itaque expedita minima deserunt at, soluta ratione hic error ipsam fugit ducimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto! Reprehenderit, similique itaque, dolorem quam
veritatis eaque ab consequatur tempore ullam deleniti explicabo.
Amélioration de l’accessibilité en déplaçant les tabs avant le contenu sans changer la présentation visuelle
Ajout d'un attribut aria-label sur les bouttons de nagivation du carousel de remplacement en mode mobile
3.1.0
Ajout le teaser «à la une» vertical
Le teaser «à la une» vertical est similaire au teaser «à la une» normal. Cependant, les barres d’onglets sont disposées verticalement.
Attention:
Veuillez respecter la longueur des textes et des mots. La hauteur du teaser est déterminée de manière fixe.
*** Accessibilité
Le format de titre H3 dans les exemples de teaser ne constitue pas une exigence générale. Le format (H1, H2, H3, etc.) dépend de l’importance du titre au sein de la structure de la page.
Voluptates mollitia, consequuntur dignissimos maiores quasi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam ..
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto.
Au lieu du teaser «à la une», on peut utiliser le teaser «actualités» avec un seul article. Cela est utile lorsque peu d’actualités sont publiées sur la page d’accueil et lorsque la fréquence des changements est faible.
Il est composé d’une grande image, d’un texte d’accroche court et d’un lien pour en savoir plus. Il peut éventuellement être muni d’une barre de titre (voir élément suivant).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem
sanctos a sapiente alienos esse arbitrantur.
<div class="row">
<div class="col-sm-7">
<p>
<img src="http://placehold.it/588x368" alt="image description">
</p>
</div>
<div class="col-sm-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem
sanctos a sapiente alienos esse arbitrantur.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem
sanctos a sapiente alienos esse arbitrantur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse.
<div class="row">
<div class="col-sm-8">
<div class="list-group">
<div class="list-group-header">
<h3 class="pull-left">Themes</h3>
<a href="#" class="pull-right icon icon--before icon--list">all</a>
</div>
<div class="row">
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem
sanctos a sapiente alienos esse arbitrantur.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
</div>
</div>
</div>
</div>
3.0.0
– Les commandes du carrousel ont été déplacées plus haut dans le DOM pour être plus facilement accessible avec le clavier.
2.5.1
Placer <figure> (élément) après <h4> pour éviter un alignement disgracieux
Un carrousel permet de présenter un thème à partir de différentes perspectives. Les divers articles basculent automatiquement.
Le carrousel se compose de différents blocs d’informations, eux-mêmes composés d’une grande image, d’une image plus petite facultative, d’un titre d’accroche court, d’un texte et d’un lien pour en savoir plus.
Accessibilité
La composante du carrousel n’est pas totalement accessible. Si elle est utilisée, le contenu doit également être mis à disposition sous une forme accessible à tous.
ordre inversé entre les éléments <small> et <div> à l’intérieur du conteneur .carousel-controls
classe .pull-right supprimée de ces 2 mêmes éléments
classe .pull-right ajoutée à l’élément .carousel-controls
Un diaporama permet d’afficher de manière attrayante un groupe d’images dont les thèmes sont connexes. Grâce à une fonction permettant de tourner les pages, on peut passer d’une image à l’autre. Le diaporama utilise le plugin jQuery (Blueimp Bootstrap Image Gallery) pour afficher les images en mode plein écran. Attention: Insérer la mise en page correcte avant le tag de clôture </body> (voir exemple ci-dessous).
Accessibilité
La composante du diaporama n’est pas totalement accessible. Si elle est utilisée, les contenus doivent également être mis à disposition sous une forme accessible à tous.
Slideshow
Image Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus atque quas, dignissimos quo tempora, consectetur. Odio tempore nulla odit ab impedit dignissimos unde, alias error harum animi laboriosam repudiandae quaerat.
Le teaser de texte est un élément simple qui est le plus souvent utilisé dans les listes. Il est composé d’un titre muni d’un lien, suivi d’un bloc de texte.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
<div class="row">
<div class="col-sm-3">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
</div>
</div>
Le teaser de dossier sert à introduire des thèmes sur des pages d’accueil ou d’aperçu.
Il est composé d’une image au format 16:10, du titre du thème ainsi que d’un texte d’introduction court. Le lien du titre et de l’image mène vers la page de détails correspondante.
Les teasers de dossier peuvent être groupés avec une barre de titre. Il convient alors de veiller à ce que la hiérarchie des titres de la page reste conforme aux exigences d’accessibilité.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/282x176" alt="Image description">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
</div>
</div>
élément .well emballé dans <div class="bordered-well"></div>
Pour mettre particulièrement en évidence un thème sur une page d’accueil, on peut utiliser au maximum un teaser de personne. Sur les pages des départements, il est par exemple utilisé pour présenter le Conseiller fédéral correspondant.
Le teaser de personne est composé, comme le teaser de dossier, d’une image au format 16:10, du titre du thème ainsi que d’un texte d’introduction court. Le lien du titre et de l’image mène vers la page de détails correspondante. De plus, le teaser dispose d’un arrière-plan gris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
<div class="row">
<div class="col-sm-3">
<div class="bordered-well">
<img src="http://placehold.it/282x176" alt="Image description">
<div class="well">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
<ul>
<li><a href="#">Link n°1</a></li>
<li><a href="#">Link n°2</a></li>
<li><a href="#">Link n°3</a></li>
</ul>
</div>
</div>
</div>
</div>
Sur la forme, la présentation des publications est un teaser très flexible. Il est composé d’un titre facultatif, d’une image facultative, d’une légende d’image facultative et de texte. Le texte peut être habillé par l’image à droite. Alternativement, cet élément de contenu pet être imbriqué dans un encadré d’information gris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.
<div class="row">
<div class="col-sm-3">
<!-- Publications list example -->
<div class="list-group news-feed">
<div class="list-group-header">
<a href="#" class="icon icon--before icon--list pull-right">all</a>
</div>
<div class="list-group-item">
<a href="#">
Publication's title : Lorem ipsum dolor sit amet
</a>
<br>
<figure class="pull-left">
<img src="http://placehold.it/78x117" alt="image description">
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.
</p>
</div>
<div class="list-group-item">
<a href="#">
Publication's title : Lorem ipsum dolor sit amet
</a>
<br>
<figure class="pull-left">
<img src="http://placehold.it/78x117" alt="image description">
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.
</p>
</div>
<div class="list-group-item">
<a href="#">
Publication's title : Lorem ipsum dolor sit amet
</a>
<br>
<figure class="pull-left">
<img src="http://placehold.it/78x117" alt="image description">
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.
</p>
</div>
</div>
</div>
</div>
la barre de défilement est masquée si elle n'est pas nécessaire
2.0.1
classe .news-feed ajoutée à l’élément .list-group
wrapper .scroll-y contenant tous les éléments .list-group-item ajouté
Dans le teaser des actualités, divers éléments d’actualités sont présentés par ordre chronologique. A l’aide d’une barre de défilement, l’utilisateur peut faire défiler le contenu du teaser vers le bas et ainsi voir tous les éléments d’actualités proposés. Chaque élément comporte la date, le type d’information et le titre muni du lien menant vers l’actualité.
