Je reprends mon cheval de bataille ...
Je fais suite aux différents méls postés sur le sujet
accessibilté/compatibilité des contenus WAI/W3C/Braillenet .
Et en particulier, la synthèse posté par Aurélien :
http://www.uzine.net/spip_contrib/ecrire/articles.php3?id_article=174
Dont je copie-colle :
Les problèmes du code généré par spip
1) Les problèmes majeurs rencontrés dans les pages générées par spip :
a.. Mauvaise imbrication des tables, des intertitres <h3> et des listes :
ces éléments sont encadrés de balises <p class="spip></p>, ce n'est pas
conforme.
b.. Les balises <img>, <br>, <input>, <hr>, <embed>., ne sont pas
toujours bien fermées
c.. hspace et vspace sont des attributs d'images non valides, ainsi
qu'align
d.. Mise en forme : le gras généré par {{texte gras}} en code spip est un
<b>texte gras</b>, au lieu de <strong>texte très appuyé</strong>... De même
{texte italique} génère <i>texte italique</i> dans spip, à la place de
<em>texte appuyé</em>.
e.. Pour les petits éléments de contenu (Descriptif, Notes, Forums) il
arrive que les paragraphes soient absents, ou partiellement générés.
f.. Au niveau des liens hypertexte : l'attribut title n'est pas complété
g.. L'attribut alt= n'est pas complété lors de l'insertion des logos
h.. Problème lors de l'inclusion de documents
2) Les tableaux générés par spip
a.. Les attributs summary ne sont pas complété dans les balises <table>,
il faut trouver une astuce pour compléter cette attibut dans le cas de
tableau de données.
b.. les balises <caption> ne sont pas utilisées
c.. La première ligne des tableaux est générée avec des balises <td> à
lieu de balises <th>
d.. Il faut placer l'attribut id= dans les balises <th>. Ex : <th id=''
entete1''>En tete1</th>
e.. Il faut placer l'attribut header= dans les balises <td>.
3) Les formulaires générés par spip
a.. Il faut uniformiser les balises (majuscule, minuscule.)
b.. Fermer les balises <input />
c.. Placer les attributs id= et name=
d.. Utiliser les balises <fieldset>, <Legend>, <label>
e.. L'attribut wrap des <textarea> est déprécié
Recommandations pour la création des squelettes
Conforme aux recommandations W3C / WAI / Braillenet
Les images :
a.. Tous les éléments graphiques doivent posséder une alternative. Cette
alternative doit de plus être pertinente.
b.. Pour les images Map, l'image map elle-même, et chacune des zones
sensibles de cette image doivent posséder une alternative propre fournie par
l'attribut alt. Cette alternative doit être pertinente.
(Les zones d'une image map doivent être codées juste après la déclaration
de cette image.)
c.. Il est conseillé d'utiliser des textes mis en forme par une feuille de
style plutôt que des images contenant du texte.
d.. Lors de l'utilisation de textes dans une image, l'alternative à cette
image doit retranscrire les textes présents dans l'image.
e.. Il est conseillé de commenter par ALT="", les éléments de décorations
(puces, pixels de calage .).
f.. Lorsqu'une image est utilisée comme lien, le contenu de l'attribut ALT
doit donner la fonction du lien et non la description de l'image.
g.. La somme des images d'une page ne doit pas gêner la lisibilité de
celle-ci.
h.. Plutôt que d'utiliser des images de grande taille, préférer une image
réduite avec un lien menant vers l'image avec son format de départ.
Les cadres :
a.. Chaque cadre de la page doit être nommé et l'attribut NAME doit
décrire la fonction du cadre et non pas sa position géographique.
b.. Pour décrire la fonction des cadres utiliser l'attribut TITLE.
c.. Prévoir une alternative à l'utilisation des cadres (Balise NOFRAME) et
retranscrire dans cette alternative l'ensemble des informations fournies
dans les cadres.
d.. Le nombre de cadres dans une page ne doit pas dépasser 3.
e.. Laisser le choix à l'utilisateur de pouvoir faire défiler le contenu d
'un cadre (Scrolling= « auto »)
Couleurs/visuel :
a.. Ne pas utiliser la couleur pour transmettre de l'information, si c'est
le cas, vérifier que lorsqu'on désactive les couleurs, l'information est
toujours accessible.
b.. Préférer l'utilisation de couleurs très contrastées.
Multimédia :
a.. Lors de l'utilisation de support multimédia, assurez-vous de la
présence d'une alternative à celui ci.
b.. Lors de l'utilisation d'un support multimédia toujours le synchroniser
avec son alternative. (Vidéo et son par exemple)
Les Tableaux :
a.. Utiliser l'attribut summary pour décrire plus longuement le rôle et le
fonctionnement du tableau (surtout pour les tableaux de données).
Pour les tableaux de données :
a.. Utiliser des balises d'en tête de colonne. (TH)
b.. Utiliser les attributs HEADER et ID pour spécifier les relations entre
les cellules et leur en-tête.
c.. Utiliser la balise CAPTION pour donner un titre au tableau.
Pour les tableaux de mise en forme :
a.. Ordonner les informations de manière linéaire. Vérifier que les
informations apparaissent dans le même ordre lorsque l'on déstructure les
tableaux.
Liens :
a.. Les intitulés de liens doivent être courts, explicites et lisibles
hors contexte.
b.. Les liens qui ont un même intitulé doivent avoir la même page de
destination.
c.. Quant cela est nécessaire utiliser l'attribut TITLE pour une plus
longue description du lien. Par exemple, lorsque plusieurs liens ont un
intitulé identique et mènent vers des destinations différentes (exemple lire
l'article dans les sites de presse).
d.. Pour les liens les plus importants du site, associer des raccourcis
clavier.
e.. Ne pas dépasser plus de 9 rubriques pour un menu.
f.. Ne pas dépasser 40 liens actifs dans une même page.
g.. Pour faciliter la navigation, utiliser des liens de navigation
internes à la page (pixels transparents, lien vers la page d'accueil...)
Applet, JavaScript, Flash :
a.. Lors de l'utilisation de scripts, prévoir une alternative qui reprend
l'ensemble des informations fournies par l'intermédiaire du script.
b.. Aucune action ne doit être dépendante d'un périphérique (ex :
OnMouseOver). Prévoir une alternative à l'utilisation de ce périphérique.
c.. Vérifier qu'il n'y a aucune perte d'informations lorsque l'on
désactive les scripts.
Langue/Validation :
a.. La balise DOCTYPE doit être présente pour spécifier quel type de
langage est utilisé dans la page.
b.. La langue du document doit être spécifiée dans la balise HTML.
c.. Annoncer tout changement de langue dans la page par la balise SPAN
LANG="".
d.. Lors de l'utilisation de sigles ou d'abréviations, expliquer la
signification de ceux-ci lorsqu'ils sont présents pour la première fois dans
le document.
e.. La balise ACCRONYM doit correspondre à l'explication exacte du sigle
utilisé.
Navigation :
a.. Utiliser les balises Hn pour donner les informations concernant la
structure des pages et cela de manière cohérente et non pour de la mise en
page.
b.. Donner un titre à chacune des pages.
c.. Les informations importantes de la page doivent être rapidement
accessibles.
d.. Prévoir, lorsque cela est nécessaire, un plan du site, une aide et un
moteur de recherche.
e.. Dans le cas de l'utilisation d'un moteur de recherche, d'un plan du
site ou d'une aide, prévoir un moyen de le rendre rapidement accessible dans
la page.
f.. Donner un titre UNIQUE et EXPLICITE à chacune des pages
Mise en forme :
a.. Utiliser des feuilles de styles pour séparer le contenu de la
présentation dans la page.
b.. Vérifier que lorsque les feuilles de styles sont désactivées, le
contenu de la page est toujours accessible.
c.. Vérifier que lorsque les feuilles de styles sont désactivées, l'ordre
d'apparition des divisions est identique.
d.. Ne pas coder d'informations de mise en page dans le code source (FONT,
B, I.).
e.. Préférer l'utilisation de valeurs relatives pour spécifier la taille
des tableaux, images...
f.. Dans le cas de l'utilisation de valeurs absolues, vérifier que les
informations restent accessibles, quelles que soient les plates-formes
utilisées (écran, navigateurs .).
g.. Préférer l'utilisation de polices sans serif (ARIAL, VERDANA .).
h.. Ne pas utiliser plus de trois polices de caractères différentes dans
la même page.
Formulaires :
a.. Utiliser la balise LABEL pour associer un texte et son champ INPUT.
b.. Utiliser les balises FIELDSET et LEGEND pour structurer les
formulaires.
c.. Dans les champs de saisie, utiliser un texte explicatif pour préciser
à l'utilisateur la fonction de ce champ.
d.. Organiser les informations dans un ordre logique dans les listes de
choix (par ordre alphabétique par exemple).
e.. Le commentaire du bouton Submit doit être explicite.
f.. Vérifier l'accessibilité du contrôle de saisie de votre formulaire.
(Scripts, champs obligatoires .)
g.. L'espace entre les labels et les champs textes associés doit être
suffisamment réduit.
h.. Les champs textes associés aux champs de formulaires doivent être
explicites et lisibles hors contexte (éviter «faites votre choix » plusieurs
fois dans le même formulaire)
Ergonomie :
a.. La navigation dans la page doit être claire et cohérente.
b.. Prévoir l'utilisation de barres de navigations pour faciliter la
navigation dans le site.
c.. La structure de l'ensemble des pages doit être homogène.
d.. Le menu de navigation doit être placé à la même position dans l'
ensemble du site.
e.. Lors de regroupements de liens, placer des caractères de séparation
entre chacun des liens actifs.
f.. Pour une facilité de téléchargement, une page ne doit pas dépasser 50
Ko.
g.. Lors de l'utilisation de raccourcis clavier, vérifier leur présence
dans l'ensemble des pages du site et vérifier qu'ils sont identiques d'une
page à l'autre.
Divers :
a.. Ne pas faire clignoter ou défiler des informations dans la page.
b.. Ne pas utiliser de rafraîchissement automatique de la page.
c.. Prévenir l'utilisateur lorsqu'un lien ouvre une nouvelle fenêtre.
d.. Ne pas utiliser de scripts lors de l'ouverture de nouvelles fenêtres.
e.. Lors d'un téléchargement de fichiers, fournir des informations
complémentaires sur le fichier (Format, taille en octets...)
f.. Lors d'un téléchargement de fichiers au format PDF, par exemple,
prévoir une alternative (RTF, HTML, DOC... )
g.. Utiliser un langage simple et clair dans vos pages.
h.. Ne pas utiliser de scripts pour effectuer une redirection automatique.
i.. Ne pas utiliser des éléments de code inappropriés pour faire de la
présentation (BLOCKQUOTE, UL pour l'indentation, par exemple).
j.. Ne pas utiliser des majuscules pour de la mise en forme.
k.. Séparer chaque caractère d'un sigle par un point.
Qui est intéressé par cette problématique ?
--neoram
