Cet article illustre pourquoi il est nécessaire que le contenu d'une page web soit accessible sans plugin. Si vous avez besoin de tels plugins (pour un cas bien spécifique ou pour des raisons historiques), nous illustrerons également un cas expliquant comment intégrer du contenu de cette façon.
| Prérequis : | Vous devez savoir comment créer un document HTML basique. |
|---|---|
| Objectifs : | Cet article aborde les méthodes pour insérer du contenu, dépendant d'extensions tierces, dans une page web. |
Résumé : Des plugins comme Flash représentent une technologie passée, notamment sur les appareils mobiles où ils ne sont pas disponibles. Les navigateurs destinés aux ordinateurs de bureau vont également abandonner leur support.
Tourner son clavier sept fois sur son bureau avant de dépendre de plugins tiers
Un plugin est un logiciel qui permet d'accéder à un contenu que le navigateur ne peut pas lire/décoder nativement. Il était une fois, les plugins étaient indispensables sur le Web. Il y a quelques années, installer Adobe Flash Player était un passage obligé pour regarder un film en ligne. À cette époque, on avait également de (trop) nombreuses alertes pour mettre à jour Flash Player ou Java Runtime Environment.
Depuis, les technologies web ont grandi et aquis une certaine maturité et une certaine robustesse. Pour la plupart des application, il est donc temps d'arrêter de dépendre de ces plugins et de tirer parti des technologies web. Cela permettra :
- D'élargir votre audience à toutes les personnes qui ont un navigateur. Tout le monde a un navigateur, les plugins sont beaucoup plus rare, notamment pour les utilisateurs mobiles. Le Web était devenu largement utilisable sans plugins, les gens iront sans aucun doute sur un autre site web concurrent plutôt que d'installer un plugin supplémentaire.
- De vous épargner les maux de tête liés à l'accessibilité et aux plugins comme Flash ou les autres.
- De rester à l'abri de failles de sécurités répétées. Il est de notoriété publique qu'Adobe Flash est peu sécurisé et ce malgré les nombreux correctifs apportés au cours du temps. En 2015, Alex Stamos, le responsable de la sécurité informatique de Facebook a même demandé à Adobe d'arrêter le développement de Flash.
Que faire ? Si vous avez besoin d'une certaine intéractivité sur votre page, JavaScript vous permettra sans aucun doute d'accomplir ce dont vous avez besoin, sans avoir à utiliser d'applets Java ou de composants ActiveX/BHO. Plutôt que d'utiliser Adobe Flash, vous pouvez utiliser la vidéo HTML5 pour les cas où vous avez besoin de médias, SVG pour les graphiques vectoriels et Canvas pour réaliser des images et animations complexes. Plusieurs années auparavant, Peter Elst écrivait déjà qu'Adobe Flash était rarement le meilleur outil pour développer sur le Web, notamment pour les jeux et les applications d'entreprises. En ce qui concerne ActiveX, même le navigateur de Microsoft, Edge, ne le supporte plus.
L'histoire de deux balises
Si vous devez dépendre de plugins pour un cas spécifique ou lié au cadre d'une entreprise donnée, HTML fournit deux élément pour intégrer du contenu provenant d'un plugin : <embed> et <object>. Il faut noter qu'<embed> est un élément vide, à la différence de <object>.
Il faudra donc utiliser les attributs pour fournir certaines informations :
<embed> |
<object> |
|
|---|---|---|
| L'URL du contenu à intégrer | src |
data |
| Le type MIME précis du contenu à intégrer | type |
type |
| La hauteur et la largeur, exprimées en pixels CSS, de la boîte contrôlée par le plugin | heightwidth |
heightwidth |
| Les noms et valeurs à founir comme paramètres au plugin | Des attributs ad hoc avec les noms et les valeurs | Des éléments sur une seule balise <param> contenus dans la balise <object> |
| Du contenu HTML indépendant à utiliser en secours au cas où la ressource à intégrer n'est pas disponible | Non supporté (<noembed> est obsolète) |
Contenus dans la balise <object>, après les éléments <param> |
<object> a besoin d'un attribut data ou d'un attribut type ou des deux. SI vous utilisez les deux, il faudra peut être utiliser l'attribut typemustmatch (uniquement implémenté dans Firefox à l'heure où cet article est écrit). typemustmatch permet au contenu intégré de ne pas être lancé tant que l'attribut type ne correspond pas au type du média. typemustmatch permet ainsi d'apporter beaucoup plus de sécurité lorsqu'on intègre du contenu provenant d'une autre origine (cela peut empêcher des attaquants malveillants de lancer des scripts modifiés au travers du plugin).
Les deux exemples utilisent chacun <embed> ou <object> pour insérer un film Flash, <object> permet également de gérer un contenu à utiliser en cas de secours :
<embed src="explosion.swf" type="application/vnd.adobe.flash-movie" width="500" height="300" bgcolor="#ff7f00" allowfullscreen="true" />
<object
data="explosion.swf"
type="application/vnd.adobe.flash-movie"
width="500"
height="300"
typemustmatch>
<param name="bgcolor" value="#ff7f00" />
<param name="allowfullscreen" value="true" />
<p>Le film Flash n'a pu être trouvé.</p>
</object>
Afin d'être tout à fait complet, voici deux exemples supplémentaires. Encore une fois, il est (de loin) préférable d'utiliser JavaScript que des applets Java car le navigateur exécutera directement le code JavaScript sans passer par un environnement tiers, lourd. Ceci étant dit, voilà comment utiliser l'élément <object> pour insérer une applet Java :
<object
data="mon_applet.jar"
type="application/x-java-applet">
<param name="code" value="MaClasseJava">
<p>Java n'est pas disponible ou est désactive.</p>
</object>
Un autre cas où on a besoin de faire appel à <object> : les fichiers PDF. Ces fichiers posent de nombreux problèmes d'accessibilité, notamment pour les utilisateurs qui utilisent un petit écran. Il ne devrait pas être absolument nécessaire de lire un PDF pour consulter un site web (imaginez si tous les sites web étaient uniquement disponibles en largeur fixe). Toutefois, si vous avez besoin d'intégrer un contenu PDF, voici comment le faire dans votre page web :
<object
data="mon_fichier.pdf"
type="application/pdf"
width="100%"
height="100%"
typemustmatch>
<p>Vous n'avez pas de plugin pour lire des fichiers PDF mais vous pouvez
<a href="mon_fichier.pdf">télécharger le fichier PDF correspondant.</a></p>
</object>
En savoir plus
- L'accessibilité avec Flash
<object><embed>- Comparaison entre HTML5 et Flash sur Wikipédia (en anglais)
- flashsucks.org, occupyflash.org (en anglais) (pour expliciter, encore plus si besoin, les raisons pour lesquelles Flash est très déconseillé)