Accessibilité pour les rédacteurs

SPIP est un CMS largement répandu dans la sphère publique. Tout les jours des centaines de webmestres gérant des services de communication publique en ligne utilisent SPIP pour mettre leur contenu en ligne que ce soit dans de petites communes ou de très grand Ministère.

Depuis le 29 octobre 2009, les services de communication publique en ligne doivent se mettre en conformité par rapport au Référentiel Général d’Accessibilité pour les Administrations (RGAA) qui demande à ce que les sites web publics soient accessibles au plus grand nombre, notamment les personnes en situations de handicaps.

L’objectif de cet article n’est pas de présenter le contenu du RGAA ou l’intérêt d’une démarche d’accessibilité mais de voir thématique par thématique en quoi SPIP permet, nativement ou avec quelques ajouts, de produire du contenu accessible pour un rédacteur.

Images

Les règles :

Lors de l’inclusion d’image dans un article le rédacteur doit pouvoir :

  • spécifier l’alternative courte des images
  • spécifier une description dite longue reprenant l’ensemble des informations apportés par l’image (par exemple : toutes les informations récupérables sur un graphique statistiques).
  • spécifier la langue de l’alternative si elle est différente de la langue de la page

Ces alternatives doivent être adaptées au contexte d’utilisation de l’image en fonction de la façon dont elle est utilisée (alt=’’ si décorative, alt=’fonction du lien’ si image lien, alt=’information apportée par l’image’ si l’image est porteuse d’information).

Les images dans SPIP :

Pour l’heure, il est possible d’insérer une image dans un article à l’aide des modèles <imgXX>, <imageXX>, <docXX> ou <embXX>. Le fonctionnement par défaut des modèles prévoit :

  • un attribut alt=’’ si l’utilisateur ne spécifie rien
  • un alt=’titre’ si le rédacteur spécifie un titre à l’image.
  • un alt=’format de l’image ou du document – poids de l’image ou du document’ si c’est un lien vers un document avec icône du format (raccourci doc).

Ces comportements sont bons mais ils présentent néanmoins quelques problèmes.

Les problèmes :

  • Aucune gestion des descriptions longues
  • Un titre = Une alternative, il est donc impossible d’avoir des alternatives adaptés aux différents contextes d’utilisation d’une même image.
  • Aucune gestion des changements de langue

Les solutions :

Utiliser le plugin accessibilité qui modifie les modèles <imgXX>, <imageXX>, <docXX> et <embXX> afin de pouvoir par défaut :

  • spécifier une description longue. Pour cela il suffit de renseigner une description dans la base de données. Si vous souhaitez avoir une description et un titre visible différent de ceux enregistrés dans la base de donnée (raccourci <docXX>) il est possible d’utiliser des paramètres supplémentaires sur les modèles sous la forme : <docXX|titre=titre de votre document/image|legende=legende de votre document/image>
  • spécifier une alternative différente du titre de l’image lorsqu’il y en a un enregistré dans la base de donnée en utilisant un paramètre supplémentaire sur les modèles sous la forme : <imgXX|alt=votre alternative>
  • spécifier une langue pour votre alternative en utilisant un paramètre supplémentaire sur les modèles sous la forme : <imgXX|lang=le code de la langue utilisé>

Ce qui donnerait pour une image avec une alternative en anglais

<imgXX|alt=your text alternative even if there is already a title to the image defined in the database|lang=en>

Multimédia

Les règles :

Le rédacteur insérant un contenu multimédia dans son contenu devra porter attention à :

  • fournir une alternative/un transcript aux éléments multimédia (exemple si l’utilisateur n’a pas le plugin flash il aura l’alternative) ;
  • proposer des sous-titres et une piste d’audio description si nécessaire ;
  • laisser le contrôle à l’utilisateur de la lecture, du son, des éléments clignotants, flashant et mouvant ;
  • produire du code HTML valide dans la méthode d’insertion de l’élément multimédia.

Le multimédia dans SPIP :

Il est possible d’insérer une vidéo, un son ou une animation Flash dans un article Spip à l’aide des raccourci <embXX>,<audioXX>,<videoXX>,<audioXX>. Par défaut ce raccourci essai d’afficher l’élément multimédia avec le lecteur adapté et affiche si ils sont défini dans la base de donnée le titre et le descriptif en dessous.

Les problèmes :

  • Il est impossible de définir un contenu qui s’insérera dans la balise object et servira d’alternative.
  • Le code html produit n’est pas toujours conforme aux spécifications HTML à cause de l’utilisation de la balise <embed>

Les solutions :

  • Mettre un lien juste après l’élément multimédia pointant vers un autre article SPIP ou vers un fichier en téléchargement (dans un format accessible) contenant l’alternative.
  • Utiliser les modèles de documents accessible du plugin accessibilité pour éviter l’utilisation de balise <embed> et pouvoir également spécifier une alternative en utilisant un paramètre supplémentaire sur les modèles sous la forme : <embXX|alternative=votre texte alternatif pour votre élément multimédia>

Pour ce qui concerne le sous-titrage et l’audio-description : soit ces éléments sont incrustés nativement dans la vidéo, soit ils doivent être mis en pièce jointe à l’article et synchroniser au travers de l’utilisation d’un modèle spécifique de player vidéo supportant le sous-titrage et l’audio description (par exemple le Jwplayer ; à noter que portage du jwplayer plus complet dans le plugin accessibilité est également prévu)

Pour ce qui concerne le contrôle des animations / vidéos les éléments doivent eux-mêmes être contrôlable par l’utilisateur, SPIP ne pourra rien pour vous.

Mais le plugin Vidéo Accessible a été créé pour répondre explicitement aux problématiques d’accessibilité des vidéo !

Texte

Les règles :

Un texte peut parfois être difficile à comprendre pour un lecteur notamment à cause de passage dans une langue différente, de l’utilisation d’acronymes ou d’abréviation, ou de mot complexe. Il est alors nécessaire de :

  • signaler les changements de langue à l’aide de l’attribut lang=’code de langue’ pour les passages de textes, les mots et les attributs dans une langue différente de celle du contenu principale de la page. L’indication du changement de langue permet notamment aux utilisateurs de lecteur d’écrans qui restitue vocalement les textes de parler dans la bonne langue.
  • signaler les abréviations et les acronymes à l’aide de la balise <abbr> et <acronym>
  • mettre des liens vers un lexique/glossaire/dictionnaire/encyclopédie pour les mots complexes.

Le texte dans SPIP :

SPIP est nativement multilingue, il permet de déclarer la langue d’un article et de son site. Il est particulier de préciser qu’un contenu est en langue parlée complétée, langue des signes française ou français simplifié (à activer dans la page de gestion des langues). Néanmoins il n’est pas aussi performant quand il s’agit des changements de langue dans un texte. Il permet également d’insérer des liens vers Wikipédia à l’aide du raccourci [?xxx].

Les problèmes :

Il n’existe aucun raccourci pour déclarer les changements de langue au sein d’un article, pour déclarer les acronymes et les abréviations et pour faire facilement un glossaire interne.

Les solutions :

  • Pour les images utiliser les modèles de document accessible de plugin accessibilité permettant de définir la langue sur les balises images
  • Utiliser la lame décoration du plugin couteau suisse pour créer des raccourcis typographiques supplémentaires permettant de signaler les changements de langue dont vous avez besoin. Une configuration possible de cette lame est la suivante :
    span.en.lang = en
    span.de.lang = de
    span.it.lang = it
    span.es.lang = es
    div.bloc-en.lang = en
    div.bloc-de.lang = de
    div.bloc-it.lang = it
    div.bloc-es.lang = es

    Vous disposerez alors des raccourcis suivant <en></en>,<de></de>,<es></es>,<it></it>,<bloc-en></bloc-en>,<bloc-de></bloc-de>,<bloc-es></bloc-es>,<bloc-it></bloc-it> à utiliser sur les mots ou bloc de texte en anglais, allemand, espagnol ou italien. Exemple :
    Phrase en français avec <en>some words in english</en>.

<bloc-en>Block of text in english.

With some paragraphs inside</bloc-en>

Autre solution pour indiquer le changement de langue

Cette solution est meilleure que celle du Couteau Suisse.

Structuration

Les règles :

Le contenu textuel doit être correctement structuré afin de faciliter sa lectuer et sa restitution au sein des aides techniques. Cela passe notamment par :

  • l’utilisation d’intertitre dans vos textes
  • l’utilisation de liste ordonnées et non ordonnées
  • l’utilisation de citation

La structuration des textes dans SPIP :

SPIP permet nativement de créer des intertitres qui seront transformé en <h3> par l’intermédiaire du raccourci {{{votre intertitre}}}.

Il permet la création de liste ordonnée et non ordonnée par l’intermédiaire des raccourcis -# et -* (<ol> et <ul>).

Enfin, il permet de définir des passages de texte comme étant des citations courtes ou longues grâce au raccourci <quote>citation</quote>.

Les problèmes :

  • SPIP ne gère qu’un seul niveau d’intertitre et il peut parfois être nécessaire de structurer son texte de façon plus complète (comme dans cet article où j’ai dût artificiellement utiliser le gras pour matérialiser un 2e niveau d’intertitre)
  • l’utilisateur peut commencer une suite de paragraphes par un – ce qui aura pour effet de simuler visuellement une liste non ordonnées mais ne la balisera pas comme tel
  • On peut avoir besoin de faire une citation à l’intérieur d’un paragraphe.
  • Il faudrait pouvoir indiquer la langue, et la source de la citation

Les solutions :

  • Utiliser le plugin « Enluminures Typographiques V3 pour Porte Plume » afin de disposer de raccourcis typographiques permettant de gérer des niveaux d’intertitres supplémentaires à l’aide de {{{** intertitre de niveau deux }}} et {{{*** intertitre de niveau trois }}}
  • Activer dans la configuration du plugin l’option permettant de transformer les paragraphes commençant par ’-’ par de vraies listes à puces. Cela se fait grâce à la globale $GLOBALS['barre_typo_pas_de_fausses_puces'] = true; ou est réglable dans la page de configuration du plugin.
  • il peut également être utile d’ajouter dans votre fichier config/mes_options.php la configuration suivante :
    <?php
    $GLOBALS['barre_typo_pas_de_fork_typo'] = false; // Pour tenir compte de https://zone.spip.org/trac/spip-zone/changeset/22723 et disposer des raccourcis typo supplémentaires !
    $GLOBALS['debut_italique'] = "<em$class_spip>";
    $GLOBALS['fin_italique'] = '</em>';?>

Pour les citations, le plugin Accessibilité rajoute un modèle pour gérer finement les citations.

Exemple :

Ceci est une citation : <citation|type=courte|texte=SPIP, la création du plaisir|langue=fr|cite=https://www.spip.net/>

<citation|cite=https://www.spip.net/|langue=fr|texte=100 fois sur le métier 
_ tu boucleras ton ouvrage.|auteur=RealET|titre=Bouclage>

-  citation courte

  • |type=courte
  • texte=Texte de la citation
  • langue=code de la langue (fr, de, en, ...)
  • cite=URL de la source de la citation

-  citation sous forme de bloc

  • texte=Texte de la citation
  • langue=code de la langue (fr, de, en, ...)
  • cite=URL de la source de la citation
  • titre=Titre du lien affiché sous la citation
  • auteur=Nom de l’auteur affiché sous la citation

Tableau

Les règles :

  • donner un titre à vos tableaux de données pour décrire brièvement son contenu,
  • donner un résumé précisant l’organisation du contenu dans le tableau
  • Utiliser des entêtes dans vos tableaux afin de pouvoir y rattacher le contenu des cellules et faciliter la compréhension de son contenu.

Les tableaux dans SPIP :

SPIP gère nativement les tableaux de données simples organisés verticalement et permet de préciser un titre, un résumé et des entêtes au tableau. Cela ce fait à l’aide de la syntaxe suivante :

||Légende|Résumé||
| {{Nom}} | {{Date de naissance}} | {{Ville}} |
| Jacques | 5/10/1970 | Paris |
| Claire | 12/2/1975 | Belfort |
| Martin | 1/31/1957 | Nice |
| Marie | 23/12/1948 | Perpignan |

Les problèmes :

SPIP ne permet pas de gérer les tableaux de données complexe organisés horizontalement ou verticalement et horizontalement.

Les solutions :

Il n’existe malheureusement pas à l’heure actuelle de solution à ce problème. La solution la plus simple consiste à faire son tableau au sein d’un éditeur HTML permettant de structurer un tableau de donnée de façon accessible et de coller le code au sein du champ texte de SPIP.

Les règles :

  • avoir des intitulés de liens explicites
  • indiquer les ouvertures dans une nouvelle fenêtre, les formats/poids de fichier en téléchargement
  • avoir une table de matière quand l’article est long

La navigation dans SPIP :

SPIP permet dans un article de placer de liens par l’utilisation du raccourci [texte->url]. Il est également possible de définir des ancres [<-monancre] et des infos bulles sur les liens [texte| info bulle->url]. Spip ne permet pas par défaut d’ouvrir des liens dans une nouvelle fenêtre. Enfin Spip ajoute automatiquement le format et le poids dans l’alternative de l’icone des documents insérés dans un article à l’aide <docXX>

Les problèmes :

Pas de problème en particulier mais il existe néanmoins des solutions facilitant la tache du rédacteur.

Les solutions :

  • Utiliser la lame sommaire automatique du couteau suisse pour créer automatiquement des sommaires à vos articles
  • Utiliser le plugin accessibilité pour ajouter automatiquement les formats et les poids quand un lien vers un document est inséré (attention cela ne traite que les liens vers des fichiers docXX [xxx->docXX] et non les liens vers des urls directes [xxx->http://www.xxx.com/xxx.pdf]

Conclusion

Vous voilà désormais bien armé pour permettre à vos rédacteurs de produire du contenu accessible ou les aider à le faire.

Un article complémentaire vous listant les éléments nécessaire coté squelette devrait suivre dès que goetsu aura un moment. D’ici là bonne production de contenu accessible.

Discussion

14 discussions

  • 1

    Pour info, le plugin est incompatible avec la protection de documents avec le plugin accès restreint.

    • En fait, le bug a été testé avec SPIP 4.1.

      Mais il n’est plus présent en SPIP 4.2

    Répondre à ce message

  • Il faudrait mettre à jour le lien dans le paragraphes « Les solutions :».
    Merci

    Répondre à ce message

  • 1

    Bonjour,
    (je ne vois pas mon message écrit hier, alors je le reposte)
    Mon site est sous SPIP 3.2.9
    J’ai installé la version 3.0.1 et cela ne fonctionne pas. La version 2.0.3 fonctionne mais enlève le crédit de ma photo.
    Le crédit est indiqué avec un développement fait par un ami (je ne suis assez doué pour ma part...) placé dans « squelettes/modeles/doc.html » :

    [] [(#ENV{mode_force,#MODE}|=={image}|oui) #SET{fichier,#URL_DOCUMENT} #SET{width,#LARGEUR} #SET{height,#HAUTEUR} #SET{url,#ENV{lien}} ] [(#ENV{mode_force,#MODE}|=={image}|non) [(#SET{fichier,[(#LOGO_DOCUMENT|extraire_attribut{src})]})] [(#SET{width,[(#LOGO_DOCUMENT|extraire_attribut{width})]})] [(#SET{height,[(#LOGO_DOCUMENT|extraire_attribut{height})]})] #SET{url,#ENV{lien,#URL_DOCUMENT}} ][][ (#ENV{largeur,0}|ou{#ENV{hauteur,0}}) #SET{fichier,#GET{fichier}|image_reduire{#ENV{largeur,0},#ENV{hauteur,0}}} #SET{width,#GET{fichier}|largeur} #SET{height,#GET{fichier}|hauteur} #SET{fichier,#GET{fichier}|extraire_attribut{src}} ]
    
    []#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)][(#GET{url}|?{})]
    [
    (#TITRE)
    ]
        [(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]][ (Crédit © (#CREDITS|PtoBR))]
    
    #FILTRE{trim} 

    Pour mon exemple, j’ai balisé <doc2719|alt=c'est le plus beau de tous les enfants du monde> dans mon article d’essais divers http://www.patcatnats.fr/spip.php?article867.
    Merci pour votre attention à mon message et éventuelle correction et surtout merci pour votre travail.
    Patrice

    • effectivement ce n’est pas prévu pour lé’instant. La version 3.3 de spip devrait le proposer, normalement.

    Répondre à ce message

  • 2

    Bonjour,

    Je viens d’intégrer le plugin « Accessibilité » et je constate que mon image sur la page d’accueil ne tient plus compte des paramètres <doc255|center|largeur=480>
    Cette image apparaît maintenant hors format ! Bizarre…

    • Effectivement, largeur n’est pas pris en compte par ces modèles accessibles.

      Il faudrait le rajouter au plugin.

      Qui s’y colle ?

    • est intégré ou pas ?

      sur notre mutu beaucoup utilise la largeur pour dimensionner leurs images en fonction de leurs articles

    Répondre à ce message

  • 2

    Avec le RWD, ce plugin reste-il toujours utile ?

    • Évidement !

      Le RWD n’est qu’un complément d’accessibilité pour ceux qui sont sur mobile.

    • Merci pour cette précision.

      Je complète <imgXX> par <imgXX|alt=mon texte alternatif> c’est-à-dire la légende de la photo mais aucune infobulle n’apparaît…

      Je mets cette légende dans « Titre de l’image » et elle apparaît dans la page (sous l’image).

      Où et comment voir l’effet de ce plugin ? Merci d’avance.

    Répondre à ce message

  • Répondre à ce message

  • bonjour,
    concernant les sommaires automatiques le plug-in table des matières ne fait-il pas aussi l’affaire ?

    Répondre à ce message

  • 1

    Bonjour,

    Merci pour ce plugin ! (qui je pense devrait être de base dans Spip...)

    Bref, petite remarque.
    Quand on va vers « recherche » le plugin fait son boulot. Cependant, il n’est pas possible de taper quelque chose directement. N’est ce pas là un problème d’accessibilité ?

    Est ce possible à intégrer ?

    Merci à tous les contributeurs et contributrices !

    • Argh, autant pour moi, je voulais envoyer ce message à Skiplink ;)

      ENtre les différent plugin utilisé, je m’étais emmêlé les pinceaux !

    Répondre à ce message

  • Merci beaucoup pour tout ce travail,
    je m’interroge tout de même sur plusieurs choix fait dans les modèles,
    Pour le modèle citation c’est les paramètres titre et langue qui sont utilisés

    <citation|cite|langue|texte|auteur|titre>

    alors que dans les modèles abréviations et acronymes c’est title et lang qui sont utilisés

    <abbr|title|lang|texte>
    <acronym|title|lang|texte>

    est ce volontaire ?
    1) ça va être dur de mémoriser title pour mes rédacteur(trice)s qui n’ont jamais pratiqué l’anglais, :’(
    2) une fois faut mettre title et lang et une autre titre et langue ça va pas être simple à retenir :’(
    3) un paramètre cite qui à comme valeur l’url d’un Site :-\
    3) je pourrai corriger mais à la prochaine mise à jour va falloir que j’y pense :-(
    Bref y a peu être une explication mais ça m’échappe.

    Répondre à ce message

  • Bravo pour cet article très détaillé.

    A propos des balises du Couteau Suisse et de ses lames « Décorer ou colorer vos textes », il existe aussi les balises automatiques qui adaptent un <div/> ou un <span/> en fonction du contexte :

    auto.en.lang = en
    auto.de.lang = de
    auto.it.lang = it
    auto.es.lang = es

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom