Accessibilité au site

Attention, cette page ne s'applique pas actuellement aux forums de discussion du site.

1. Respect des standards
2. Les clefs d'accés au clavier
3. Règles d'accessibilité
4. Les styles alternatifs
5. Les liens relationnels
6. Site conforme cherche navigateur conforme pour symbiose totale

Respect des standards

• phpCodeur respecte désormais les recommandations du W3C concernant le XHTML 1.0 Strict
• La présentation des pages est réalisée entièrement à l'aide des feuilles de style CSS de niveau 2
• Les pages sont bien formées et construites de façon sémantique ^[1]
• Les divers fils rss mis à disposition respectent les normes rss 1.0

La validité de chaque page peut être vérifiée grâce aux liens de validation (sous forme d'image si les images s'affichent dans votre navigateur), toutefois, le validateur de feuilles de style semble boguer à cause du jeu de caractère actuel de phpCodeur (iso-8859-15).

Les clefs d'accés au clavier

Les principaux éléments de phpCodeur (liens du menu principal et moteur de recherche) sont accessibles via des raccourcis claviers (Attention, pour les raccourcis numériques, il faut utiliser ceux accessibles via la touche maj, pas ceux du pavé numérique). L'utilisation de ces clefs d'accés dépend de votre système d'exploitation :

• Sous Windows, utilisez la touche alt (ainsi que maj si la clef est numérique) en combinaison avec la clef associée à un élément
• Sous Macintosh, utilisez la touche ctrl en combinaison avec la clef associée à un élément
• Sous Linux, mhh…, je n'en ai aucune idée, si quelqu'un sait, qu'il prenne cinq minutes pour me contacter :)

Voici les éléments actuellement accessibles à l'aide des raccourcis claviers :

• La présente page est associée à la touche 0
• Pour accéder à la page d'accueil du site, usez de la touche 1
• Pour accéder directement au contenu, utilisez la touche 2
• La rubrique des nouvelles s'est vue attribuer la touche 3
• Le moteur de recherche est accessible via la touche 4
• Pour venir discuter sur les forums de discussion du site, tapotez la touche 5
• La page d'informations sur le site peut être consultée avec la touche 6
• Les menus sont accessibles avec la touche 7
• La politique de confidentialité du site est accessible avec touche 8
• Pour nous contacter, faites jouer la touche 9
• Et enfin, si vous consultez le manuel en ligne, utilisez les touches P ou N pour vous rendre respectivement à la page précédente ou suivante du manuel

Règles d'accessibilité

Actuellement, seules certaines des règles d'accessibilité sont respectées, notamment :

• Identification de la langue principale de la page, et de celle des citations, acronymes, abréviations et autres éléments le nécessitant (lorsque la langue de l'élément n'est pas la même que celle du bloc parent)
• Des titres significatifs sont fournis aux différentes pages
• Le contenu apparait avant le menu dans la structure de la page
• Les liens sont mis en évidence dans le texte, réels (pas de trifouillage en javascript), ne cassent pas la navigation (pas de target _blank) et sont affublés en général d'un titre ^[2]
• Le javascript est utilisé avec parcimonie et en fournissant le cas échéant une solution de remplacement
• Les éventuels acronymes et abréviations présents dans le texte sont indiqués comme tel (balises acronym et abbr) et leur signification est indiquée au moins une fois par paragraphe à l'aide de l'attribut title
• Les rares tableaux utilisés le sont pour des données tabulaires, avec un titre (balise caption), des entêtes (balise th) et un résumé (attribut summary de la balise table)
• Une alternative texte est fournie pour les images à l'aide de l'attribut alt et si un explicatif est nécessaire, il est fourni avec l'attribut title
• Les tailles de polices sont données en valeurs relatives afin que le visiteur n'ait aucune difficulté à adapter le texte à sa vue si le besoin s'en fait sentir
• Chaque élément de formulaire est associé à un texte explicatif à l'aide de la balise label (à une ou deux exceptions près)

J'ai suivi en particulier les conseils donnés ici et là. Dans ma quète de respect des standards et des règles d'accessibilité, je vais continuer mes efforts pour rendre le site parfaitement accessible.

Les styles alternatifs

Outre le style de base, que j'ai créé pour ainsi dire avec amour, plusieurs autres styles vous sont proposés pour le cas où il ne vous conviendrait pas. Voici les styles actuellement disponibles :

• Thème principal : C'est le style utilisé en l'absence d'autres indications (tons clairs, palette de bleu, orange et blanc principalement)
• Thème dépouillé : Il représente la page telle quel, sans styles appliqués ^[3]
• Thème No menu : Variante du thème principal, le menu n'apparait pas et le contenu peut donc prendre toute la largeur. Vous pouvez appliquer ce style directement à l'aide du lien Masquer le menu (Nécessite que le javascript soit présent et activé dans votre navigateur)

Le style No menu devrait, je pense, être particulièrement apprécié des personnes ne disposant que d'une résolution en 640x400, voire même celles étant en 800x600.
D'autres styles seront proposés à l'avenir ^[4], notamment un style dans des couleurs dominantes sombres et le texte en couleurs claires.

Pour sélectionner un style, c'est simple. Si vous utilisez un navigateur graphique respectueux des normes, tels Mozilla, Firebird, Netscape ou encore Opera dans leurs versions récentes, vous devriez avoir la possibilité de choisir, via le menu affichage ou afficher de votre navigateur, une des feuilles de styles proposées par le site ^[5].
Si le navigateur (suivez mon regard…) que vous utilisez ne vous offre pas cette possibilité, vous pourrez toutefois utiliser le style switcher présent en haut des pages. Celui ci consiste en une liste de sélection vous permettant de choisir le style à appliquer à la page. Si le javascript est activé dans votre navigateur, le changement est automatique, sinon, il est géré coté serveur.
Le style switcher résoud, en outre, un problème de taille. Aucun des navigateurs dits conformes ne gère la persistance de la feuille de style choisie, c'est à dire la réutilisation automatique de la feuille de style choisie pour les pages suivantes. Le style switcher, par l'envoi d'un cookie contenant le nom du style choisi, permet cette persistance. Ce n'est pas une solution parfaite, en particulier pour ceux qui détestent les petits biscuits, mais c'est malheureusement la seule à ce jour.

Les liens relationnels

Le site utilise pleinement les balises html link dans l'entête head de la page pour fournir des possibilités supplémentaires de navigation au sein du site. Cette forme de navigation alternative n'est malheureusement pas gérée par IE mais elle l'est par les navigateurs conformes tels que Mozilla, Firebird ou Opera, ainsi que d'autres navigateurs alternatifs ^[6]. Si vous utilisez Mozilla ou Firebird, vous pouvez même utiliser de façon permanente le thème No menu sans que vos possibilités de navigation n'en soient réduites.

Site conforme cherche navigateur conforme pour symbiose totale

La mise aux normes des sites permettra une plus grande démocratisation du web et une pérennité des documents diffusés, toutefois, ce respect des normes a un prix : l'abandon pur et simple des navigateurs périmés que sont IE et Netscape dans leurs versions 4.x. J'entend par là que, du fait de leur gestion désastreuse des feuilles de style CSS (en particulier netscape), les pages s'afficheront sans aucun style sous ces navigateurs mais le contenu restera tout à fait accessible et lisible.

Je n'ai pu tester pour l'instant le site qu'avec Mozilla 1.4 et 1.5, Firebird, Opera 7.11, Lynx, Netscape 4.x et MSIE6.
Bien que les standards et la structure sémantique des pages garantissent théoriquement une bonne lisibilité pour tous, des erreurs ou imperfections peuvent apparaitre pour les navigateurs précités dans leurs versions précédentes ou pour d'autres navigateurs tels Camino, Safari ou encore K-Meleon. Si cela arrive, soyez aimable, prenez cinq minutes pour me prévenir et m'indiquer le problème afin que je le corrige séance tenante :).

Bien, maintenant, je souhaiterais vous parler d'Internet Explorer 6…
Je comptais tout d'abord vous livrer une collection d'impressions d'écran visualisant différentes parties des pages du site alternativement sous Firebird (le navigateur que j'utilise) et sous IE. Mais je me rend compte que cette façon de faire pourrait en rebuter plus d'un.
Je vais donc seulement vous proposer de télécharger Firebird, l'archive zip ne pèse que 6,7 Mo, cela ne prendra pas longtemps, surtout si vous avez une connexion haut débit. L'installation n'est pas nécessaire, il vous suffit de dézipper l'archive et de lancer le programme.
Ensuite, baladez vous sur le site avec Firebird puis avec IE (ou inversement). Les différences que vous verrez ne sont pas intentionnelles mais simplement dùes aux limitations de IE et à son manque de respect avéré des standards (Mis à part les coins arrondis des menus, c'est une fonctionnalité qui apparaitra avec css de niveau 3 mais qui est déja implémentée dans le moteur de rendu gecko). J'aurais pu bidouiller pour contourner certaines de ces limitations, mais cela aurait compliqué la structure de mes pages de façon intolérable (à mon sens).
IE n'implémente donc les standards que de façon limitée, que ce soit les normes HTML, XHTML et CSS, ou encore les images PNG transparentes en 24 bits. Sans compter les 31 failles de sécurité (NPM : Mettre ce chiffre à jour au fur et à mesure des nouvelles failles trouvées) non corrigées à ce jour alors que Microsoft semble se préparer à abandonner le développement Stand-Alone de IE (Voir cet article et celui-ci).
A l'opposé, vous avez Firebird, petit frère de Mozilla, navigateur respectant très bien les standards, gérant parfaitement les images PNG, n'étant affecté d'aucune faille connue, dont le développement est régulier et intensif, gratuit, et open source. Pour plus de détails, consultez cette page.
Voilà, c'est à vous de décider maintenant, pour ma part, je n'utilise plus que Firebird :)

• [1] : Si vous ne comprenez pas ce concept, regardez ce que donne le site avec la feuille de style Thème dépouillé à l'aide du style switcher
• [2] : Typiquement, le contenu de cet attribut title est représenté sous forme d'info-bulle dans les navigateurs graphiques
• [3] : Avec ce thème, seule la feuille de style générique s'applique, voir la feuille de style Basic
• [4] : Il faut juste le temps que je les réalise, et le design n'est pas ma tasse de thé…
• [5] : Voir les impressions d'écran réalisées sous Mozilla, Firebird et Opera
• [6] : Voir les impressions d'écran réalisées sous Mozilla, Firebird, Opera et Lynx (Navigateur texte)