Enfin, un décret pour l’accessibilité des sites Web…

Vous n’êtes pas sans savoir que nous sommes chez Kinoa de fervents défenseurs de l’accessibilité des sites Internet.

L’accessibilité est pour nous synonyme de qualité, d’ouverture et de référencement optimisé.

Nous avions il y a quelques années énormément travaillé autour de cette problématique avec notamment notre ami Jérôme Adam et différents groupes de travail consultatifs dans le cadre de l’élaboration de la loi du 11 février 2005 sur l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées.

Malheureusement, cette loi n’avait produit que peu de résultats faute de décret d’application.

Plus de 4 ans après, ce dernier a enfin été publié ! C’est donc officiel, les sites de « l’Etat, les collectivités territoriales et les établissements publics qui en dépendent » auront 3 ans pour se mettre en conformité avec le référentiel mentionné par le décret.

Malheureusement (bis), le référentiel mentionné n’existe pas encore, les modalités de mise en oeuvre ne sont pas précisées et les procédures de contrôles de la conformité sont absentes…

De plus, aucune pénalité sérieuse ne sera infligée aux collectivités qui ne joueront pas le jeu.

Autant dire que nous avons attendu 4 ans pour pas grand chose !

D’autres articles sur l’accessibilité de site Web :

WCAG 2.0 : nouveau standard pour l’accessibilité des sites Web

Après une très très longue gestation, le W3C a officialisé le 11 décembre dernier la nouvelle version de ses directives pour l’accessibilité des sites Web : les « Web Content Accessibility Guidelines » ou WCAG (prononcé « ouaikague », c’est pas beau, je sais…).

WAI-W3C

Ces directives sont excessivement importantes car elles garantissent que tous les internautes quelque soit leurs facultés physiques et mentales puissent surfer sur votre site Internet. Une entreprise pourrait d’ailleurs être attaquée en justice pour discrimination par une personne handicapée qui n’aurait pu accéder par exemple aux offres d’emploi. Le cas ne s’est pas produit, mais il est loin d’être totalement théorique.

L’accessibilité est également très importante dans une démarche d’optimisation du site Web en vue de son référencement (SEO).

Pour en savoir plus sur le sujet, vous pouvez consulter les infographies suivantes :

Qu’apporte donc la version 2 des WCAG ?

C’est avant tout des efforts de simplification et de rationalisation qui semblent avoir été réalisés. Plusieurs objectifs ont été poursuivis dont notamment :

  • La prise en compte d’un éventail plus large de contenus Web (textes, images, audio et vidéo) et d’applications Web ;
  • La possibilité de tester plus facilement et surtout avec plus de précisions l’ensemble des directives, ce qui améliore les options pour le contrôle de conformité, et donne aux développeurs Web une plus grande souplesse dans l’innovation ;
  • La simplification dans leur mise en oeuvre. Les directives sont désormais accompagnées de supports techniques et de référence, les WCAG 2.0 sont ainsi plus faciles à comprendre et à utiliser.

Le standard WCAG 2.0 explique comment créer des contenus :

  • perceptibles : par exemple en offrant des alternatives équivalentes aux contenus visuels et auditifs (images statiques ou animées, contenus audio et vidéo) adaptabilité de la présentation et contraste des couleurs ;
  • utilisables : en privilégiant les fonctionnalités clavier, contraste de couleur, un temps suffisant pour comprendre et utiliser le contenu des entrées, la recherche et la navigation sans saisie ;
  • compréhensibles : en facilitant la lisibilité des textes, la prédictibilité et l’aide à la saisie ;
  • robustes : par exemple en optimisant la compatibilité avec les technologies d’aide fonctionnelle.

Il est encore trop tôt pour dire si cette nouvelle version des WCAG atteindra ses objectifs, mais dans tous les cas la précédente version était devenue totalement archaïque et son remplacement devenu inéluctable.

Pour en savoir plus :

SPIP 2.0 est dans les bacs

Nous aimons bien chez kinoa utiliser le petit CMS  SPIP qui s’avère léger, respectueux des règles d’accessibilité, efficace et suffisamment fonctionnel pour la plupart des sites Web dont les contraintes restent essentiellement basées sur des problématiques de gestion de contenus.

Quelques jours après la sortie de WordPress 2.7, c’est donc au tour de SPIP de nous proposer sa nouvelle version « SPIP 2.0 ».

Les évolutions chez SPIP sont assez lentes mais il faut dire que chaque nouvelle version apporte un grand nombre de nouvelles fonctionnalités.

La version 2.0 ne déroge pas à la règle et les évolutions sont nombreuses. En voici un aperçu :

  • URLs symboliques gérant leur historique et permettant la notation arborescente ;
  • incrustation dans les textes de média divers ;
  • forums permettant l’inclusion de documents ;
  • gestion des éditions concurrentes ;
  • installation automatique de plugins ;
  • accès simultané à plusieurs serveurs (MySQL PostGres, SQLite2 et 3), fusion d’extraits de bases, squelettes automatiques ;
  • mutualisation facilitée, notamment pour les hébergeurs ;
  • squelettes fondés sur des CSS LayoutGala ;
  • nouveaux modes d’inclusion, notamment de formulaires en AJAX ;
  • nouveautés dans les balises, notamment celle gérant URL et clé primaire ;
  • nouveautés dans les critères, notamment pour les jointures et le moteur de recherche ;
  • gestion automatique des chaînes de langues à traduire ;
  • validateur XML intégré applicable sur un ensemble de pages ;
  • serveur SQL virtuel s’appuyant directement sur les couches basses de PHP ;

Si vous souhaitez obtenir tous les détails de ces nouvelles fonctionnalités, vous pouvez consulter cet article très complet : SPIP 2.0 !

Réussir sa page Web : les bons ingrédients !

Finalement le Web c’est un peu comme la cuisine, il faut une bonne recette, un peu d’entraînement et de bons ingrédients.

La recette du jour : « réussir sa page Web« .

Réussir sa page Web

Les ingrédients et le tour de main :

#1 – Titre de page court et explicite (balise <Title>) : La balise « title » est très importante dans la mesure où elle va renseigner vos lecteurs ainsi que les moteurs de recherche sur le contenu de votre page. Un titre doit correspondre à une seule et même page de votre site, donc à une page correspond un titre unique. Si vous souhaitez en savoir plus sur l’optimisation du titre de page, je vous invite à consulter le Guide SEO Google.

#2 – URL propre, unique et signifiante : Une URL doit être explicite. Il faut donc préférer la forme suivante « http://blog.armstrong.space/web-marketing-infographies/ » à « http://blog.armstrong.space/map.adp?ovi=1&mqmap.x=300&mqmap.y=75&mapdata=%252 ». L’URL au même titre que la balise Title va renseigner vos lecteurs et les moteurs de recherche sur le contenu de votre page.

#3 – Header avec logo, baseline, menu transversal ainsi qu’une navigation de 1er niveau (7 rubriques maximum) : Lorsque votre visiteur arrive sur votre page Web, vous devez l’accueillir en lui mentionnant clairement qu’il est arrivé à bon port. C’est en partie le rôle de votre logo qui doit être bien visible en haut à gauche de votre page (l’emplacement est une convention d’usage). Une baseline renseignera également l’utilisateur sur votre activité (il n’est pas sensé tout connaître de votre société). Ce header doit également proposer des liens dits « transversaux » (liens que l’on retrouve sur l’intégralité des pages). Il s’agira généralement de :

  • Accessibilité : votre politique en terme d’accessibilité de vos pages Web ;
  • Plan du site : permet d’offrir rapidement à vos visiteurs une vue d’ensemble de vos contenus et services ;
  • Langues : permet de sélectionner la langue de son choix (si vous proposez vos pages en plusieurs langues bien évidemment !) ;
  • Blog : si vous proposez un blog (fortement recommandé:) ;
  • Contact : il est toujours intéressant de proposer un lien pour vous contacter facilement.

NB : certains de ces liens transversaux peuvent être positionnés indifféremment dans le footer de vos pages.

#4 – Chemin de navigation : Il est devenu aujourd’hui un élément d’ergonomie indispensable puisqu’il permet à l’Internaute de se repérer durant sa navigation. Ce dernier sera bien évidemment inutile sur un blog puisque le classement des pages est chronologique. On lui préférera alors une date de publication de l’article.

#5 – Navigation de second niveau ou catégories dans le cas d’un blog : Très généralement, nous retrouvons un menu de navigation de second niveau en colonne de gauche ou de droite de la page. Dans le cas d’un blog, ce menu sera remplacé par d’autres systèmes de navigation tels que les catégories et/ou les Tags.

#6 – Titre clair (<H1>) et chapeau résumant l’essentiel de l’information : Il faut dans la mesure du possible choisir des titres courts.  Titres et intertitres doivent être utilisés à bon escient . Ces derniers doivent utiliser des tailles de police différentes en fonction de leur importance. Sémantiquement, ils doivent être reliés aux balises « H1 à H6 » . Enfin, pour garantir une meilleure lisibilité il est essentiel de structurer l’information sur le principe de la pyramide inversée, modèle éditorial applicable au Web. Un chapeau qui résume l’essentiel de l’information est un bon moyen de respecter cette règle.

Plus généralement, si vous souhaitez optimiser vos contenus Web, vous pouvez lire le billet suivant : « 10 astuces pour optimiser vos contenus sur le Net« .

#7 – Images si possibles en rapport avec le contenu : Des images permettant de schématiser ou d’illustrer le discours sont souvent plus efficaces que trop d’écrits. Attention à bien prévoir des alternatives textes à vos images. Ceci est très important pour l’accessibilité de vos pages Web ainsi que pour leur référencement.

#8 – Vidéos et éléments interactifs : Des vidéos et éléments interactifs sont intéressants à utiliser dans la mesure où ils permettent de diversifier les formes de contenus. Les vidéos peuvent en plus avoir un effet potentiellement viral (être reprises sur d’autres pages Web).

#9 – Contenus complémentaires : Il est intéressant de pouvoir proposer des liens vers des contenus complémentaires à votre contenu principal. En fonction des cas, si votre cible est plutôt BtoB ou BtoC, vous pouvez proposer des livres blancs, des études de cas, des FAQ… Voir à ce sujet, l’illustration suivante : « Dopez votre présence en ligne« .

#10 – Moteur de recherche : Proposer un moteur de recherche est aujourd’hui indispensable. Certains utilisateurs en font l’un de leur élément de navigation privilégié.

#11 – Abonnement Newsletter : La newsletter est un bon moyen de fidéliser votre audience et d’offrir une meilleure exposition à vos contenus. Il existe des services assez simples à mettre en place pour gérer ses newsletters, c’est donc dommage de s’en priver !

#12 – Flux RSS : Un peu à l’instar de la newsletter, le flux RSS permettra à vos lecteurs de s’abonner et d’être ainsi avertis lors de la parution de vos nouveaux contenus.

#13 – Footer avec mentions légales, contacts et copyright : Ils s’agit ici de respecter les obligations légales. Les mentions légales doivent notamment indiquer l’identité de l’hébergeur et sa dénomination ou raison social, ses coordonnées complètes, le nom du responsable de la publication, vos coordonnées…

#14 – Code respectueux des standards XHTML / CSS : Vous souhaitez être bien référencé ? Respectez alors les standards W3C, vous pourrez également rendre votre site Web accessible plus facilement.

Bon si vous n’aimez pas faire la cuisine, vous pourrez toujours vous servir de l’illustration comme check-list 🙂

Qu’en pensez-vous ?

Accessibilité des CMS

Dans le cadre des 9èmes Rencontres Mondiales du Logiciel Libre (Mont-de Marsan, juillet 2008), Elie Sloïm (Temesis) et Aurélien Lévy (Temesis) ont eu la bonne idée de soumettre quelques outils de gestion de contenu (CMS) parmi les plus populaires à une évaluation sur le respect des critères de l’accessibilité.

La liste finale des outils testés : SPIP, EZpublish, Drupal, CMS Made Simple, Typo3, Joomla.

Vingt critères significatifs pour l’accessibilité ont été utilisés durant cette évaluation. Parmi ces critères, nous pouvons noter par exemple :

  • Est-il possible de mettre en place un texte alternatif sur les images ?
  • Est-il possible de mettre en place un titrage pertinent (h1 à h6) ?
  • Les objets multimedia peuvent-ils être accompagnés d’une alternative ?
  • Les titles de liens peuvent-ils être saisis ?
  • Les templates par défaut peuvent-ils être édités ?

Pour rendre le test plus concret, un fichier texte fictif comprenant des éléments courants de mise en page a été publié à l’aide des différents CMS. Le code généré a ensuite été évalué.

Ce texte comprenait :

  • Des éléments textuels
  • Des images décoratives ou contenant du texte
  • Un son, une vidéo
  • Des titres, des énumérations ordonnées ou pas
  • Des acronymes et abréviations
  • Une citation

Le grand gagnant de ce « benchmark accessibilité des CMS » est : SPIP !

Quel progrès pour ce petit CMS français qui était lamentable en terme d’accessibilité il y a encore quelques années. 

La suite du classement est la suivante : CMS MADE SIMPLE et JOOMLA qui sont à égalité puis viennent DRUPAL, EZPUBLISH et TYPO3.

Vous pouvez consulter le rapport complet (points forts et points faibles) de ce comparatif ici.

A lire aussi sur le thème de l’accessibilité :

Nouveau référentiel Accessiweb 1.1

10 astuces pour améliorer l’accessibilité de votre site Web

Respecter les standards : les bénéfices illustrés

Nouveau référentiel Accessiweb 1.1

La nouvelle version du référentiel Accessiweb de l’association BrailleNet est sortie il y a un mois (juin 08).

Cette version est le fruit de 6 mois de travail collaboratif entre Accessiweb et les experts du GTA (le Groupe de Travail AccessiWeb qui rassemble 250 Experts AccessiWeb en évaluation).

Les principales critiques de l’ancien référentiel portaient sur la difficulté à le mettre en application, même pour le niveau minimal « bronze ».

Accessiweb a réellement tenu compte des remarques des experts du GTA qui sont en contact direct avec les clients pour la rédaction de ce nouveau référentiel.

Résultat, ce dernier est plus clair et plus simple à mettre en place. Par exemple, le niveau « bronze » qui atteint déjà un bon niveau d’accessibilité est passé de 55 critères à 47.

Des efforts particuliers ont été faits pour améliorer la compréhension des critères et surtout la façon de les évaluer sur un site en fonction du navigateur (firefox ou internet explorer) ou du code source.

Parmi les nouveautés, on trouve :

  • Une batterie de tests compréhensibles et simples à mettre en place pour valider les critères. Ces tests sont proposés en deux catégories : profil technique et profil dirigeant ou grand public.
  • Un glossaire très complet des termes Accessiweb.
  • Une table de correspondance entre les differents référentiels (WCAG 1.0, WCAG 2.0, UWEM etc…).

C’est du bon travail, le gain de temps est vraiment visible lors de l’audit d’un site et surtout cela est plus structuré et moins « usine à gaz » qu’auparavant.

Vous pouvez si vous le souhaitez poursuivre votre lecture sur l’accessibilité en consultant le billet « 10 astuces pour améliorer l’accessibilité de votre site Web« .

10 astuces pour améliorer l’accessibilité de votre site Web

La production de services en ligne attractifs, accessibles et respectant les standards W3C et la WAI est aujourd’hui un enjeu stratégique pour votre entreprise.

Toutes les améliorations en matière de qualité, de conformité et d’accessibilité se traduisent à court terme par des bénéfices concrets :

  • « Write once, run anywhere » : le respect de standards permet une compatibilité ascendante sur l’ensemble des plates-formes (MAC, PC, Linux…) et des navigateurs (FireFox, IE, Safari…).
  • Le respect des standards participe également à la portabilité de votre site sur mobile : assistants personnels, téléphonie mobile, télévision, domotique…
  • Les standards favorisent la création de sites Web modernes et dynamiques avec des contenus clairement dissociés de la présentation graphique. Ainsi, il devient facile de modifier l’ensemble des éléments graphiques du site sans devoir intervenir sur toutes les pages de ce dernier.
  • Optimisation du référencement dans les moteurs de recherche.
  • Prise en compte des personnes handicapées : « accessibilité » et respect du cadre législatif.
  • Réduction drastique du code, lecture du code plus aisée, maintenance allégée.
  • Réduction de la bande passante, de l’infrastructure informatique.
  • Refonte future du site largement simplifiée, pérennité du site Web.
  • Contrôle plus précis de la mise en page, du positionnement et de la typographie.
  • L’utilisateur à la possibilité de modifier la mise en page pour l’adapter selon ses préférences de lecture.
  • Possibilité de proposer une version imprimable des pages sans développements spécifiques.
  • Contenu réutilisable facilement dans d’autres contextes (RSS, syndication…).

En d’autres termes, le respect des standards est plus économique, plus rentable, plus pérenne et est une garantie supplémentaire de satisfaction des usagers du site Web.

Il s’inscrit parfaitement dans une logique citoyenne et une logique de développement durable.

Voici donc 10 astuces pour améliorer l’accessibilité de votre site Internet :

10 astuces pour rendre son site Web accessible

#1 – Séparer la mise en forme du contenu. Si il ne devait y avoir qu’une seule règle à retenir, ce serait très certainement celle là. Le code HTML ne doit contenir aucun attribut de mise en forme. Ces derniers doivent en effet être pris en charge par la feuille de style. Dans le cas contraire, votre site Web risque de ne pas être accessible et sera de plus très difficile à maintenir.

#2 – Prévoir des alternatives aux Scripts. Une page HTML doit être parfaitement lisible lorsque les feuilles de styles sont désactivées. Il en va de même pour les scripts en tout genre. Vous devez notamment vous assurer que lorsque le JavaScript est désactivé, vos pages restent parfaitement utilisables.

#3 – Proposer des alternatives textes. Certaines personnes ne pourront pas utiliser les informations véhiculées grâce aux images ou aux contenus multimédias (vidéo, par exemple). Il est donc important de prévoir pour chacun de ces éléments des alternatives textes appropriées.

#4 – Proposer des formats alternatifs en téléchargement. Il est bien de proposer pour un même document à télécharger, plusieurs formats afin de laisser le choix à l’utilisateur, notamment lorsqu’il s’agit de document PDF.

#5 – Eviter d’ouvrir des liens dans une nouvelle fenêtre. Il peut être très perturbant pour l’utilisateur handicapé ou non d’ailleurs d’être confronté à l’ouverture systématique d’une nouvelle fenêtre chaque fois qu’il clique sur un lien. Si vous êtes dans l’obligation d’ouvrir un lien dans une nouvelle fenêtre, mentionnez- le très clairement à vos utilisateurs.

#6 – Eviter les frames. Les frames ou cadres sont aujourd’hui de moins en moins utilisées. Tant mieux, leur utilisation peut grandement perturber les utilisateurs handicapés, ainsi que les moteurs de recherche qui tentent d’indexer vos pages.

#7 – Proposer systématiquement un plan du site et un moteur de recherche. Ces deux éléments concourent grandement à l’accessibilité de votre site Internet car ils permettent à l’utilisateur de s’orienter plus facilement et de trouver l’information recherchée rapidement.

#8 – Proposer des titres explicites à vos pages. La balise « Title » doit être correctement renseignée pour chacune de vos pages. Cette dernière doit représenter le plus fidèlement possible le contenu des pages. Vos utilisateur auront ainsi une information de contexte et d’orientation très appréciable, de même que les moteurs de recherche.

#9 – Vérifier les contrastes de vos couleurs. Vous devez vous assurer que les textes et graphiques sont utilisables même sans les couleurs. Les contrastes doivent également être suffisants afin que la combinaison de couleurs entre le premier plan et l’arrière-plan n’empêche pas les personnes souffrant d’un déficit de perception des couleurs ou utilisant un écran noir et blanc de lire le texte.

#10 – Utiliser les technologies du W3C. Les directives actuelles recommandent l’utilisation des technologies du W3C (Par ex. : HTML, CSS, etc.) pour plusieurs raisons :

  • Les technologies du W3C comprennent des options d’accessibilité « embarquées ».
  • les specifications du W3C sont régulierement mises à jour pour prendre en compte l’arrivée de nouvelles technologies Web.
  • Les spécifications du W3C sont élaborées de manière ouverte et découlent d’un consensus de l’industrie.

Pour en savoir plus sur l’ensemble des directives d’accessibilité.