Carrousel

Les carrousels de page d’accueil offrent une façon visuelle d’afficher différents contenus sur la page d’accueil d’un site Web. La plupart du temps, le roulement se fait automatiquement.

Toutefois, à des fins d’accessibilité, les diapositives du carrousel d’iService ne changent pas automatiquement. Les utilisateurs doivent utiliser les flèches pour passer à la diapositive suivante ou revenir en arrière.

Approbateur de contenu

Avant de soumettre le contenu du carrousel :

Votre demande doit répondre à certaines exigences techniques en termes de format et de qualité.

  • L’image doit avoir 652 pixels de largeur sur 310 pixels de hauteur;
  • Doit respecter les principes et critères en matière de couleur. Consultez la section sur les contrastes de couleurs du Guide d’accessibilité;
  • Moins il y a de texte sur l’image, mieux c’est.

Votre demande doit comprendre :

  • La maquette finale et approuvée en format Microsoft Word (anglais et français);
  • Les Images en format .jpg ou .png (anglais et français);
  • Texte de légende (jusqu’à 80 caractères) à insérer sous l’image (français et anglais);
  • Texte alternatif (description textuelle) des images pour les personnes ayant une déficience visuelle (anglais et français);
  • Hyperliens vers la page Web iService souhaitée (français et anglais);
  • Date de publication.

Visitez notre page sur la préparation du contenu pour obtenir des instructions sur la façon de créer une maquette.

Remarque: la période maximale de publication est d’une semaine.

Seules la page d’accueil d’iService et la page d’accueil du Collège peuvent contenir un carrousel.

Éditeur de contenu

Bannières

  • Les bannières de la page d’accueil ont une largeur de 652 px et une hauteur de 310 px.
  • Un texte de légende se limitant à une ligne (80 caractères) doit être inclure pour chaque bannière.
  • La bannière et le texte de légende servent de liens vers des pages du site iService ou EDSC.prv et non vers d’autres applications comme Saba, PeopleSoft ou SAP.
  • Le code de carrousel dans la BOEW est le fondement du code de la bannière iService.
  • Le roulement automatique du carrousel fait en sorte qu’il peut être difficile de lire les bannières dans le délai imparti; le carrousel est donc mis sur pause par défaut afin de le rendre plus convivial et accessible.

Promotions iService

 
Combien de bannières peut il y avoir?

Le nombre maximal de bannières affichées sera maintenu à dix. Il ne s’agit pas d’une règle absolue et le nombre de bannières est laissé à la discrétion du coordonnateur des opérations d’iService.

Ventilation du code de bannière

Le code de bannière se trouve dans une colonne (grille) de largeur 7 et il y a un en tête invisible accessible aux logiciels de lecture à l’écran.

<div class="row"><!-- Start Carousel Column -->
<div class="col-md-7"><!-- Start Carousel -->
<h2 class="wb-inv mrgn-tp-md">Promotions iService</h2>

Une liste de panneaux doit correspondre au nombre d’éléments de la bannière.

<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel1">panel 1</a></li>
<li><a href="#panel2">panel 2</a></li>
</ul>

Un commentaire supplémentaire indique quand une bannière peut être retirée. L’image de la bannière comporte un lien et une description textuelle. Sous l’image se trouve une légende qui renvoie également à la même page que l’image. Si la description textuelle de l’image est trop longue (max. de 160 caractères), elle peut faire partie de la légende, mais elle sera invisible pour l’utilisateur voyant. La alt="" doit contenir une courte description ainsi que l’emplacement de la description longue. Voici un exemple de description textuelle qui renvoie à une description longue : alt="Semaine de sensibilisation à la sécurité. Description longue ci dessous". Le texte visible de la légende doit tenir sur une seule ligne, soit environ 80 caractères. La commande class "in" rend la bannière visible (class="in fade").

<div class="tabpanels"><!-- Start Carousel Tabs -->
<div id="panel1" role="tabpanel" class="in fade"><!--Remove Nov 21-->
<figure><a href="https://esdc.sabacloud.com/Saba/Web_spf/CA1PRD0006/app/shared;spf-url=common%2Fleclassview%2Fvirtc-00097052">
<img src="/eng/rotator/ask_me_live_benoitlong.jpg" alt="Demande-moi en direct : la transformation des services avec Benoît Long" /></a>
<figcaption><p><a href="https://esdc.sabacloud.com/Saba/Web_spf/CA1PRD0006/app/shared;spf-url=common%2Fleclassview%2Fvirtc-00097052">Demande-moi en direct : la transformation des services avec Benoît Long</a></p></figcaption></figure>
</div>
<div id="panel2" role="tabpanel" class="out fade"><!--Remove Nov 30-->
<figure><a href="/eng/is/security/topics/unauthorized_access.shtml">
<img src="/eng/rotator/rotator-unauthorized-access.png" alt="Réfléchissez avant de cliquer. Votre curiosité peut avoir des conséquences! " /></a>
<figcaption><p><a href="/eng/is/security/topics/unauthorized_access.shtml">Réfléchissez avant de cliquer. Votre curiosité peut avoir des conséquences! </a></p> </figcaption></figure>
</div>