Rédaction des textes

Images et vidéos accessibles

Pour les vidéos ou images porteuses de sens, il faut renseigner

• le titre du document
• le descriptif du document qui servira de transcription
• les crédits
• le texte alternatif.

Pour les images affichées dans les articles, il faut bien saisir la transcription dans la partie description du document. On a alors un bouton voir la transcription qui s’affiche à bas à droite de l’image.

Pour afficher le document en mode accessible, il faut ajouter l’attribut access à la balise.

<docXX|access>

La taille du document doit être placée à la fin.

<docXX|access|largeur>

Liens accessibles

[ Texte cliquable | Texte info bulle -> http://..... ]

Permet d’afficher une info bulle sur les liens

Lien en bouton

Pour transformer un lien en bouton, il faut ajouter la classe comme ceci

[ mon texte|texte info bulle-> url_page#+classe+#]

Vous pouvez utiliser les classes suivantes :

• fr-btn pour un bouton bleu
• fr-btn fr-btn–secondary pour un bouton blanc à bord bleu

Exemples :

[ac-lyon|Académie de Lyon->https://www.ac-lyon.fr#+fr-btn+#]

[ac-lyon|Académie de Lyon->https://www.ac-lyon.fr#+fr-btn fr-btn--secondary+#]

Les citations

<quote> ... </quote>

Les blocs de code

<code> ... </code>

Les blocs dépliables

  <accordion>
    <title>
      Le titre du premier bloc
    </title>
    <text>
      Le texte du premier bloc
    </text>
    <title>
      Le titre du second bloc
    </title>
    <text>
      Le texte du second bloc
    </text>
    ...
  </accordion>

Il peut y avoir plusieurs groupes de blocs dans une même page

Les onglets dans le texte

  <onglets>
    <title>
      Le titre du premier onglet
    </title>
    <text>
      Le texte du premier bloc
    </text>
    <title>
      Le titre du second onglet
    </title>
    <text>
      Le texte du second bloc
    </text>
    ...
  </onglets>

Il peut y avoir plusieurs groupes d’onglets dans une même page

Intégration des alert dans la zone de texte

<alert-error>
    {{{un titre}}}
    Le texte
</alert>

<alert-success>
    Le texte
</alert>

<alert-warning>
    Le texte
</alert>

<alert-info>
    Le texte
</alert>

Intégration de mises en exergue dans la zone de texte

Pour un Highlight classique (bordure bleue)

 <exergue>
    Le texte
 </exergue>

Pour personnaliser la couleur

<exergue fr-highlight--green-emeraude>
    Le teste
</exergue>