Journal du Net > Développeurs > Contributions > Soumettez votre meilleure astuce pour assurer l'accessibilité d'un site Web
Du contenu alternatif réfléchi,  des intitulés de qualité

 Du contenu alternatif réfléchi, des intitulés de qualité  

Jean-François Vial , Montpellier le 15 juin 2010

Sur quel type de site avez-vous travaillé ?

Tous types.

Décrivez votre astuce en détails. N'hésitez-pas à inclure des portions de codes.

Lorsqu'on utilise Flash (ou autre), il conviendra d'utiliser un système qui permet une dégradation correcte en proposant un contenu alternatif de qualité... En clair, Flash ne doit pas être obligatoire pour pouvoir faire fonctionner le site. On commencera donc à rédiger le contenu et créer les fonctionnalités comme si Flash n'existait pas : via du Javascript, Flash viendra se substituer à ce contenu s'il est disponible sur le poste client...

Ce contenu alternatif, remplacé par Flash le cas échéant, devra être équivalent en termes d'informations, mais aussi en termes de fonctionnalités...
Pour en savoir plus, recherchez "swfobject flash non intrusif" dans votre moteur de recherche préféré : vous tomberez sur un billet de mon blog pro qui traite précisément de ce sujet, mais aussi sur d'autres ressources intéressantes sur le sujet...

Même chose pour les images : on peut lire ça et là qu'il faut absolument placer un contenu textuel alternatif aux images via l'attribut "alt ". C'est vrai, mais il faut le faire intelligemment !
Lorsqu'une image est placée dans le "flow " du texte (en clair, cette image remplace du texte), il conviendra de faire en sorte que l'attribut "alt " soit constitué par le texte que cette image remplace (et rien d'autre ! ). De même, lorsqu'une illustration (une image qui ne remplace aucun texte dans le document) est placée dans le flow du texte, il conviendra de spécifier un attribut alt contenant un espace. Si l'attribut alt est vide (vraiment vide), le lecteur d'écran signalera la présence d'une image au beau milieu d'une phrase. De même, si le contenu alternatif n'est pas précisément spécifié, ces mots vont être placés eux aussi au beau milieu d'une phrase par les lecteurs d'écran, rendant le texte incompréhensible...

Reprenons:
- image qui remplace du texte => attribut alt correspondant exactement à ce texte...
- image d'illustration dans le texte => attribut alt contenant un simple espace...
- autre image hors texte => on décrit l'image et ce qu'elle est sensée apporter comme information (on décrira un graphique ou une photo d'art par exemple), sauf si cette image n'est qu'un ornement...

Enfin voyons le problème des liens hypertextes. Il est tentant, de placer des liens du type téléchargez "ici" ou, pour un même type d'action (télécharger un document, ou le modifier) de placer le même intitulé (groupe de mots constituant le lien) pour toutes ces actions ("Télécharger ce document", "Modifier ce document").

Beaucoup de personnes ayant besoin d'accessibilité (il n'y a pas que les malvoyants) utilisent une fonction qui liste les liens présents dans la page. Imaginez la liste qu'ils auront la plus part du temps : une liste de "ici" et de "télécharger "... Pas très attrayant. Utilisez donc, pour constituer vos liens, un texte intelligible, compréhensible, si possible renseignant sur ce qu'on va trouver au bout du lien (une page wikipedia ? Un fichier texte ? ). N'oubliez pas qu'un lien dispose aussi d'un attribut "title " qui permet, en outre, de spécifier d'autres informations (page liée dans une autre langue, ouverture dans une nouvelle fenêtre... ).

  • Jean-François Vial

    Bonjour,
    Justement, c'est le comportement inverse que j'avais observé: alt vide le lecteur signale l'image (ou pas, suivant le lecteur utilisé) et le alt avec un espace semblait régler le problème...
  • Aurélien Levy

    Bonne contribution à ceci près qu'il ne faut pas mettre un alt avec un espace à l'intérieur mais un alt= "" de manière à ce que l'image ne soit pas vu par le lecteur d'écran. Si il n'y a pas d'attribut alt du tout c'est l'url du fichier image est lu ce qui n'est pas très explicite. Enfin si on met un espace alt= " ", le lecteur d'écran dira "graphique" ce qui en fonction du contexte peut être perturbant car on peut avoir l'impression qu'il manque une information
 

Les dernières contributions

 

 

En ce moment sur Journal du Net Développeur

 
12 contributions : 1 2 3 4 5 6 7 8 9 10 11 12
 
Autour du même sujet

Soumettez votre meilleure astuce Oracle Database ? - appel à temoin

Soumettez votre meilleure astuce Ruby on Rails - appel à temoin

Soumettez votre meilleure astuce pour référencer des vidéos - appel à temoin

Soumettez votre meilleure astuce HTML - appel à temoin

Soumettez votre meilleure astuce C# - appel à temoin

Soumettez votre meilleure astuce DHTML - appel à temoin

Soumettez votre meilleure astuce SPIP - appel à temoin

Soumettez votre meilleure astuce Flex/MXML - appel à temoin

Soumettez votre meilleure astuce SQL - appel à temoin

Magazine Développeurs Envoyer Imprimer Haut de page




A VOIR EGALEMENT