"La nature du web est son universalité. Il doit être accessible à toutes les personnes handicapées."

Tim Berners Lee.

Ergonomie

Tout d’abord, j’ai tenté d’apporter au site une ergonomie la plus proche des standards de fait possible en me basant sur l’excellent livre d’Amélie Boucher : Ergonomie WEB. Sans suivre l’ensemble des conseils du livre, j’ai tout de même cherché à le rendre simple à utiliser.

Standards Internet

Ensuite, j’ai travaillé à la conformité de mes pages aux standards du W3C : HTML 5.0, CSS et RSS. Je re-passe les tests à chaque modification.

Augmenter la taille du texte

La taille du texte peut être augmentée ou diminuée par l’utilisateur en utilisant une des méthodes suivantes :

1. Combinaisons de touche "Ctrl +" ou "Ctrl -" sous GNU/Linux ou Win32, ou "Pomme +" et "Pomme -" sous Mac OS,
2. Ctrl" et molette de la souris,
3. Par les menus de navigateur :
   • Firefox / Iceweasel / GNU IceCat : Affichage > Zoom
   • Epiphany : Affichage > Agrandir (Réduire) le texte
   • Galeon : Affichage > Zoom avant (arrière)
   • Google Chrome / Chromium : Zoom
   • Internet Explorer : Affichage > Taille du texte
   • Opéra : Afficher > Zoom
   • Safari : Présentation > Agrandir (Réduire)

Raccourcis clavier

Voici la liste des raccourcis clavier utilisables dans toutes les pages :

• 0 : accueil
• 1 : formulaire de recherche
• 2 : rubrique formations
• 3 : rubrique Certifications LPI
• 4 : rubrique services
• 5 : rubrique à propos
• 6 : formulaire de contact
• 7 : mentions légales
• 8 : plan du site
• 9 : page d’accessibilité (cette page)

Référentiel AccessiWeb

Je cherche à me conformer au référentiel AccessiWeb 2.0. Il n’existe pas pour le moment de guide, comme pour le référentiel 1.1, donc je travaille à partir du guide Accessiweb.

Vous pouvez voir à la fin de cette page l’avancement de la mise en conformité.

Tests d’accessibilité

L’accessibilité des pages est testée avec les outils suivants :

• WAVE ;
• CynthiaSays

Corrections

N’hésitez en aucun cas à m’informer, en utilisant le formulaire de contact, d’erreurs ou d’améliorations à apporter à ce site. Vous me rendrez un grand service !

Avancement

Je me suis contenté d’un premier tour du guide en pointant ce que je devais faire et ce qui m’a l’air correct. C’est mieux que rien !
Voici où j’en suis de mes vérifications :

Critère 1 : images

Les fiches de révision utilisées dans le site, ainsi que les programmes des examens sont généralement des cartes heuristiques (Mind Maps) que je génère avec Freeplane. Le problème, c’est que je les exporte en images qui ne peuvent pas être lues par des malvoyants. Je les exporte en SVG et en PDF texte avec Inkscape. C’est acceptable pour un malvoyant, car on peut zoomer mais inutilisable pour un aveugle.

Critère 2 : cadres

Je n’utilise qu’une balise frame, sur la page concernant politique de confidentialité, pour désactiver le suivi automatique sur piwik.

Critère 3 : couleurs

• dans chaque page, l’information n’est pas donnée uniquement par sa couleur
• la règle précédente est pertinente
• le contraste de chaque page semble suffisant d’après wave, sauf pour l’entête d’accessibilité (c’est volontaire), le caroussel, et le fil d’ariane.

Critère 4 : multimédia

Je n’utilise que très peu de contenu multimedia. Les vidéos sont hébergées sur un service qui semble accessible.

Critère 5 : tableaux

Pas de tableau pour le moment.

Critère 6 : liens

• les liens sont générés par SPIP : chaque lien identique a la même URL
• de même chaque lien a une longueur maximale de 80 caractères (vérifier)
• les titres des liens pour le menu sont plutôt orientés référencement, mais ils me semblent pertinents
• les liens sont identifiés de manière distincte du texte par le style

Critère 7 : code exécutable

Tout le code exécutable du site est le javascript des quelques plugins SPIP que j’ai utilisé. Il est possible d’utiliser le site en désactivant le javascript, même sur un petit terminal (téléphone ou autre) et ça ne gêne pas sa consultation.

Critère 8 : éléments obligatoires

• doctype des pages est présent et valide
• charset présent et valide
• élimination des balises dépréciées
• le code source est valide en fonction du doctype
• l’attribut lang est défini pour chaque page et valide
• chaque page a un titre unique et (normalement) pertinent
• il n’y a pas de changement de langue : l’objectif du site est en français uniquement

Critère 9 : structuration de l’information

• l’utilisation d’un CMS comme SPIP permet que chaque ensemble de page soit toujours structuré de manière identique
• l’information est structurée à en utilisant les titres

  ,

  , etc.

• le plan du site est accessible de chaque page de la même façon
• le moteur de recherche est accessible dans chaque page et de la même façon
• toutes les listes structurées utilisent les balises appropriées

Critère 10 : présentation de l’information

• le site utilise des feuilles de style pour sa présentation
• le site reste consultable sans l’utilisation des feuilles de style
• dans chaque page, l’information reste compréhensible quand les feuilles de style sont désactivées
• l’ordre de tabulation pourrait être amélioré
• les feuilles de style utilisent des valeurs relatives, quand bootstrap le permet...

Critère 11 : formulaires

J’essaie de minimiser les formulaires dans le site :

• le formulaire de recherche
• le formulaire de contact
• le formulaire d’ajout de commentaires

J’ai testé chacun de ces formulaires avec WAVE et ai lancé la validation HTML5.

Critère 12 : navigation

• chaque page utilise un menu de navigation identique dans le code source et toujours situé à la même place
• je dois améliorer les liens de navigation interne, en référençant avec une balise "a" avec l’attribut "href" le menu de navigation et le contenu
• les raccourcis clavier sont présents dans chaque page de manière identique et tous les raccourcis clavier obligatoires sont présents

Critère 13 : consultation

• pour chaque page, l’utilisateur a le contrôle du rafraîchissement : pas d’applet et tout le code est activable ou désactivable au bon vouloir de l’utilisateur
• pas de redirection automatique pour le moment
• pas de liens qui s’ouvrent dans une nouvelle fenêtre
• il y a quelques fichiers téléchargeables, qui sont "accessibles", quand la technologie me permet de le faire simplement.