simplement Nat » accessibilité

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

WCAG Accessibilité au clavier

Nathanaël Martel — Wed, 01 Apr 2009 20:22:03 +0000

2.1. Pour toutes les fonctionnalités disponibles à partir d’un clavier.

Toutes les fonctionnalités de la pages sont disponible avec le clavier, à moins que ce ne soit techniquement impossible (par exemple dessin).
Les raccourcis clavier de la page n’entrent pas en conflit avec les raccourcis du navigateur ou de lecteur d’écran (les accesskey ne sont pas recommandés).
L’utilisateur peut naviguer sur tous les éléments de la page en utilisant uniquement le clavier : le focus du clavier n’est jamais bloqué ou coincé à un certain élément de la page.
Toutes les fonctionnalités de la page sont disponible en utilisant le clavier. [AAA]

Rien de bien difficile, quoi qu’en fait dès que le site devient un peu complexe, que le framework est mal choisie, cela n’est plus vérifié. En fait, rendre accessible au clavier se fait presque tout seul, le problème serait plutôt de les rendre “pratique”.

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

Fleure