Blog Accessibilité

Saluons l'arrivée de deux nouveaux blogs autour du webdesign, du respect des standard et de l'accessibilité:

• FairyTells, maintenu par Aurélien Lévy, avec qui j'ai eu le plaisir de présenter les Gabarits CSS accessibles. Aurélien commence très bien avec une bonne synthèse sur IE7 et l'accessibiltié.
• Blog Webatou, maintenu par Monique Brunel, qu'on connait par le biais du Webmaster-Hub. Monique nous offre un regard posé avec recul et sérennité sur le webdesign et les standards.

De la diversité nait la richesse, et je suis certain que vos blogs vont y contribuer. Bienvenue à vous !

Des nouvelles du concours Blog et Accessibilité:

• Afutez vos blogs, il ne reste qu'un petit mois avant la clôture des inscriptions ! Note: vous pouvez vous inscrire dès maintenant même si le blog n'est pas complètement prêt.

• Le jury accueille un invité de marque: Olivier Meunier, créateur de DotClear. Vous pouvez évidemment utiliser un autre outil de blog, il n'y a pas de ségragation. Olivier nous apportera un éclairage intéressant pour juger de la créativité déployée dans les blogs.

• Pour finir, quelques pistes pour améliorer le niveau d'accessibilité: voyons cela.

Placer des checks

Mettre en oeuvre un certain nombre de "checks" pour vérifier l'accessibilité au moment de la rédaction. Dans un Dotclear, cela peut se faire simplement à l'aide d'un plugin. Voici quelques idées de vérifications:

• Simple: limiter la taille des titres de billets à 80 caractères. Les titres étant (dans beaucoup de gabarits du moins) des liens, leur intitulé ne doit pas dépasser 80 caractères (critère 6.1).

• Moyen: chaque titre de page devant être unique (critère 8.6), et les titres des billets étant les titres de la page correspondante (balise TITLE), il faut vérifier que les titres des billets sont uniques sur tout le site. L'algorithmique a implémenter est assez simple, il suffit de stocker dans une table de la base de donnée la liste des titres des billets , et de vérifier que le titre du billet en cours de rédaction n'existe pas déjà, et demander une correction le cas échéant.

• Moyen: interdire les liens non explicites comme "ici", "cliquer ici", "en savoir plus", ou "précédent billet" (critère 6.2). Il faut sortir la clé de 12 et coder un peu ici. Cela implique de parser les liens du billet et de demander une correction le cas échéant.

• Moyen: limiter à 80 caractères (critère 6.1) la taille des intitulés de liens à l'intérieur du billet. Si on a déjà de quoi parser les liens d'un billet, ça devrait aller vite. On pourra pousser la perfection jusqu'à modifier le javascript correspondant au bouton d'insertion de lien pour y appliquer cette limitation.

• Chaud chaud: le critère 6.5 nous interdit d'avoir deux liens d'intitulé identique qui pointeraient vers des cibles différentes. Là aussi, il faut vérifier les liens à l'intérieur du billet et faire la vérification. Mais ce n'est pas encore suffisant. Etant donné qu'un blog nous permet de voir la même info à différents endroits (typiquement: page d'accueil, vue par catégorie, vue par mois, vue par jour, résultat de recherche), il faut prévoir aussi ces cas. Pour cela, il faudra stocker dans une table de la base de donnée, pour chaque lien, la liste des pages dans lesquelles il est présent. Une fois cela fait, le check devient simple: vérifier que le triplet intitulé de "lien / URL / page de présence du lien" n'existe pas déjà.

Soigner le gabarit

• Simple: utiliser les gabarits CSS accessibles, ils sont réutilisables c'est le moment !

• Archi-Simple: pour le formulaire de recherche, donner un intitulé explicite au bouton, disons "rechercher" au lieu de "ok" (critère 11.6)

• Simple: toujours dans le formulaire de recherche, relier l'intitulé du champs de recherche et la zone de saisie avec LABEL FOR et ID (critère 11.1)

• Archi-Simple: évincer 10 critères en n'utilisant pas de frame

• Simple: le critère 9.3 nous demande de proposer un plan du site. N'existe-t-il pas un plugin dotclear pour cela ?

• Simple: critère 12.3, proposer un fil d'ariane. Même combat, direction les plugins DotClear !

Aller, à vos clavier et dépassez-vous !

Après mon intervention au DU de Jussieu, j'ai choisi de publier mes supports de cours sous licence Creative Commons CC-BY-SA (au passage, je vous invite à prendre connaissance des conditions de réutilisation d'un document sous CC-BY-SA).

Ces supports de cours ne remplacent évidemment pas le cours lui-même (d'autant plus que la partie orale est importante), mais leur diffusion permet de partager un ensemble de connaissances qui est encore rare sur le net.

Rappel du programme:

• accessibilité et CMS
• accessibilité et Flash
• accessibilité et PDF

Allons-y: télécharchement des supports de cours Accessibilité des CMS, de Flash, des PDF.

La semaine dernière, j'ai eu le plaisir d'intervenir à la première session du DU Accessibilité Numérique de l'UPMC (Jussieu, Paris 6). Il s'agit là (à ma connaissance) du premier diplôme universitaire français sur l'accessibilité numérique. La formation, de près de 100h quand même, donne une véritable connaissance de l'accessibillité et de ses tenants et aboutissants.

La classe a été particulièrement dynamique, attentive et volontaire: un vrai plaisir d'enseigner quoi !

Les sujets que j'ai abordés étaient sympas et corsés juste ce qu'il faut:

• accessibilité et CMS
• accessibilité et Flash
• accessibilité et PDF

Autant dire que la journée a été courte et intense !

Y a t'il des supports de cours ? Ma ben sûr ! Patience ça vient

Edit 09/03/2006: j'ai écorché le nom du DU, son intitulé précis est Accessibilité du Web aux personnes handicapées: enjeux, normes et applications. Merci Pierre pour la remarque

Synthèse des billets de février 2006:

Catégorie Actualité

• Boogie boogie accessible !
• Témoignage d'utilisateur: l'interview de Tanguy Loheac
• Publication des actes du colloque accessibilité du 30/01/2006
• Concours du meilleur blog accessible

Catégorie Aide Technique

• Nouvelles photos libres d'aides techniques
• Gabarits full-CSS accessibles

Catégorie Législation

• Plainte d'un étudiant aveugle contre un site e-commerce

Catégorie Reflexions accessibles

• Accessibilité, mythes et interdits: la vérité vraie !

Catégorie Open-S

• Tempus fugit