simplement Nat » WCAG

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 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

WCAG du texte et des contrastes

Nathanaël Martel — Tue, 31 Mar 2009 21:29:20 +0000

1.4. Faciliter l’accès des utilisateurs à voir et à entendre le contenu, notamment en distinguant le premier plan et l’arrière-plan.

La couleurs n’est pas le seul moyen d’identification d’un message d’information sauf si le contraste entre ces couleurs est suffisant (3:1).
Un mécanisme est prévu pour arrêter, mettre en pause, ou régler le volume pour l’audio qui se joue automatiquement sur une page pour plus de 3 secondes.
Texte et images de texte ont un contraste élevé (3:1 pour les gros textes et 4.5:1 sinon). [AA]
La page est lisible et fonctionnel lorsque la taille du texte est doublé. [AA]
Si la même présentation visuelle peut être faite en utilisant du texte, une image n’est pas utilisée pour présenter ce texte. [AA]
Texte et images de texte ont un contraste élevé (3:1 pour les gros textes et 4.5:1 sinon). [AAA]
Les bandes audio n’ont qu’un bruit de fond très faible de sorte que le discours est facile à distinguer. [AAA]
Les blocs de texte [AAA] :
- ne font pas plus 80 caractères de large
- ne sont pas pleinement justifié
- ont un interlignage suffisant (au moins la moitié de la hauteur) et un espace entre les paragraphes suffisant (au moins 1,5 fois l’espace entre les lignes)
- ont une couleur de premier plan et d’arrière plan définit
- ne nécessitent pas de défilement horizontale si la taille du texte est doublé.
Le texte utilisé dans une image ne véhicule pas de contenu sauf s’il ne peut être présenté avec du texte seul (schéma). [AAA]

L’esthétisme va en prendre un coup ! Il est clair que l’ont veut favoriser le texte, médium accessible universellement. Le seul problème c’est que ce n’est pas compatible avec l’usage de communication et de marketing que l’on veut en faire de l’internet ! Heureusement d’autres usages existent comme par exemple Wikipédia.

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

Port de Nice

WCAG contenu adaptable

Nathanaël Martel — Sat, 28 Mar 2009 10:14:23 +0000

1.3 – Créer le contenu qui peut être présenté de différentes façons sans perte d’information

Un balisage sémantique est utilisé. Pour rappel :
- Hiérarchisation : h1, h2, h3…
- Listes : ul, ol, li
- Emphase : strong, em, code, abbr, blockquote…
- Tableau pour les données tabulaire uniquement.
- Utilisation de label pour les formulaires.
Le code se déroule d’une façon logique, notamment les éléments sont séquencé correctement.
Le contenu ne fait pas allusion à des éléments sensoriel du type : le bouton à côté, la colonne de droite, la forme, la taille, la couleur…

Le printemps revient

La base. En résumé, il faut penser que l’on ne peut garantir la forme, alors il faut que le fond est des bases solides. Ainsi il faut dissociez le fond de la forme. Je devrais peut-être l’afficher dans mon bureau, pour mes collègues….

Personnellement je n’utilise pas d’éditeur wysiwyg pour créer des pages Web, ce qui m’oblige à vérifier ces points. Cependant n’intervenant que rarement à l’intégration du contenu, ces points ne sont pas forcément respecté. Pour les inciter, je met en place dans une page de démonstration contenant le plus d’exemple possible tiré des maquettes graphiques ou de ce qui ne s’y trouve pas et que l’on pourrait avoir besoin par la suite. Comme souvent, on commence un travail proprement et l’on finit dans la précipitation…

Astuce : le point de contrôle simple, est de retirer la feuille de style ( Affichage -> Style de la page -> Aucun style ), si le contenu est toujours accessible, c’est gagné ! Notez également que l’extension Firefox SenSEO permet de vérifier quelques un de ces points

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

WCAG média temporel

Nathanaël Martel — Fri, 27 Mar 2009 09:00:45 +0000

1.2 – Fournir un alternatif à tous les contenus qui évoluent dans le temps.

Un texte de transcription est prévu pour les contenus audio pré-enregistré.
Un texte de transcription et/ou un alternatif audio est prévu pour les contenus vidéo pré-enregistré.
Des sous-titre synchronisés sont fourni pour les vidéos pré-enregistré.
Un alternatif audio est fourni et synchronisé avec le contenu vidéo.
Des sous-titres synchronisés sont fourni pour tous les contenus vivant (audio ou vidéo). [AA]
Un alternatif audio est fourni et synchronisé avec une vidéo vivante. (Requis uniquement si la vidéo contient des informations visuelles.). [AA]
Une vidéo en langage des signes est fourni pour toutes les média qui contiennent du son. [AAA]
Si la vidéo ne permet pas d’alternatif sonore due au manque de temps mort dans la vidéo, une version alternative avec des pauses qui permettent une description sonore est fourni. [AAA]
Une transcription est fourni pour tous les media pré-enregistré qui possède une bande vidéo. [AAA]
Une transcription est fourni pour tous les media audio même vivant. [AAA]

Choux

Le W3C ne rigole pas avec la vidéo et l’audio ! Ce sont des recommendations assez difficile à mettre en place et qui demande donc une certaine expertise, une charge de travail importante et donc un coût non négligeable. Le plus simple : ne pas en utiliser… pas facile, car cela reste des media très percutant.

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