eclaireur.net

Actuellement la technologie Flash d'Adobe (promue par feu Macromedia), est devenue quasi incontournable. Elle se met dans tout les sites, surtout pour les publicités et certains éléments avec des effets visuels. Je ne vais pas vous parler de l'ergonomie et de l'usabilité de Flash (je vous conseillerai cet excellent article d'ergolab sur l'ergonomie flash). En revanche je vais vous présenter la meilleur façon de rendre les animations Flash accessibles pour les internautes et leur navigateurs.

Pour commencer

L'insertion d'un document flash au sein d'une page web passe par l'utilisation de balises spécifiques. Voici un exemple de ce que vous pouvez retrouver :

<object
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="980" height="550"
   codebase="http://download.macromedia.com/.../swflash.cab#version=8,0,0,0">
   <param name="movie" value="document.swf" />
   <embed
      src="document.swf" width="280" height="250" type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

La balise <object> et la balise <embed> jouent le même rôle : insérer l'animation au sein de la page. Et pourquoi 2 balises? Ses 2 balises servaient pour que l'insertion du flash se fasse dans tous les navigateurs... Malheureusement si l'on considère la norme XHTML, ce code n'est pas valide :

• la balise <embed> n'a plus lieu d'être
• l'attribut codebase ne doit pas référencer une url externe
• il manque certains attributs pour que les navigateurs puissent charger le document

Voici à quoi devraient ressembler ces lignes afin d'être plus proches de la norme.

<object type="application/x-shockwave-flash" data="document.swf" width="980" height="550">
   <param name="movie" value="document.swf" />
</object>

Et puisque le sujet est l'accessibilité, il serait bien vu d'insérer entre la ligne 2 et 3 une alternative visuelle ou textuelle, qui permettrait de rendre l'information plus lisible, et donc plus accessible.

<object type="application/x-shockwave-flash" data="document.swf" width="980" height="550">
   <param name="movie" value="document.swf" />
   <p>Présentation de mon document</p>
</object>

Internet Explorer 7 et son blocage des contenus actifs

Vous le savez peut-être déjà, mais lorsque vous affichez une page qui contient une animation flash, l'interactivité avec celle-ci ne fonctionne qu'après un clic de votre souris sur le document.

L'effet peut-être assez gênant, et bien entendu il existe une parade. Le site d'Adobe apporte une solution aves 2 scripts, mais il en existe bien d'autre. Personnellement je préfère SWFObject, il suffit d'inclure le script dans le header de votre page. Il faudra également modifier légèrement la balise d'appel du script dans l'emplacement du Flash dans le body.

<!-- Dans le header de la la page-->
   <script type="text/javascript" src="swfobject.js"></script>
<!-- Dans le body de la page-->
<div id="flashcontenu">
  <p>Présentation du document</p>
</div>
<script type="text/javascript">
   var so = new SWFObject("document.swf", "document", "280", "250", "8", "#336699");
   so.write("flashcontenu");
</script>

Des améliorations pourraient être apportées à cette méthode, afin par exemple de n'utiliser la partie script que pour le cas du navigateur Internet Explorer.

Pour ceux qui veulent aller plus loin avec le code de ce script SWFObject, je vous conseille cette traduction du site officiel de SWFObject réalisé par media-box.net.

Firefox (Mozilla) pose également des problèmes

Firefox peut également poser quelques problèmes dans un cas bien particulier...

Si votre animation flash contient un formulaire de saisie, il est déconseillé d'utiliser la propriété wmode dans le paramétrage de l'objet flash. En effet cela provoque un problème d'interprétation de certain des caractères saisis, comme par exemple l'@ qui devient un à.

L'attribut wmode permet notamment de rendre le fond de l'animation transparent, afin de faire ressortir le fond de la page web.

Ajouter un commentaire Partager cet article S'abonner aux commentaires