Formulaires : quand les CSS 3 vous changent la vie

Souvenez-vous, l’an dernier j’avais rédigé un billet sur les apports de CSS 3 pour les formulaires (voir ce billet ici : Des formulaires standardisés) et notamment sur les pseudo-classes comme :valid, :invalid ou encore :required. Le Gou Blog vient de nous publier un billet sur le même thème qui tombe à pic : Un peu de CSS3 pour les formulaires…. L’auteur nous parle entre autre de pseudo-classes comme :disabled, :focus ou encore :checked.

Pourquoi cet article tombe à pic ? Tout simplement parce qu’à l’époque où j’ai rédigé mon billet, toutes ces pseudo-classes étaient encore de la science-fiction, alors qu’avec la sortie de Firefox 1.5 et autres Opera 8.5, ces pseudo-classes peuvent enfin être exploitées. Si vous n’êtes pas convaincu, je vous invite à regarder le formulaire test du sieur Gou ou encore à admirer cette superbe mise en page à deux colonnes réalisée bien entendu à l’aide de propriétés CSS 3.

Au cas où vous ne l’auriez pas compris, l’utilité de ces pseudo-classes est de standardiser la façon de concevoir un formulaire en proposant du code toujours plus limpide et un comportement uniforme.

Accessibilité et confort de lecture

Je suis surpris de l’absence de réaction dans la blogosphère française du dernier édito de Jakob Nielsen : Accessibility Is Not Enough. L’article est pourtant on ne peut plus équivoque : se conformer aux critères d’accessibilité est un indiscutable progrès mais n’est pas suffisant pour s’assurer que les non-voyants, et surtout les mal-voyants puissent utiliser un site ou service en ligne dans de bonnes conditions.

Dans ce cadre là, je souhaiterais vous parler d’une solution développée par mon agence qui pourrait apporter un début de réponse : Confort de Lecture. Il s’agit d’une solution complémentaire à une démarche d’accessibilité qui améliore la prise en main et l’utilisation d’un site.

Concrètement, à partir d’un site respectant un minimum de critères d’accessibilité (l’équivalent du niveau bronze), la solution Confort de Lecture agit comme un filtre. L’internaute définit ses paramètres d’utilisation (couleur de fond d’écran et des caractères, taille des polices…). L’ensemble des contenus adoptent les paramètres de mise en forme définis mais surtout l’intégralité du système de navigation est repensé pour correspondre effectivement aux mode de consultation des personnes non-voyantes ou mal-voyante. Ainsi navigation par le contenu, fil d’ariane, retour au sommaire en fin d’article sont les principaux éléments qui conditionnent une grande facilité d’usage pour les personnes en situation de handicap visuel mais aussi pour beaucoup d’autres situations de consultation du site (navigation via un téléphone mobile, un PDA…).

Cette solution a déjà été mise en oeuvre sur le portail HandicapZero et sur des sites de collectivités locales. Pour plus d’informations, vous pouvez également allez voir cet article : Lnet et le confort de lecture.

Je ne détaillerais pas d’avantage la plue-value de cette solution pour ne pas paraître partial, mais il me semble clair qu’elle a le mérite de répondre en partie aux interrogations de Jakob Nielsen en appliquant certains principes d’utilisabilité à l’accessibilité.

Et puisque que l’on parle d’accessibilité, qui s’est penché sur la dernière version des Web Content Accessibility Guidelines 2.0 ?