Accessibilité numérique ; un peu de méthodologie
Par Philippe Poisse le mercredi, novembre 28 2012, 19:00 - Accessibilité Numérique - Lien permanent
L’accessibilité numérique est une obligation légale pour les administrations. Mais elle est aussi importante pour les sites Web des entreprises et des associations. Petit rappel des fondamentaux.
Séparation contenu-contenant
Une page Web est écrite avec deux langages : le HTML et le CSS.
Le HTML sert pour le contenu (vos informations) et le CSS pour le contenant (votre présentation).
Lors de la réalisation d’un site il faut donc séparer les deux. Ainsi la page peut être lue par tous types d’appareils sans se soucier de la présentation.
C’est très utile pour un aveugle qui surfe avec une synthèse vocale ou pour l’utilisateur d’un smartphone à l’écran miniature.
Exemple :
<p style="color=blue; font-size=2em">À éviter car le code html et le code CSS sont mélangés.</p>
<p>À préférer.</p>
Amélioration progressive
Le principe de l’amélioration progressive est de partir du niveau le plus bas et de complexifier la page petit à petit.
On commence donc par une page en HTML. Puis le visuel va être travaillé avec des feuilles de styles CSS. Puis on rajoute des éléments en JavaScript et les autres éléments multimédia.
À chaque étape il faut vérifier le bon fonctionnement de la page.
JavaScript
Les fonctionnalités de base de la page, notamment la navigation, doivent pouvoir être utilisables sans JavaScript.
Une alternative doit être trouvée à chaque fonction JavaScript.
Une balise noscript doit être prévue. Son contenu doit être le plus clair possible. Elle doit aussi arriver le plus tôt possible dans le flux HTML.
Si cela est possible, l’utilisation du JavaScript discret est un plus.
Couleurs
Les informations doivent être accessibles sans utiliser un code couleur.
La charte graphique doit être pensée en prenant en compte les différentes déficiences visuelles.
En pratique les couleurs ne doivent pas apporter d’informations importantes pour la compréhension de la page.
La couleur des textes doit avoir un contraste élevé avec la couleur de fond. Par défaut, un texte noir sur fond blanc est à conseiller.
Multimédia
Les éléments multimédia (les balises img, object, etc.) doivent tous disposer de textes alternatifs.
Les images doivent posséder un attribut alt. Si elles ne servent qu’à décorer il vaut mieux les appeler via une déclaration CSS.
La balise objet doit avoir du contenu HTML alternatif.
Exemple pour une animation Flash :
<object type="application/x-schockwave-flash" data="./swf/animation.swf" width="800" height="600">
<param name="movie" value="swf/petitependule.swf" />
<param name="play" value="true" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="scalemode" value="noborder" />
<param name="wmode" value="transparent" />
<p>Le contenu alternatif doit être écrit ici. Il sera affiché si le navigateur ne peut pas afficher l'animation.</p>
</object>
Après la mise en ligne
Le respect de bonnes pratiques et des phases de tests ne peuvent suffire.
Une démarche de suivi et d’amélioration du site web doit être mise en place. Les outils d’analyse du trafic doivent être mis à contribution.
Piwik et Google Analytics permettent de recueillir de nombreuses informations utiles :
Systèmes d’exploitation, navigateurs, tailles d’écran, plugins pris en charge, etc.
Une carte de chaleur est très utile pour étudier l’ergonomie de vos pages. Clickheat remplit très bien cette tâche.
Open Web Analytics est aussi un excellent outil, surtout grâce à sa capacité à enregistrer les mouvements du curseur. Si vous n’avez pas peur d’utiliser un logiciel encore un peu « vert » il vous apportera des informations très pratiques.