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:

Quelques liens vers d'autres sites qui ont fait de l'accessibilité leur spécialité:

Documentation en ligne

Guide BrailleNet

Documentation (datant de 2002) proposée par l'association BrailleNet:

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:

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

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:

La présentation en français des fonctions de la version 2.0 de cette barre d'outils est disponible à cette adresse:

Pour Internet Exploreur

DebugBar

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

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:

WAT-C

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

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 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

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:

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

<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

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

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

D'autres templates utilisent par défaut la balise <i> . Il sera donc nécessaire de les modifier également.