Le texte préformaté

La balise <pre>

Cette balise permet de représenter du texte préformaté, généralement écrit avec une police à chasse fixe. Le texte est affiché tel quel, les espaces utilisés dans le document HTML seront retranscrits.

<figure>
    <pre role="img" aria-label="Le logo du Jadins Numériques Club">
    :----------------::--------------------::-----------------:
    |}:     @@@@    :{}:   LE JARDINS     :{}:     @()@     :{|
    |}:    @@()@@   :{}:   NUMERIQUES     :{}:    @()@()    :{|
    |}:     @@@@    :{}:   CLUB           :{}:   ()@()@)    :{|
    |}:      /      :{}:                  :{}:    _\|/_     :{|
    |}:   \ |       :{}:   |\__/,|   (`\  :{}:   |-----|    :{|
    |}:   \\|//  jgs:{}: _.|o o  |_   ) ) :{}:    \___/  jgs:{|
    :----------------::-(((---(((----------::-----------------: 
    </pre>
    <figcaption id="jdn-caption">
        Le logo du Jadins Numériques Club représentant en ASCII Art
        deux plantes, et un petit chat faisant référence au mouvement de CHATONS.
    </figcaption>
</figure>

    :----------------::--------------------::-----------------:
    |}:     @@@@    :{}:   LE JARDINS     :{}:     @()@     :{|
    |}:    @@()@@   :{}:   NUMERIQUES     :{}:    @()@()    :{|
    |}:     @@@@    :{}:   CLUB           :{}:   ()@()@)    :{|
    |}:      /      :{}:                  :{}:    _\|/_     :{|
    |}:   \ |       :{}:   |\__/,|   (`\  :{}:   |-----|    :{|
    |}:   \\|//  jgs:{}: _.|o o  |_   ) ) :{}:    \___/  jgs:{|
    :----------------::-(((---(((----------::-----------------: 
    

Accessibilité

Cette balise n’a aucun rôle ARIA implicite mais les autorise tous.

Il est important de fournir une description alternative pour toute image ou diagramme créé avec du texte préformaté. Cette description alternative devrait décrire clairement, et de façon concise, le contenu du diagramme.

Les personnes souffrant de troubles de la vision et/ou navigant à l’aide d’outils d’assistance comme des lecteurs d’écran peuvent ne pas comprendre le diagramme si celui-ci est construit avec des lettres et symboles et lu dans le désordre.

Pour légender un tel diagramme, on pourra utiliser une combinaison d’éléments <figure> et <figcaption> complétée par les attributs ARIA role et aria-label sur l’élément <pre> afin que le dessin en ASCII préformaté puisse être énoncé comme une image avec un texte alternatif, <figcaption> servant alors de légende à l’image.