De l'accessibilité dans HTML5 ? Je tente le coup

L'accessibilité des pages Web va grandement s'améliorer avec HTML5. L'accessibilité du Web — il n'est jamais inutile de le rappeler — c'est garantir l'accès aux services et contenus en ligne par les handicapés et les personnes âgées. C'est une norme définie par la Web Accessibility Initiative (WAI) du W3C. Norme — et c'est énorme — qui n'est pas respectée par les webmestres.

Sauf que... il y a fort à parier que dans un avenir maintenant proche la structuration et l'intégration de nouvelles données dans les pages Web pour une meilleure accessibilité va permettre un meilleur référencement de ces pages. Du coup, si les référenceurs s'y intéressent, les bénéfices pour le Web ne seront pas minces : en rendant les sites accessibles aux handicapés ils faciliteront l'accès aux contenus pour tous les visiteurs, dont les robots des moteurs de recherche qu'ils chérissent tant.
Mais comment mettre en place un balisage HTML5 pour une meilleure accessibilité ? C'est la question du jour.

Bonjour

HTML5 : les grands comptes s'y mettent

Oh ! Quelle surprise ! La GMF pour son site epargnegmf.fr est passée à HTML5. En plus, les créateurs du site (je ne sais quelle agence) a fait très très fort. Regardez le code. Regardez la CSS3. Il y a même du Canvas ! La page est moche ? On s'en fout : si ça plaît aux clients de la GMF, c'est ce qu'il faut. Le code, lui est de toute beauté. Bravo à son(ses) auteur(s).

la GMF et son site Web en HTML5
la GMF et son site Web en HTML5

La balise audio et le sous-titrage

Atul Varma. Il vit à San Francisco et bosse pour Mozilla. À l'instar de Bruce Lawson il utilise pour l'affichage synchronisé des sous-titres l'attribut data- d'HTML5. En gros, cettte nouvelle fonctionnalité permet de transmettre des données (invisibles pour les humains) à des scripts. Sa démo en ligne est épatante (il y a un lien en bas de page pour faire apparaître/disparaître les sous-titres). Jetez ensuite un œil sur le code source, vous allez comprendre immédiatement comment ça fonctionne.

les balises audio et vidéo : les sous-titres et l'accessibilité

HTML5 allant remplacer les solutions propriétaires pour l'affichage des contenus multimédia, les API sortent petit à petit. La preuve en est ce jCaps, un petit plug-in de JQuery pas vraiment fini, pour aider les webmestres feignasses ou incompétents à faire de l'audio et de la video sans peine.

Le nouveau gabarit HTML5/CSS3

L'inspiration m'est venue à la lecture d'un livre de recettes de cuisine. En fait j'avais 2 livres en mains. Si tous les deux étaient récents la mise en page de l'un m'a tout de suite séduit. Sobre, élégante, sans aucune photo, la typo seule me permettait de bien m'orienter dans la lecture. Il m'a immédiatement fait penser à ces vieux livres que je garde précieusement dans ma bibliothèque tandis que la mise en page de l'autre, très moderne, ne m'inspirait que de l'affliction pour son auteur. Bref, il ressemblait à un magazine qu'on jette après sa lecture.
Et surtout il y avait ce gros problème que j'avais à régler : celui de la compatibilité des différents codes avec certains navigateurs (en particulier pour les clients Safari sous Mac). Un comble pour un mec qui a bossé pour Apple !

Comme je n'avais pour seule ambition que d'y tester des méthodes de référencement et de coder en HTML5 pour voir ce dont j'étais capable, je n'en avais pas fait la promotion. Et puis je me suis pris au jeu. Je ne sais (pas bien) coder. Je ne suis pas un designer. Vous vous en êtes tous aperçus. Ça tombait bien : je n'ai rien à cacher.
Oui mais voilà : des visiteurs plus nombreux chaque jour qui doivent se demander dans quel cirque ils ont débarqué pour y voir un tel clown. Il fallait faire quelque chose et ce quelque chose c'était de tout de refaire.

comment j'ai refait ce blog HTML5

Trouble à l'ordre public

Attention. À toutes et à tous : il faut vous attendre à des problèmes d'impression des pages dans les prochains jours et à compter de maintenant. Je modifie actuellement le Core de mon script, la base de données, le template (toujours en HTML5 et CSS3). J'élimine aussi un paquet de scripts JS qui me cassaient les bonbons avec leurs comportements imprévisibles dans certains navigateurs. Toutes mes excuses anticipées aux personnes qui rencontreraient des difficultés pour lire les pages ou poster des commentaires. D'après les tests en cours en local sur mon réseau, la prochaine version du Bloc-notes (qui s'appelera le « débloque-notes » d'ailleurs) devrait être lisible par tous les navigateurs modernes. Même IE. Si si...
Un dernier mot avant de reprendre mon code : merci à vous de me lire.

top