Après plus de trois ans de bons et loyaux services, nous avons décidé de migrer notre veille quotidienne autour de l’accessibilité numérique de Delicious vers GitHub.

Vous pourrez donc désormais retrouver les ressources francophones et anglophones nous paraissant les plus intéressantes en la matière (bonnes pratiques, articles, outils, etc.) sur cette page : Digital accessibility resources / Ressources au sujet de l’accessibilité numérique.

Lire la suite : "Veille autour de l’accessibilité numérique, de Delicious vers Github"

La journée mondiale de sensibilisation à l’accessibilité numérique (GAAD) approche à grands pas.

L’année passée, pour contribuer à cet événement, nous avions animé un retour d’expérience autour de la mise en ligne du site « Dialogue et Solidarité ».

Lire la suite : "Portes ouvertes chez Atalan le jeudi 19 mai pour la GAAD 2016 !"

J’ai récemment eu le plaisir d’intervenir aux 4^es rencontres professionnelles de l’orientation des jeunes handicapées organisées par le CIDJ et l’ONISEP en collaboration avec l’association Arpejeh. J’en profite pour les remercier chaleureusement pour leur accueil.

La dernière table-ronde de la journée était consacrée au thème de l’innovation au service de l’adaptation. En attendant la publication du compte-rendu de l’événement par les organisateurs, voici un résumé de mon intervention.

Lire la suite : "Les innovations au service de l’adaptation (table-ronde)"

Mis à jour le 13 septembre 2024

L’objectif de cet article est de vous présenter les différents paramétrages qu’il est possible d’effectuer dans l’éditeur de texte riche « CKEditor » pour favoriser une publication accessible des contenus.

Pour ce faire, nous avons analysé les différentes fonctionnalités d’édition disponibles dans sa version complète visible sur cette page : « Feature-rich editor ».

À noter que seules les fonctionnalités pouvant avoir un impact sur l’accessibilité des contenus sont présentées dans ce billet. Autrement dit, si une fonctionnalité n’est pas évoquée, c’est que rien n’est à prévoir à son sujet. Comme la fonctionnalité « Modifier l’indentation », par exemple.

Sommaire

• Fonctionnalités à retirer
  • Souligner
  • Justifier
  • Couleurs de texte et d’arrière-plan
• Fonctionnalités à optimiser
  • Format de titre
  • Définir la langue
  • Insérer un modèle
  • Appliquer un style
  • Insérer une image décorative
  • Insérer une image légendée

Fonctionnalités à retirer

Plusieurs fonctionnalités disponibles dans CKEditor peuvent avoir un effet quelque peu néfaste sur l’accessibilité. Idéalement, nous recommandons de les retirer de la barre d’édition. Les voici détaillées ci-après.

Souligner

Une recommandation d’accessibilité consiste à différencier visuellement les liens présents dans du texte, dans laquelle on peut lire :

Il est fortement déconseillé d’appliquer un effet de soulignement à d’autres éléments que les liens.

C’est pour cette raison que nous recommandons de supprimer la possibilité de souligner des textes.

Justifier

La justification des textes peut entraîner des difficultés de lecture, en particulier pour les personnes dyslexiques.

C’est pourquoi une recommandation d’accessibilité consiste à ne pas justifier les textes.

Bien que ce soit une recommandation d’un haut niveau d’accessibilité (critère de niveau AAA selon les WCAG et le RGAA), nous recommandons de supprimer la possibilité de justifier les textes.

Couleurs de texte et d’arrière-plan

Une recommandation d’accessibilité consiste à assurer un contraste suffisant entre les textes et l’arrière-plan.

Par conséquent, pour éviter que les contributeurs publient des contenus dont les textes ne sont pas suffisamment lisibles, nous recommandons de supprimer la possibilité de modifier les couleurs des textes et des arrière-plans.

Si la suppression « pure et simple » de ces fonctionnalités n’est pas souhaitée, une autre solution peut consister à ne proposer que les couleurs permettant d’assurer des contrastes suffisants.

Fonctionnalités à optimiser

Format de titre

La liste déroulante « Format de titre » permet de contribuer des titres de section.

Lorsqu’on utilise le format « Titre 1 », c’est une balise <h1> qui est générée, le format « Titre 2 » une balise <h2>. Et ainsi de suite.

Mais la plupart du temps, étant donné que les contenus saisis dans l’éditeur de texte riche sont déjà introduis par une balise <h1> (le titre de l’article), nous recommandons de supprimer le format de titre « Titre 1 » de la liste de choix, pour ne pas l’utiliser malencontreusement.

Définir la langue

CKEditor permet de déclarer les changements de langue.
Ce qui est un très bon point pour l’accessibilité !

Toutefois, par défaut, seules quelques langues sont disponibles dans la liste déroulante (dans la démonstration anglaise : l’arabe, le français et l’espagnol).

Nous recommandons donc de l’enrichir des langues les plus couramment utilisées par vos contributeurs.

Insérer un modèle

CKEditor permet d’insérer des modèles de mise en page prédéfinis.

Ces modèles sont à implémenter dans la configuration de CKEditor. Nous recommandons d’enrichir cette fonctionnalité uniquement de mises en page accessibles. Attention à l’utilisation de tableaux de mise en forme.

Appliquer un style

CKEditor permet d’appliquer des styles prédéfinis sur les textes.

Tout comme les modèles, ces styles sont à implémenter dans la configuration de CKEditor. Nous recommandons d’enrichir cette fonctionnalité uniquement de styles accessibles.

Insérer une image décorative

CKEditor permet d’insérer des images décoratives.

Cependant, le code généré par cette fonctionnalité n’est pas conforme au RGAA. Pour corriger ce point, lors de l’ajout d’une image décorative en laissant le champ « Texte alternative » vide, il est nécessaire de garder la balise alt="" vide sur l’élément <img>.

Insérer une image légendée

CKEditor permet d’insérer des images légendées.

Cependant, il manque certains attributs dans le code afin de rendre ce composant conforme au RGAA. Il est nécessaire de modifier le code généré par ces images légendées afin d’ajouter les attributs suivants :

• role="figure" sur l’élément <figure>
• aria-label="" sur l’élément <figure> reprenant le contenu de la légende

Lire la suite : "Paramétrer CKEditor pour l’accessibilité"

Nous sommes récemment tombés sur cette simple mais parlante démonstration simulant les lettres qui se mettent à danser lors de la lecture par certaines personnes dyslexiques : Dyslexia (en anglais).

Nous avons donc très rapidement eu l’idée de le reproduire en français, ici sur une page entière de ce blog. Encore merci à Victor Widell pour cette belle idée et pour permettre la réutilisation de son script.

Lire la suite : "Dyslexie et lettres dansantes"