Date de publication: le samedi 19 janvier 2008 à 18h13
Dernière modification: par Pascal BOYER le mardi 5 février 2008 à 01h03
« Article précédent: eZ Publish : créer des zones SSL
Accessibilité avec eZ Publish
Cet article, dont le contenu ne cessera de s'enrichir au fil du temps, recense dans un premier temps, un nombre assez conséquent d'outils d'aide au développement de sites accessibles et propose, dans un second temps, certaines choses assez générales à savoir pour rendre les templates de eZ Publish plus conformes aux impératifs dictés par mes critères d'accessibilité. Et c'est surtout cette seconde partie qui devrait le plus évoluer.
Sites d'information générale
Pour les personnes souhaitant développer des sites répondant partiellement ou totalement aux critères d'accessibilité d'un site aux personnes handicapées, voici quelques lien utiles:
Le groupe de travail du consortium W3C en charge d'édicter les standards de l'accessibilité d'un site web se nomme WAI et son site est situé à cette adresse:
Un bon point de départ pour savoir ce qu'est l'initiative WAI et pour avoir des liens vers de la documentation officielle traduite en français, est cette page de wikipédia:
http://fr.wikipedia.org/wiki/Web_Accessibility_Initiative
Quelques liens vers d'autres sites qui ont fait de l'accessibilité leur spécialité:
http://www.webaccessibilite.net/
http://www.tentatives-accessibles.eu/66-outils-de-verification-de-l-accessibilite
http://w3qc.org/ressources/web/accessibilite/
Documentation en ligne
Guide BrailleNet
Documentation (datant de 2002) proposée par l'association BrailleNet:
http://www.braillenet.org/accessibilite/guide/table.htm
Bien que les liens permettant de télécharger les versions PDF et RTF imprimables de ce guide soient cassés, vous trouverez la version PDF en cliquant sur ce lien:
http://www.fonction-publique.gouv.fr/IMG/braillenet-2.pdf
92 critères d'AccessiWeb
L'association AccessiWeb propose en ligne les 92 critères qui lui servent à décerner ses 3 labels. Ils sont consultables aux adresses indiquées ci-après:
Version 1 (19 octobre 2005)
http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-outileval.html
Version 2 et 2.1 (19 décembre 2005 et 30 août 2006)
http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-mode-emploi.html#nouveautes_2_1
Dans le menu de gauche vous trouverez la liste des 13 sections contenant la totalité des 92 critères d'accessibilité.
Manuels d'AccessiWeb en plusieurs formats
Sur la page suivante:
http://www.accessiweb.org/fr/groupe_travail_accessibilite_du_web/manuel_accessiweb/
...vous pouvez télécharger, dans différents formats, les documents produits par AccessiWeb.
Sur cette page, on peut lire ceci:
Ces 92 critères AccessiWeb constituent le référentiel utilisé par le label AccessiWeb et composent le "Référentiel accessibilité des services Internet de l'administration française" publié par l'ADAE (Agence pour le Développement de l'Administration Electronique) en février 2004. Ce référentiel est cité dans l'article 47 de la loi n° 2005-102 pour "l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées" du 11 février 2005 comme le référentiel à appliquer par tous les sites et services Internet du service public en France.
Outils de validation
Le WAI propose sur son site une longue liste d'outils d'aide à la validation des critères d'accessibilité. Cette liste d'outils est consultable à cette adresse: listes des outils de validation
Existe, par ailleurs, le WAT-C (Web Accessibility Tools Consortium/Consortium des Outils d'Accessibilité du Web) sur le site duquel vous trouverez, entre autres, la barre d'outil d'accessibilité du web (uniquement pour IE et Opera sous plate-forme windows)
Barre d'outils d'accessibilité du web
La présentation en français des fonctions de la version 1.2 de cette barre d'outils est disponible à cette adresse:
http://www.wat-c.org/tools/WAT/versions/fr/about.html
La présentation en français des fonctions de la version 2.0 de cette barre d'outils est disponible à cette adresse:
http://www.fairytells.net/WAT/apropos-wat-ie.html
Pour Internet Exploreur
DebugBar
Cette barre d'outils exclusivement dédiée à Internet Exploreur 6 et 7 est présentée en français sur cette page: http://www.debugbar.com/
Cette barre d'outils n'est pas destinée à proprement parler à l'évaluation du respect des critères d'accessibilité. Elle est un outil d'aide au développement d'un site et permet donc essentiellement de contrôler le résultat de votre code html, CSS, Javascript, etc...
Developer Toolbar
Cette barre d'outils est similaire, dans ses fonctionnalités, à la précedente et peut être téléchargée sur cette page: Internet Explorer Developer Toolbar
Barre AccessiWeb
Le site propose un outil (uniquement pour IE 5 ou supérieur et donc pour la plate-forme windows 2000 ou XP).
La page de présentation de cet outils est disponible à cette adresse:
http://www.accessiweb.org/fr/barre_accessiweb/aide.html
WAT-C
http://www.wat-c.org/tools/index.html#current
Une extension pour Firefox est en chantier mais pas encore disponible.
Pour Firefox
Tout d'abord, voici un lien vers un site dédié à tout ce qui se fait pour que le navigateur Firefox réponde au mieux aux exigences et/ou besoins des personnes handicapées:
Web developper
Cette extension, disponible pour Firefox, Flock et Seamonkey pour les plates-formes Linux, MAC OS X et windows, peut être téléchargée à cette adresse: web-developer
Elle présente, entre autres, de nombreux outils de test de validité (html, css, formulaire, etc..) et un test d'accessibilité.
Accessibar
https://addons.mozilla.org/fr/firefox/addon/4242
Acc
http://appro.mit.jyu.fi/tools/acc/
Firefox Accessibility Extension
https://addons.mozilla.org/en-US/firefox/addon/1891
Ocawatoolbar
http://www.ocawa.com/fr/Fonctionnalites/OcawaToolbar.htm
Taw3 en un clic
Cette extension très complète (que je vous recommande vraiment) permet de contrôler la conformité de votre site au W3C Web Content Accessibility Guidelines (WCAG 1.0). dont une traduction française est disponible sur cette page: http://www.la-grange.net/w3c/wcag1/wai-pageauth.html
L'adresse de la page web consacrée à l'extension est: https://addons.mozilla.org/en-US/firefox/addon/1158
Cette extension produit un rapport détaillé qui vous permettra de savoir comment répondre aux critères A, AA et AAA du WAI.
Outils de validation en ligne
Webagogo
Cet outil, dont la version en ligne est accessible à cette adresse:
présente un simple champ où renseigner l'URI d'une page dont la validité doit être testée.
Un menu déroulant offre la possibilité de choisir, parmi onze options, les critères de validité que devra tester l'outil. Une page de résultat s'affichera contenant ou non des messages relatifs aux différentes erreurs trouvées.
Il est possible d'accéder, après création d'un compte gratuit, à un outil permettant de valider l'intégralité d'un site.
TAW
C'est la version en ligne de l'outil de validation des critères A, AA et AAA du
http://www.tawdis.net/taw3/cms/en
:
Vous remarquerez que ce site ne répond qu'aux critères AA et non AAA tout comme le site du WAI qui édicte ces critères ! Ce qui laisse à penser que passer le test AAA n'est pas une mince affaire.
Validateur de l'apinc
Ce validateur est disponible en ligne (voir lien ci-dessous) et peut être librement télécharger.
Le lien ci-dessous affiche une page contenant un champ de saisie dans lequel vous devez indiquer l'URI de votre site. Le bouton Soumettre permet de lancer l'outil de validation:
http://validateur-accessibilite.apinc.org/index.php
Voici des exemples de messages renvoyés par cet outil:
Variable Priorité 1 - Assurez-vous que la page est consultable sans ce script et/ou que le contenu soit doublé d'une version accessible sans l'utilisation de langage de script.
Très facile ! Priorité 3 - Vous devriez mettre en place des raccourcis clavier (accesskey).
Ces message sont en fait des liens qui renvoient vers une explication détaillée:
Quelques tarifs
Pour labélisation et mise en place de système ReadSpeaker:
http://www.accessimairies.net/tarifs-et-devis.php
http://www.accessiweb.org/fr/Label_Accessibilite/contrat_tarifs/
http://www.01net.com/article/239254.html
Déclaration DOCTYPE
(X)HTML strict
Pour répondre aux critères d'accessibilité, la première chose à faire est de déclarer que les pages du sites seront conformes au (X)HTML strict. Voici la recommandation officielle:
http://validateur-accessibilite.apinc.org/wiki/wiki/03_2_doctype
eZ Publish et la validation d'un site
Par défaut, les page produites par eZ Publish ne sont pas conformes au (X)HTML strict mais à la version Transitionnelle. Il est donc nécessaire de modifier la remplacer la déclaration DOCTYPE du template pagelayout.tpl par celle-ci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Validateur du W3C
Le validateur du consortium W3C est disponible à cette adresse:
Les templates à modifier
A partir du moment où l'on décide d'être conforme au (X)HTML strict, s'ensuit un certain nombre de contraintes dont ne tiennent pas forcément compte les templates par défaut de eZ Publish.
Pour répondre aux critères d'accessibilité, il sera souvent nécessaire de modifier les templates utilisés par le système pour lire et afficher le contenu des attributs des objets , chaque attribut représentant l'affichage d'un datatype .
Les templates en charge de l'affichage du contenu des différents datatypes constituant les objets de contenu d'un site créé avec eZ Publish sont situés dans l'un des sous-répertoires du répertoire suivant:
design/standard/templates/content/datatype/
Pour savoir à quel template est associé l'affichage du contenu d'un dataype, il est possible d'utiliser le système de débugage de l'interface d'administration. Voici les options (en rose) à cocher:
Pour que s'affichent sur le site publique les templates utilisés, vider préalablement les caches.
Comme il est important de ne jamais modifier les templates utilisés par défaut par le système, le plus facile et le plus rapide consiste à faire une copie du répertoire:
design/standard/templates/content/datatype/
dans le sous-répertoire / templates/ du design du siteaccess public (à savoir plain_site par défaut):
design/plain_site/templates/content/datatype/
Par défaut, les deux sous-répertoires content et datatype n'existant pas pour le design plain_site, il faudra préalablement les créer.
Cette méthode a l'énorme avantage de ne demander qu'à vider les caches pour que le système prennent en compte les copies des templates nouvellement placées dans le design plain_site au lieu des templates par défaut situés dans le design standard.
Les formulaires
Pour un formulaire de base comme celui qui constitue l'objet Nous contacter (Contact form ou Feedback form) présent par défaut dans eZ Publish, voici les trois templates utilisés:
design/standard/templates/content/datatype/collect/ezstring.tpl design/standard/templates/content/datatype/collect/ezemail.tpl design/standard/templates/content/datatype/collect/eztext.tpl
Pour les 3 templates cités ci-dessus:
design/plain_site/templates/content/datatype/collect/ezemail
...voici les modifications à apporter:
<label for="{$attribute.contentclass_attribute.identifier}"> </label>{* N' AFFICHE RIEN PUISQUE PAS DE VALEUR DÉFINIE - ET DONC N'OCCUPE PAS DE HAUTEUR DE LIGNE *} <input class="box" type="text" size="20" id="{$attribute.contentclass_attribute.identifier}" ...
design/plain_site/templates/content/datatype/collect/ezstring
...voici les modifications à apporter:
{* $attribute|attribute(show) *} <label for="{$attribute.contentclass_attribute.identifier}"> </label>{* N' AFFICHE RIEN PUISQUE PAS DE VALEUR DÉFINIE - ET DONC N'OCCUPE PAS DE HAUTEUR DE LIGNE *} <input class="{eq( $html_class, 'half' )|choose( 'box', 'halfbox' )}" id="{$attribute.contentclass_attribute.identifier}" ...
design/plain_site/templates/content/datatype/collect/eztext.tpl
...voici les modifications à apporter:
<label for="{$attribute.contentclass_attribute.identifier}"> </label>{* N' AFFICHE RIEN PUISQUE PAS DE VALEUR DÉFINIE - ET DONC N'OCCUPE PAS DE HAUTEUR DE LIGNE *} <textarea class="{eq( $html_class, 'half' )|choose( 'box', 'halfbox' )}" id="{$attribute.contentclass_attribute.identifier}" ...
Les titres de paragraphes
Le template qui affiche les titres/headers des paragraphes d'un article est:
design/standard/templates/content/datatype/view/ezxmltags/header.tpl
Il faut ajouter l'attribut title à la balise <a>
<a name="eztoc{$toc_anchor_name}" id="eztoc{$toc_anchor_name}" title="{$content}"></a>
Les liens
Le template qui gère l'affichage des liens est:
design/standard/templates/content/datatype/view/ezxmltags/link.tpl
Il faut modifier l'affichage de l'attribut target des liens produits par ce template. Voici ce que doit contenir ce template:
{section show=eq($target,'_blank')} target="{$target}" {/section}
...sachant que l'attribut target n'est pas valide au sens (X)HTML strict. Avec cette modification, par défaut, l'attribut n'est pas présent dans le code source. Il n'apparaît que si l'on coche expressément l'option Ouvrir dans une nouvelle fenêtre dans l'interface d'édition des liens du Online Editor.
Les images
Il est impératif, pour être valide (X)HTML strict, que les balises <img> ne possèdent pas d'attribut border="" Par contre, l'utilisation de la balise <img> impose celle des deux attributs width="" et height=""
Le template qui gère l'affichage des images est:
design/plain_site/templates/content/datatype/view/ezimage.tpl
Texte en gras
La balise <b> utilisée par défaut par le template:
design/plain_site/templates/content/datatype/view/ezxmltags/strong.tpl
...doit être remplacée par la balise <strong>
D'autres templates utilisent par défaut la balise <b>. Il sera donc nécessaire de les modifier également.
Texte en italique
La balise <i> utilisée par défaut par le template:
design/plain_site/templates/content/datatype/view/ezxmltags/emphasize.tpl
...pour gérer le texte italique des articles doit être remplacée par la balise <em>
D'autres templates utilisent par défaut la balise <i>. Il sera donc nécessaire de les modifier également.