Lien « Skip to content » / invisible mais accessible.

Pourquoi et comment rédiger un lien « skip to content » (« accéder directement au contenu ») de manière optimale pour tous. Compétences: html + css.

Aujourd’hui c’est dimanche, jour du Seigneur. Cela tombe bien, je voulais justement vous parler de charité chrétienne appliquée au web design: le lien « skip to content » (« Aller directement au contenu »).

Vous l’avez peut-être déjà aperçu lors de vos pérégrinations sur la toile, surtout si vous développez pour le web: on le croise de temps en temps sans y prêter trop attention, sans savoir exactement à quoi il sert, ce lien qui vous invite à « passe directement au contenu ». Etrange, non?

En vérité, je vous le dis, il sert bien à quelque chose: permettre aux malvoyants utilisant un screen reader de ne pas devoir attendre que le lecteur ait terminé de lire l’entièreté du contenu de l’entête (contenant souvent un menu conséquent) et de passer directement à ce qui l’intéresse dans la page: le contenu.

Comment coder son lien « skip to content »?

Vous veillerez à placer le lien « skip to content » directement après l’ouverture de la balise <body>.

Voilà, rien de bien méchant. Fonctionnellement c’est suffisant pour améliorer l’expérience des malvoyants… Et abîmer celle des autres, qui n’ont pas besoin de ce lien. Son affichage ajoute donc un peu de bruit graphique, il vaut mieux le supprimer visuellement… Sauf, astuce, pour ceux d’entre nous qui n’utilisent pas de souris mais naviguent exclusivement au clavier. Linux power. Voici comment:

De la sorte, le lien est invisible, mais lorsqu’il reçoit le focus (via la touche TAB), il apparait. Wow.

Source: webaim.org

préparer son site au mobile


Cet article devrait vous permettre d’adapter votre site internet aux visiteurs y accédant via navigateurs embarqués-autrement dit, les smartphone mais également certains modèles de téléphone mobile « augmentés ». Il est en cours d’écriture et me sert de pense-bête, donc n’hésitez pas à réagir si j’écris trop de bièsseries. Continuer la lecture de « préparer son site au mobile »

HTML5 Boilerplate : modèle de base pour coder son site en html5

HTML5 Boilerplate
html5 boilerplate est une template de départ pour tout site html/css/javascript , conçue pour intégrer toutes les astuces et bonnes pratiques de dégradation progressive, d’optimisation de bande passante, de support aux différents médias y compris les téléphones mobiles basiques à partir de html5. Oui, vous pouvez donc coder votre site en html5, CSS3 sans vous inquiéter pour les pauvres âmes qui utilisent encore internet explorer 6, votre site se dégradera correctement pour eux. Continuer la lecture de « HTML5 Boilerplate : modèle de base pour coder son site en html5 »

L' optimisation moteurs de recherche, selon Google

Optimiser l'indexation dans les moteurs de recherche, par google
Jolie trouvaille faite sur Google Webmaster Central: Google vient de rendre disponible gratuitement un PDF de 49 pages pleines de bonnes pratiques afin d’optimiser la manière dont votre site sera référencé sur les différents moteurs de recherche – et particulièrement Google. Continuer la lecture de « L' optimisation moteurs de recherche, selon Google »

10/GUI – bureau tactile (concept)

Cette présentation d’un concept d’ OS tactile pour ordinateur de bureau est très impressionnante. Par C. Miller (http://10gui.com/).

L’idée est simple : une main = 5 doigts. I doigt = 1 souris. Efficience = efficience x 10. Ce qui les amène à parler d’ « interaction bandwidth » que l’on pourrait définir par l’ampleur du vocabulaire interactif.

Et justement, les propositions de vocabulaire interactif du système proposé sont bigrement bien imaginées. Continuer la lecture de « 10/GUI – bureau tactile (concept) »

Faire une référence à wikipedia sans interrompre le flux de lecture

Je viens de tomber sur un plugin wordpress très malin, par Matthew Healy: WikiPop. Ce plugin capture les liens pointant vers wikipedia et transforme leur comportement de manière à ce que, ces liens lorsque cliqués, n’ouvrent pas un onglet ou une fenêtre, mais une fenêtre modale à la lightbox, ce qui permet de consulter les informations supplémentaires disponibles sur wikipedia sans pour autant quitter le site. Continuer la lecture de « Faire une référence à wikipedia sans interrompre le flux de lecture »

de l'usage de l'attribut target _blank : ne soyons pas sectaires

Le (petit) monde du web design / web development a une fâcheuse tendance aux précepts dogmatiques, du style: « don’t use table for design, it’s evil », « il faut séparer les données (html) de la présentation (css, images) et de la programmation comportementale (javascript, flash…) », etc. Non pas que ces règles soient de mauvais conseils, que du contraire. Si je disais à un chasseur de ne pas utiliser un couteau de cuisine pour tuer le lapin mais plutôt un couteau de chasse, ce serait un bon conseil. Reste que le couteau de cuisine fonctionnerait (avec une bonne poigne); il ne serait simplement pas le plus approprié. Mais si le contexte le justifie (par exemple, le chasseur est sur une île déserte et que le couteau de cuisine est tout ce qu’il a sous la main), pourquoi devrait-il s’abstenir de manger de la viande? Continuer la lecture de « de l'usage de l'attribut target _blank : ne soyons pas sectaires »