Un plugin pour rendre ses articles plus interactifs

Utilisation de H5P dans WordPress : #1 présentation générale

Utilisation de H5P dans WordPress : #2 Créer son premier diaporama

Utilisation de H5P dans WordPress : #3 Ajouter des activités

Utilisation de H5P dans WordPress : #4 Publier le diaporama dans un article

N’hésitez pas à signaler dans les commentaires vos chefs d’œuvre !

Merci de faire la demande par mail à Clairelle Lestage pour que l‘on vous installe ce qu’il faut dans votre blog pour pouvoir utiliser H5P ! Il faut 2 minutes pour le faire.

Texte de substitution et légendes pour améliorer l’accès à tous

Les trois singes sageshttp://fr.freepik.com/photos-libre/trois-singes_571826.htm

Saviez-vous que plus que 40% de la population est affecté par une déficience?
Saviez-vous que les personnes plus de 50 ans représentent 30% des internautes et les plus de 74 ans 16%?
Et savez-vous qu’est-ce que l’accessibilité web?

Sur Wikipédia, l’accessibilité de tous à un site web est définie comme l’accès au contenu de ce site quelques soient les handicaps :  visuels (cécité, trouble de la vision, daltonisme, achromatopsie), auditifs (surdité totale ou partielle), moteurs, cognitifs ou neurologiques, ou encore liés au vieillissement.

Des normes et recommandations

World Wide Web consortiumLes personnes ayant une déficience visuelle utilisent des « Lecteurs d’écran » pour prendre connaissance du contenu d’une page web ( exemple: http://www.nvda-fr.org/).

Afin que ces lecteurs d’écran fonctionnent bien et puissent décrire l’intégralité du contenu d’une page, il est indispensable de suivre les normes données par le W3C au travers du WCAG (Web Content Accessibility Guidelines). Pour plus d’information : https://www.w3.org/TR/WCAG20/. Ainsi, comment le contenu de l’image en haut de cet article pourrait être comprise d’une personne ayant des troubles visuels ?

La première recommandation du WCAG est de « fournir des alternatives équivalentes aux contenus visuels et auditifs (images statiques ou animées, contenus audio et vidéo) ; »

Ajouter des textes de substitution ou légendes dans ma page web

Les images constituent le premier obstacle majeur à l’accessibilité des pages Web. En y associant une description, les lecteurs d’écran pourront lire celle-ci en remplacement de l’image.

L’attribut alt

L’attribut alt est le principal vecteur des textes alternatifs pour :

  • les images img ;
  • les zones réactives des images cliquables area ;
  • les boutons de formulaire input type="image".

Ces descriptions doivent être concises et complètes. Les termes les plus importants doivent être placés au début du texte.

L’attribut longdesc et le lien D

Si la description excède 10 mots, il faut en effet envisager le recours à l’attribut longdesc des éléments img, qui crée un lien vers cette description détaillée placée dans un document annexe. Cependant, le support de cet attribut est encore très partiel. On le remplace donc fréquemment par un lien « D » (pour Description) : placé après la balise image, ce lien, avec la lettre « D » en guise de texte, mène à la page de description de l’image. C’est particulièrement utile dans le cas des images contenant des informations complexes, telles les graphiques.

Attention toutes les images ne sont pas concernées

Seules les images dites « significatives » doivent-être substituées. Il s’agit:

  • d’images ayant un sens,
  • des images porteuses d’un lien
  • ou du texte en image.

Les images transparentes ou à titre décoratif ne nécessiteront pas de légende.

Pour illustrer cet article voici une vidéo issue du site www.access-key.org réalisée par l’université de Nice Sophia Antipolis.

 

Alors, quels texte alternatif et légende pourrions-nous proposer à l’image en tête de cet article?

En cliquant sur une image insérée dans un article du blog, il est possible d’insérer ces informations et donc d’être plus accessible.

Structurer son texte : tout un programme !

Produire un billet de blog demande du travail. Il ne suffit pas d’écrire un texte, encore faut-il le mettre en forme ! Pour ce faire, il est conseillé d’utiliser toutes les opportunités offertes par le HTML (HyperText Markup Language), langage descriptif utilisé pour les pages internet. Heureusement, vous n’êtes pas obligé d’être expert en HTML, en effet, l’éditeur qui vous est proposé va vous aider !

Mais pourquoi mettre en forme ?

Cette mise en forme inclut bien sûr le choix et le positionnement des illustrations, mais aussi – et surtout – la structuration du texte, qui est essentielle à trois titre :

  1. Un texte bien structuré est plus facile à lire pour le lecteur : on comprend mieux la logique de l’auteur, on suit mieux sa démarche intellectuelle.
  2. Un texte bien structuré est plus facile à lire par un robot : ces machines qui parcourent le web à longueur de journées, indexent les pages pour vous les resservir lorsque vous posez une question à votre moteur de recherche préféré, s’appuient sur la structuration HTML du texte pour repérer les mots clés et catégoriser votre article.
  3. Il est beaucoup plus facile de configurer l’esthétique d’un texte bien structuré. Le langage CSS (Cascading Style Sheet) permet de définir tous les paramètres de votre page (police, couleurs, taille de texte, alignement, …) en s’appuyant sur la structure HTML de vos documents. C’est en s’appuyant sur ces possibilités que les couleurs des titres  des articles de ce blog s’adaptent à la catégorie dans laquelle chaque billet est référencé.

On peut donc analyser une page web selon trois niveaux :

  • le contenu, qui correspond au texte brut,
  • la structure, apportée par le langage HTML qui permet de présenter l’organisation logique et l’articulation des différents éléments présentés ( = la logique de votre pensée),
  • la présentation, gérée par le langage CSS, qui apporte l’aspect esthétique de votre production.

Cette idée de mettre en forme n’est elle utile que sur Internet ?

Non, bien sûr, et voici deux exemples.

1 – Avec un traitement de texte

Si vous avez un document long à réaliser (un rapport de stage, un mémoire, une dissertation, …) vous trouverez pratique d’utiliser les styles proposés par votre traitement de texte. Cela vous permettra :

  • de structurer votre document,
  • de vérifier que la structure est cohérente : les chapitres s’enchainent bien, les niveaux de paragraphes et sous-paragraphes sont cohérents, …
  • d’avoir une mise en page cohérente tout au long de votre document,
  • de générer automatiquement une table des matières.

2 – Avec un papier et un crayon

Guillaume Apollinaire est un grand auteur français, célèbre pour ses calligrammes. Voici ci-dessous trois versions du même poème. Même si c’est un exemple manuscrit, il permet de bien comprendre la différence entre le texte, sa structuration et sa présentation.

a) le texte brut

Reconnais-toi
Cette adorable personne c’est toi sous le grand chapeau canotier Œil  Nez La bouche Voici l’ovale de ta figure Ton cou exquis Voici enfin l’imparfaite image de ton buste adoré  vu comme à travers un nuage Un peu plus bas c’est ton cœur qui bat.

b) le texte structuré

Reconnais-toi
Cette adorable personne c’est toi
Sous le grand chapeau canotier
Œil
Nez
La bouche
Voici l’ovale de ta figure
Ton cou exquis
Voici enfin l’imparfaite image de ton buste adoré  vu comme à travers un nuage
Un peu plus bas c’est ton cœur qui bat

c) le calligramme

calligramme de Guillaume Apollinaire

Alors, quelle version vous semble la plus poétique ?