simplement Nat » accessibilité

16 Pixels pour le corps du texte

Nathanaël Martel — Tue, 15 Nov 2011 21:52:05 +0000

Je fais ici la traduction / résumé de cet article (tous les liens pointent vers des pages en anglais) : 16 Pixels For Body Copy. Anything Less Is A Costly Mistake

Je sais ce que vous pensez : “Il a juste dit 16 pixels ? pour le corps du texte ? Mais c’est énorme ! 12 pixels est idéal et suffisant pour la plupart des sites.”

Je vais essayer de vous convaincre du contraire.

En tant qu’expert en accessibilité Olivier Reichenstein dit dans The 100% Easy-2-Read Standard

16 pixels ce n’est pas énorme. C’est la taille par défaut, affichée par le navigateur. C’est la taille du texte que les navigateurs sont censés afficher…. ça parait énorme au début, mais quand on en a pris l’habitude, on réalise alors pourquoi les fabricants de navigateur choisissent 16 pixels comme taille par défaut.

Je vais maintenant expliquer pourquoi 16 pixels devrait généralement être la taille minimale pour le corps du texte dans les conceptions web moderne.

Vous allez voir que dans la plupart des cas, si vous réalisez un site avec la police entre 10 et 15 pixels, vous coûtez de l’argent à vos clients. Et je vais le prouver.

Lisibilité = Revenu

Si vous réalisez un site pour quelqu’un, même vous même, il y a quelques chances pour que ce soit pour gagner de l’argent !

Quoi qu’il en soit, vous faites des affaires et au final vous cherchez un retour sur investissement. Cela doit remplir un but de revenu.

Ainsi, chaque élément devrait être conçu pour réaliser ce but. Même le texte. Surtout le texte, car le texte est ce qui convainc les visiteurs de faire ce que vous attendez de lui sur votre site.

Pensez y. Si vous n’expliquez par au gens ce qu’ils doivent faire ni pourquoi, ils ne le feront certainement pas. Le meilleur moyen est le texte. Cela implique de lire.

Choses importante à propose de la lecture

Il y a certaines choses à savoir qui sont essentielles, comme les lecteurs, la lisibilité et la compréhension. C’est là toute la question. Si personne ne veut lire, ou ne peut lire ou ne peut comprendre, alors quel est l’intérêt de le faire ?

à 40 ans, seulement la moitié de la lumière arrive jusqu’à la rétine. à 60 ans, ce n’est plus que 20%.
Environ 9% des américains ont une déficience visuelle, ce qui signifie que leur vision n’est pas complètement corrigée par des lunettes.
La distance à laquelle nous lisons les lettres influence à la fois la capacité et la vitesse de lecture. Plus la distance augmente, plus il est difficile de lire et de comprendre. Avez-vous vu des affiches publicitaire récemment ?
La plupart des gens, quand il sont installés confortablement, sont à environ 50 cm à 60 cm de l’écran de leur ordinateur. En fait la distance recommandée est 70cm, car c’est là que la convergence est suffisamment faible pour éviter la fatigue oculaire.
un texte de 16 pixel sur un écran, c’est à peu près la même taille qu’un texte de livre ou de magazine. Cela est du à la distance de lecture. Comme nous lisons des livres de relativement prêt - parfois quelques centimètres - ils sont typiquement définis à 10 points. Si vous voulez les lire à la distance d’une longueur de bras, vous voulez au moins 12 points, ce qui est à peu près la même taille que 16 pixel sur la plupart des écrans :
texte de 16 pixels affiché sur écran de 24 pouces, à côté d'un texte de 12 points imprimé sur papier.
En 2005, une étude à propos des problèmes de web design, montrait qu’une mauvaise police de caractère avait deux fois plus de vote que le problème suivant obtenant tout de même les complaintes de deux tiers des votants à propos de la petite taille.

(…)

16 pixel n’est pas gros

Notre goût et préférence esthétique en tant que designer sont bien plus malléables que l’on croit. ce que nous trouvons beau est largement le résultat de ce que nous avons vu ailleurs.

(…)

texte original : 16 Pixels For Body Copy. Anything Less Is A Costly Mistake

conférence pour développeur web

Nathanaël Martel — Fri, 05 Mar 2010 13:02:10 +0000

Ok je rentre du Symfony Live, une des conférences majeures du monde PHP, mais je me rend compte que j’ai oublié de parler de Paris Web, la conférence incontournable de tous les acteurs du web.

Je n’ai pas pu y aller en 2009, mais heureusement j’ai eu le droit à une séance de rattrapage grâce au vidéo, alors je vous fait un petit aperçu rapide de ce que j’ai aimé ou non.

Déjà la conférence qui décris le mieux mon métier c’est celle qui parle de l’intégration : Intégrateurs, montez au front ! Stephane Deschamps insiste sur le fait que c’est un métier à part entière, qu’on le nome “intégrateur” ou “frontend developer”.

Une conférence très intéressante également au sujet de l’interaction entre graphiste et développeurs : Webdesigner, l’homme qui parlait à l’oreille des intégrateur. Si l’empathie est pour vous la reine des vertus, alors cette conférence est faite pour vous : la partie où Gilles Vauvarin énonce ce que le développeur déteste chez les graphiste et réciproquement est absolument géniale.

La conférence du Daniel Glazman nous parle des différents web et donc de comment obtenir un web unifié (Un seul Web). A mettre en parallèle avec l’incontournable table ronde sur le web mobile.

Parmis les conférences que j’ai également particulièrement apprécié, même si elle me concerne moins :

Référencement & Standards Web : La même destination où l’on aborde les microformats.
De l’ergonomie pour mon e-commerce truffer de conseil et astuce à destination des e-commerce.
CSS3: Future Style Now pour voir ce que l’avenir nous réserve tout comme Les nouveaux standards du web et leur implémentation avec l’extraordinaire Tristan Nitot.

Toutes les conférences sont disponible en vidéo ici : http://www.dailymotion.com/playlist/x15sk9_parisweb_paris-web-2009

http://www.dailymotion.com/video/xbcfgw_int%C3%A9grateurs-montez-au-front-st%C3%A9pha_tech

Coûts et bénéfices de l'accessibilité

Nathanaël Martel — Thu, 23 Apr 2009 17:01:22 +0000

Voici un résumé de l’excelent article de temesis :

Coûts prévisibles

Formation et communication
Conseil et assistance
Temps de développement et de mise en conformité
Recettes, audit
Déclaration de conformité et/ou labellisation

Bénéfices à attendre

Amélioration du référencement
Optimisation de la taille des pages
Augmentation de la cible et prise en compte des contextes de navigation
Possibilité de communiquer sur l’accessibilité et avantage concurrentiel
Réutilisabilité du code, optimisation des processus
Indépendance vis-à-vis des prestataires et normalisation du travail avec les partenaires

facteur

WCAG Robustesse

Nathanaël Martel — Wed, 22 Apr 2009 21:11:09 +0000

4. Assurrer la compatibilité avec un maximum de navigateur.

Les erreurs significative de HTML / XHTML / CSS sont évité grâce à l’emplois du validateur W3C
Les éléments et attributs HTML sont utilisés correctement et à bonne escient.

C’est curieux de conclure ce document par la base de la base ! Alors c’est claire, l’élément table sert à présenter des données tabulées et non à faire de la mise en forme, les formulaires sont utilisé avec des label pour chaque input, un fieldset… la base du web sémantique quoi !

WebAIM’s WCAG 2.0 Check (en) – Web Content Accessibility Guidelines (WCAG) 2.0 (en)

cactus

WCAG Aide à la saisie

Nathanaël Martel — Thu, 09 Apr 2009 19:58:54 +0000

3.3. Assistance à la saisie : aider les utilisateurs et éviter les erreurs.

Lorsqu’une erreur est detecté, l’élément à la source de l’érreur est identifié et l’erreur décrite textuellement à l’utilisateur.
Instruction et label sont fournit quand le contenu requiert une saisie.
Des sugestions à la correction des erreurs sont fourni. [AA]
Les pages demandant la saisie de données légale ou financière permettent de vérifier, d’annuler et de valider ces données. [AA]
Une aide contextuelle est disponible. [AAA]
Les pages demandant la saisie de données permettent de vérifier, d’annuler et de valider ces données. [AAA]

Lors de développement d’appplications complexe, les framework utilisés permettent de réaliser tout cela facilement pour ne pas dire automatiquement. Le problème sera plutôt pour les petits sites où un formulaire isolé est souvent fait rapidement en oubliant les règles de l’art.

WebAIM’s WCAG 2.0 Check (en) – Web Content Accessibility Guidelines (WCAG) 2.0 (en)

Question d'échelle

WCAG Prévisible

Nathanaël Martel — Tue, 07 Apr 2009 19:43:18 +0000

3.2. Prévisible: Faire apparaître les pages Web et les faire fonctionner de manière prévisible

La page n’est pas modifié quand un élément de la page reçoit le focus.
La page n’est pas modifié quand l’utilisateur interagit avec un contrôle.
Les liens de navigation qui se répètent sur les pages web ne changent pas d’ordre d’une page à l’autre. [AA]
Les éléments qui ont la même fonctionnalité sur plusieurs pages web sont toujours identifiés de la même manière. Par exemple, un champ de recherche situé en haut du site doit toujours être identifié de la même façon. [AA]
Les changements sur une page sont déclenchés par l’utilisateur, sinon un mécanisme est prévu pour les désactiver. [AAA]

Il s’agit ici de limiter les comportements “bizare” de certaines pages. Pour que les internautes s’y retrouvent, il est préférable d’utiliser des mécanismes courant (que l’utilisateur à l’habitude) et fiable (qui fonctionnent toujours).

WebAIM’s WCAG 2.0 Check (en) – Web Content Accessibility Guidelines (WCAG) 2.0 (en)

Question d'échelle

WCAG Compréhension

Nathanaël Martel — Mon, 06 Apr 2009 19:49:18 +0000

3.1. Le texte est lisible et compréhensible

La langue de la page est identifiée à l’aide de l’attribut HTML lang par exemple.
Le cas échéant, si une autre langue est utilisé, elle est identifié. [AA]
Les mots ambiguë, inconnus ou utilisés d’une manière très spécifique sont définies par le texte adjacent, une liste de définitions, un glossaire, ou autre méthode appropriée. [AAA]
Les abbréviations sont systématiquement définit la première fois qu’elles sont utilisé en utilisant l’élément “abbr” ou un lien vers une définition ou glossaire. [AAA]
Si le texte n’écéssite une capacité suppérieur à neuf année d’étude (secondaire), alors une alternative en dessous de ce niveau est donné. [AAA]
Si la prononciation d’un mot est essentiel à sa compréhension, sa prononciation est fourni immédiatement après le mot ou par l’intermédiaire d’un lien ou d’un glossaire. [AAA]

On entre ici dans le contenu, des rêgles qu’il faut énoncé lors de l’écriture du site. Si elles paraissent exigente, elles vont surtout permettre de rendre le contenu compréhensible à un plus grand nombre.

WebAIM’s WCAG 2.0 Check (en) – Web Content Accessibility Guidelines (WCAG) 2.0 (en)

Coin et recoin

WCAG Trouver le contenu

Nathanaël Martel — Fri, 03 Apr 2009 20:14:08 +0000

2.4. Fournir les moyens d’aider les utilisateurs à naviguer, trouver le contenu et s’orienter.

Un méchanisme est fourni pour sauter les morceaux de contenu répétitif (par exemple le menu).
Le titre existe de manière descriptive et informative.
La navigation (ordre des liens, éléments de formulaire…) est logique, intuitive et linéaire.
La cible de chaque lien peut être déterminée à partir du texte de lien seul ou du texte de lien et son contexte.
Les liens ayant le même texte et pointant vers des endroits différents sont aisément diférentiable.
Au moins deux méthodes sont disponible pour accéder à une page. [AA]
Les titres et “labels” de formulaire ainsi que les contrôles sont descriptif et informatif. Ils ne sont pas répétitif (par exemple “lire la suite”) sauf si la structure prévoit un moyen adéquat de différenciation. [AA]
L’élément de la page qui a le focus du clavier est visible : si vous tabulez dans la page, vous voyez où vous êtes. [AA]
Si une page web fait partie d’une séquence, une indication de la page en cours est fourni par exemple avec un fil d’arianne ou l’épate de la page courante. [AAA]
La cible de chaque lien peut être déterminée à partir du texte de lien seul. [AAA]
Les liens ayant le même texte et pointent vers le même endroits. [AAA]
Les sections individuelles sont réalisés avec des titres. [AAA]

L’idée est de faciliter la vie à l’utilisateur, rien de plus. A l’heure ou l’ont passe quelques secondes sur un site, disposer le contenu de tel sorte qu’il soit facile à trouver est essentiel. Un peu d’empathie vous permettra de savoir ce que cherche l’internaute et ainsi de lui fournir.

WebAIM’s WCAG 2.0 Check (en) – Web Content Accessibility Guidelines (WCAG) 2.0 (en)

Nice

WCAG Convulsion

Nathanaël Martel — Thu, 02 Apr 2009 20:26:48 +0000

2.3. Ne pas concevoir des contenus d’une manière qui est connu pour provoquer des convulsions.

Pas de contenu de la page clignotant plus de 3 fois par seconde sauf si…
Pas de contenu de la page clignotant plus de 3 fois par seconde. [AAA]

Juste un peu de respect pour l’internaute.

WebAIM’s WCAG 2.0 Check (en) – Web Content Accessibility Guidelines (WCAG) 2.0 (en)

Attache

WCAG Contraintes temporel

Nathanaël Martel — Thu, 02 Apr 2009 20:01:46 +0000

2.2. Fournir aux utilisateurs le temps de lire et d’utiliser le contenu.

Si une page ou une application a une limite dans le temps, celle-ci laisse la possibilité à l’utilisateur de la désactiver, de l’ajuster ou de l’étendre sauf pour les événements en temps réél comme les enchaires où le délais est requis ou si la limite est supérieur à 20h.
Tout contenu qui bouge, clignotte ou défile pendant plus de 5 secondes peut être mis en pause, arrété ou masqué par l’utilisateur.
Tout contenu mise à jour de quelques manières que ce soit peut être mis en pause, arrété ou masqué par l’utilisateur.
Le contenu n’a pas de contrainte temporel. [AAA]
Interruptions (alertes, mises à jour de la page, etc) peuvent être reportées ou supprimées par l’utilisateur. [AAA]
Si une session d’authentification expire, l’utilisateur peut authentifier de nouveau et de poursuivre l’activité sans perdre toutes les données de la page en cours. [AAA]

Bref, rien de temporel de plus qu’un avertissement… La dernière remarques est forte intéressante et pas toujours facile à mettre en place.

WebAIM’s WCAG 2.0 Check (en) – Web Content Accessibility Guidelines (WCAG) 2.0 (en)

Bateau