Choix de la langue :

• 
• 
• 

Menu Principal

• 
• 
• 
• 
• 

Ligams » Publications » Accessibilité » Flash accessibilité

Flash et accessibilité (Partie 2)

Cet article fait suite à "Flash et l'accessibilité Partie 1" et propose d'analyser de plus près les méthodes d'intégration des animations Flash, sujet évoqué dans un précédent article. Il a pour but de permettre un meilleur accès à l'information de ces animations.

Flash peut se révéler très pratique pour afficher des titres dynamiquement, lorsque l'on souhaite utiliser une police spéciale, qui est pas une police web, voire une présentation dynamique. Il existe un script très connu et gratuit permettant d'arriver à cette fin : sIFR (Scalable Inman Flash Replacement ). Je n'en ferai pas l'éloge, car il existe surement de bien meilleurs moyens pour faire ce genre de chose, c'était juste pour matérialiser l'idée.

Pour une meilleure compréhension de l'article le titre que nous souhaitons afficher s'intitulera Mon titre.

Couples d'utilisation : lecteurs d'écran/navigateurs

Nous parlerons dans cet article exclusivement de JAWS , car il s'agit certainement du lecteur d'écran le plus utilisé.

Il est en général couplé avec Internet Explorer, le navigateur de Microsoft, car c'est avec ce dernier qu'il semble le mieux s'accorder. Il peut néanmoins être utilisé avec n'importe quel autre navigateur, et c'est souvent ces derniers cas qui posent problème.

Nous avons constaté que lorsque l'on couple Firefox avec JAWS, le focus sur les objets multimédia d'une page ne sont pas réalisés par défaut; aussi, on passe purement et simplement à coté de l'information lorsque l'on utilise un lecteur d'écran.

Intégration classique avec la balise Object

Comme vu dans l'article relatif à l'intégration d'animation Flash, la méthode suivante est préconisée :

<!--début de l'animation Flash-->
<object type="application/x-shockwave-flash" data="animation.swf" width="200" height="200">
        <param name="movie" value="animation.swf" />
        <param name="flashvars" value="texte=Mon titre" />
        <!--début de l'alternative-->
        <h1>Mon titre</h1>
        <!-- fin de l'alternative-->
</object>
<!--fin de l'animation Flash-->

On se donne bonne conscience en se disant que l'on a effectivement mis une alternative textuelle, mais dans les faits, cette aternative ne sera disponible que pour les personnes ne disposant pas du lecteur Flash.

Or, on peut très bien être aveugle, utiliser un lecteur d'écran, et disposer du lecteur Flash, ce qui est d'ailleurs le cas pour une grande majorité (voici pourquoi il est important d'utiliser les propriétés d'accessibilité de Flash).

Accessibilité de cette méthode

Concernant les personnes disposant du lecteur Flash, cette méthode est parfaitement accessible pour une personne couplant Jaws avec Internet Explorer, ce navigateur gérant très bien le focus des contenus.

L'animation sera en revanche purement et simplement invisible au couple Jaws/Firefox tant que l'utilisateur ne fera pas un focus explicite sur l'animation; faut de quoi, ni l'animation, ni son alternative ne peuvent être lues.

Je ne sais pas si les utilisateurs de JAWS passent de temps en temps sous Firefox, les personnes que je connais sont toujours avec Explorer (ce qui est à mon avis le meilleur choix pour les utilisateurs de lecteurs d'écran).

Mieux valant prévenir que guérir, nous avons mis en place sur ce site une méthode permettant d'accéder à l'information, en utilisant SwfObject. (bien qu'il ne soit pas exclu d'en faire une dans le même esprit avec l'intégration "classique").

Intégration avec SwfObject

Nous n'entrerons pas ici dans le détail de l'intégration d'animation flash avec SwfObject, ce sujet a déjà été très largement traité dans l'article à ce propos.

Le principe pour garder notre titre accessible aux lecteurs d'ecran sous Firefox, va être de reproduire ce titre sous l'animation, et de le masquer en le plaçant en dehors des limites de la page, au moment ou SwfObject effectue son opération; imaginons que nous ayons ceci avant le traitement SwfObjet :

<div id="anim"><h1>Mon titre</h1></div>
<div id="alt_anim"></div>

Code : Le calque censé rececoir l'animation anim ou nous plaçons par défaut l'aternative de cette animation comme suggéré par les concepteurs de SwfObject

En clair, si l'internaute est équipé de Javascript, si il a le player Flash, et si son navigateur n'est pas Internet Explorer, on déplace l'alternative "Mon titre" dans le calque alt_anim.

Ce calque ne doit pas être invisible (ni display:none, ni visibility:hidden), à la manière expliquée pour les liens d'évitement dans l'article Visibilité CSS et Lecteur d'écran. Les propriétés suivantes feront l'affaire :

div#alt_anim
{
  position:absolute;
  top:-100000px;
  overflow:hidden;
}

Il reste à effectuer cette petite manipulation en Javascript pour insérer l'animation avec SwfObject, et replacer l'alternative :

//<![CDATA[
var flashvars={titre:"Mon titre"};
var params={menu:"false"};
var attributes={id:"mon_titre",name:"mon_titre"};

//si l'utilisateur a la bonne version de flash (ici 9) et qu'il a Internet Explorer
if(swfobject.hasFlashPlayerVersion("9.0.0") && navigator.appName.indexOf('MSIE')==-1 && navigator.appName.indexOf('Microsoft')==-1)
{
    try
    {
        //on récupère l'alternative de l'animation 
        var oNodes=document.getElementById("anim").childNodes; 
        //on place l'aternative dans l'aternative
        for(var i=0;i<oNodes.length;i++)
            document.getElementById("alt_anim").appendChild(oNodes[i]);
    }
    catch(e){ }
}
swfobject.embedSWF("titre.swf","swf_banniere","300","30","9.0.0","expressInstall.swf",flashvars,params,attributes);    
//]]>

On peut facilement capitaliser une fonction Javascript de ce code, permettant de réutiliser cette méthode.

C'est ainsi que nous avons fait sur notre page d'accueil : désactivez la feuille de style avec Firefox, vous constaterez que l'alternative de l'animation Flash reste présente dans le corps de la page. Cette alternative reste ainsi accessible aux lecteurs d'écrans qui sont utilisés avec une autre navigateur qu'Internet Explorer.

Conclusion

Cette solution est temporaire, peut-être qu'un jour les navigateurs s'adapteront. Pour ce sujet au moins, Internet Explorer ne se défend pas si mal, malgré tout le mal que l'on peut en dire.

Commentaires

Les commentaires sont tous validés par un modérateur, votre commentaire n'apparaît pas directement sur le site.
Aucun support n'est assuré ici, vous pouvez néanmoins laisser vos remarques et critiques sur l'article, les points de vue pertinents sont toujours les bienvenus.