RÉALISER UN SITE INTERNET ACCESSIBLE

Méthodes et utilisation des normes

Version 3.04
Octobre 2007

Bruno Mascret

DSI-INSA de Lyon

1
 Avertissement

Ce document présente selon nous suffisamment d'éléments et de conseils 
pour être utilisé efficacement.
Cependant, certains aspects demandent encore à être approfondis, ce que 
nous ne manqueront pas de faire dans les versions prochaines. 
Bien que reprenant de nombreux points traités par la WAI, il ne s'agit en 
aucun cas d'une traduction des recommandations de la WAI.

2
Sommaire
Introduction..........................................................................................................................................4
Objectifs du document.....................................................................................................................4
Public visé........................................................................................................................................4
Définition de l'accessibilité d'un site internet..................................................................................4
Organisation du document...............................................................................................................5
I. Phase préliminaire.............................................................................................................................6
1. Identifier le contexte....................................................................................................................6
2. Identifier les objectifs..................................................................................................................6
3. Identifier les moyens....................................................................................................................7
II. Phase d'analyse................................................................................................................................8
1. Collecter, préparer et organiser les ressources.............................................................................8
2. Réalisation des patrons................................................................................................................8
3. Identifier le contenu et la forme...................................................................................................8
III. Gestion du contenu.........................................................................................................................9
1. Quel langage utiliser?..................................................................................................................9
2. Structuration du contenu..............................................................................................................9
2.1. Pourquoi structurer le contenu?.......................................................................................9
2.2. Les éléments de structuration..........................................................................................9
2.2.1 Les divisions.............................................................................................................9
2.2.2 Les titres.................................................................................................................10
2.2.3 Les listes.................................................................................................................10
2.2.4 Le paragraphe.........................................................................................................10
2.2.5 Les formulaires.......................................................................................................10
2.2.6 Les tableaux............................................................................................................11
2.2.6.1 Les dangers des tableaux.................................................................................11
2.2.6.2 Bien utiliser les tableaux.................................................................................11
2.3 Organisation des blocs de structure................................................................................14
2.3.1 Les éléments d'accessibilité....................................................................................14
2.3.1.1 Les clefs d'accès (access keys)........................................................................14
2.3.1.2 Le menu caché................................................................................................14
2.3.1.3 La navigation au clavier..................................................................................15
2.3.2 Enchaînement des blocs..........................................................................................15
2.3.3 Les classes et les identifiants..................................................................................15
3. Le contenu..................................................................................................................................16
3.1 L'entète (head) et les méta­données....................................................................................16
3.2 Le texte................................................................................................................................16
3.2.1 Structuration du texte..................................................................................................17
3.2.2 Jeu de caractères et paramètres linguistiques..............................................................17

3
 3.2.3 Les attributs de texte....................................................................................................17
3.2.3.1 Gras, italique, souligné, couleur..........................................................................18
3.2.3.2 Abréviations et Acronymes.................................................................................19
3.2.4 Les liens hypertextes...................................................................................................19
3.3 Les images...........................................................................................................................20
3.3.1 Texte alternatif, description.........................................................................................20
3.3.2 Le texte scientifique et le texte musical......................................................................20
3.4 Les tableaux........................................................................................................................21
3.5 Les fichiers..........................................................................................................................21
3.6 Le contenu audio­visuel......................................................................................................21
3.6.1 La vidéo.......................................................................................................................21
3.6.2 Le son..........................................................................................................................22
3.7 Les expressions mathématiques et scientifiques.................................................................22
3.8 Les expressions musicales...................................................................................................22
3.9 Les applets Java...................................................................................................................23
3.10 Flash..................................................................................................................................23
3.11 Javascript...........................................................................................................................23
IV. La mise en forme..........................................................................................................................24
1. Les feuilles de style....................................................................................................................24
1.1 Structuration d'une feuille de style......................................................................................24
1.2 Utilisation des feuilles de style...........................................................................................24
1.2.1 Disposition des éléments.............................................................................................25
1.2.2 Mise en forme du texte................................................................................................25
1.2.3 Les couleurs.................................................................................................................25
1.2.4 Les images...................................................................................................................26
1.2.5 Cohérence des feuilles de styles..................................................................................26
1.3 Les feuilles de styles particulières.......................................................................................26
1.3.1 La feuille standard.......................................................................................................26
1.3.2 La feuille d'impression................................................................................................26
1.3.3 Le mode texte..............................................................................................................27
1.3.4 Les autres feuilles de style...........................................................................................27
2. Les autres outils de mise en forme.............................................................................................28
2.1 Javascript.............................................................................................................................28
2.2 Flash....................................................................................................................................28
V. Tester l'accessibilité d'un site.........................................................................................................29
1. Les validateurs en ligne.............................................................................................................29
2. La validation manuelle...............................................................................................................29
2.1 Tester avec différents navigateurs.......................................................................................29
2.2 Examen du code source.......................................................................................................29
2.3 Utilisation de navigateurs en mode texte............................................................................30
2.4 Un outil très pratique : Firefox............................................................................................30

4
 2.5 Validation par les utilisateurs..............................................................................................30
VI. Ressources....................................................................................................................................32
Sites internets.................................................................................................................................32
HTML.......................................................................................................................................32
CSS............................................................................................................................................32
Mathématiques..........................................................................................................................32
Javascript...................................................................................................................................32
JAVA........................................................................................................................................32
Législation.................................................................................................................................32
Bibliographie.................................................................................................................................34

5
Introduction
Objectifs du document
Le présent document a pour objectifs d'offrir au lecteur un aperçu général des contraintes à 
respecter afin de réaliser un site ou une page internet accessible1, et de proposer une méthodologie 
de conception lui permettant d'arriver à ses fins sans trop de problèmes.
Ce document n'a pas pour objectif d'expliquer exhaustivement le fonctionnement des langages 
HTML, XHTML ou CSS, mais de préciser leur utilisation du point de vue de l'accessibilité.
L'ensemble des contraintes définies par la WAI2  n'est à ce jour pas totalement traité, nous 
invitons le lecteur à se renseigner pour plus de détails (voir dernière partie " Ressources ").
De même, certaines contraintes ne font pas directement partie des recommandations de la 
WAI, mais sont néanmoins présentées dans ce document.

Public visé
Ce document s'adresse avant tout aux concepteurs de site internet et aux webmestres.
Cependant, il peut être également utile au chef de projet dans le cas d'audits de sites ou de 
conduite de projets web, notamment cette introduction et les parties I, II, V et VI (respectivement 
première et deuxième phases, tester un site, ressources).

Définition de l'accessibilité d'un site internet

La   notion   d'accessibilité   d'un   site   internet   n'est   pas   facile   à   définir,   puisqu'elle   dépend 
beaucoup des intentions des concepteurs de sites. Par exemple, elle peut ou non prendre en compte 
l'ensemble du contenu du site (ce qui inclut les fichiers proposés en téléchargement).
La définition de l'accessibilité que nous avons retenue est la suivante :
" Un   site   internet   est   dit   accessible   si   tout   utilisateur,   quelques   soient   sa   configuration  
matérielle et sa configuration logicielle, est capable d'apprécier le contenu de ce site de la même  
manière que tout autre utilisateur pourvu de configurations différentes. Par contenu, on entend  
l'ensemble des informations et des documents proposés à l'utilisateur "3.
Cette définition présente deux avantages principaux :
– elle oblige implicitement à prendre en compte les différentes technologies d'aide aux personnes 
handicapées sans toutefois les énumérer, gardant ainsi une indépendance face aux constructeurs 
et éditeurs de logiciels. En contrepartie, une connaissance de ces outils, même partielle, nous 
semble indispensable au concepteur de site (voir le chapitre VI " ressources ").

1 Voir plus bas " Définition de l'accessibilité d'un site internet "
2 Web Accessibility Initiative : branche du W3C chargée de l'accessibilité  pour Internet
3 La WAI définit l'accessibilité ainsi : " Mettre le Web et ses services à la disposition de tous les individus, quel que 
soit   leur   matériel   ou   logiciel,   leur   infrastructure   réseau,   leur   langue   maternelle,   leur   culture,   leur   localisation 
géographique, ou leurs aptitudes physiques ou mentales. "

6
– Elle se rend indépendante des différents systèmes d'exploitation.
On remarquera qu'avec cette définition, les documents proposés en téléchargement doivent 
également être accessibles.
Toutefois, il est devenu quasiment impossible de respecter cette définition dans le cadre des 
navigateurs web : en effet, il est souvent nécessaire d'utiliser une version relativement récente afin 
de profiter de l'ensemble des fonctionnalités de la page. Il conviendra donc de choisir dès le départ 
les versions minimales des navigateurs nécessaires au bon fonctionnement du site.

Organisation du document
Ce   document   méthodologique   comporte   différentes   parties   pouvant   être   considérées 
indépendantes les unes des autres, même si la logique voudrait que le lecteur respecte l'ordre des 
chapitres.
Chaque chapitre représente une des phases du développement d'un site web, de la conception 
à la réalisation. Certaines de ces phases peuvent être réalisées en parallèle, et/ou indépendamment 
des autres phases. 
Comme pour l'accessibilité en général, la majeure partie des observations fait appel au bon 
sens et à la logique, et ne présente pas de difficultés particulières de compréhension. La mise en 
pratique en revanche requière une bonne connaissance de ces observations, la complexité résidant 
dans leur application conjointe et exhaustive.

7
I. Phase préliminaire
Une des tâches les plus importantes est de commencer le projet dès le départ sur des bases 
saines, avec une idée claire du but à atteindre, du public visé, de l'existant, etc.
On peut se demander en quoi l'accessibilité a à voir avec cela.
Fréquemment, lorsque ce travail n'est pas réalisé, il faudra revenir sur ce qui a été fait, et en 
général ce genre d'opération est  fait dans l'urgence au détriment de l'accessibilité. De plus, il est 
probable que l'existant ne soit pas accessible, ce qui va contraindre le concepteur à reprendre le 
projet du début.
De plus, l'accessibilité n'est pas une sur­couche que l'on ajoute à un site une fois celui­ci 
terminé, mais fait partie intégrante de l'ossature de ce site : on risque donc, si on n'y prend garde 
dès le début, de devoir tout recommencer (au mieux) ou d'abandonner nos bonnes résolutions 
devant l'ampleur du travail à refaire.
Autant éviter ce genre de mauvaise surprise.

1. Identifier le contexte
Le contexte est probablement l'aspect le plus négligé dans les projets web.
Il faudra essentiellement :
– identifier les acteurs du projet, dont le public visé. Il sera important de définir à quel public est 
destiné le site, et l'importance de ce site pour ce public, ce qui peut se révéler précieux dans la 
gestion des handicaps et la définition des objectifs d'accessibilité;
– rechercher l'existence d'une charte graphique, qu'on veillera à faire corriger si nécessaire et 
valider;
– vérifier l'accessibilité des autres pages web si on poursuit ou étend un projet existant.

2. Identifier les objectifs

Il est indispensable d'ajouter aux objectifs du site la notion d'accessibilité. Il faut en général 
prévoir   deux   aspects   importants :   la   définition   de   ses   contraintes   d'accessibilité,   et   le   niveau 
d'accessibilité souhaité.
Même   si   nous   engageons   fortement   le   lecteur   à   reprendre   la   définition   de   l'accessibilité 
énoncée précédemment, il se peut qu'elle ne conviennent pas au projet. Les concepteurs auront 
donc à présenter leurs intentions (définition) et à détailler jusqu'où ils souhaitent aller dans la prise 
en charge de l'accessibilité du site (niveau).
Très souvent, ces objectifs sont donnés par un règlement intérieur ou un texte de loi4; en ce 

4 Comme la " LOI n° 2005­102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la 
citoyenneté des personnes handicapées " en France.

8
 qui concerne la fonction publique, il a été retenu un niveau d'accessibilité proche du niveau AA5 de 
la WAI, ce qui d'ailleurs n'est pas suffisant à notre sens. On remarquera notamment que le terme 
" accessibilité d'un site internet " n'a pas été définit précisément dans la loi et le décret associé6.

3. Identifier les moyens

Les moyens sont à la fois les compétences humaines et les outils dont on dispose.
Il est bien sûr indispensable que chaque rôle soit bien définit, du graphiste au développeur, en 
passant par le testeur. On s'assurera surtout de disposer d'un panel suffisant de navigateurs pour les 
tests   (Internet   Explorer,   Mozilla   Firefox,   Safari,   Netscape,   Opéra,   Lynx,   etc.),   et   d'avoir   la 
possibilité de tester sous différents systèmes d'exploitation (Windows, Linux, MacOS, etc.).
A l'heure actuelle, nous déconseillons fortement l'utilisation de logiciels concepteurs de site 
trop évolués : il est important de travailler directement sur le code source, sans passer par une 
interface trop automatisée qui risque de générer un code source pollué, tant au niveau de la mise en 
forme que du contenu.
Toutefois, à condition de vérifier soi­même le code, il est possible à quelqu'un d'expérimenté 
d'utiliser ce genre d'outils, même si nous n'y trouvons pas grand intérêt.
Un   grand  plus   est   bien   entendu   d'avoir  la   possibilité   de  faire  tester   ce  site   par  un   panel 
représentatif de configurations différentes, par exemple en mode texte, en navigation tabulaire ou 
en grossissement d'écran. 

5 La WAI a définit trois niveaux d'accessibilité, noté A, AA et AAA, regroupant chacun un ensemble de critères de 
plus en plus exhaustifs en matière d'accessibilité.
6 On   reprend   cependant   la   définition   de   la   WAI   dans   le   Référentiel   accessibilité   des   services   Internet   de 
l’administration française.

9
II. Phase d'analyse
1. Collecter, préparer et organiser les ressources
Cette phase permet de percevoir l'organisation physique du site (hiérarchie des répertoires, 
répertoires dédiés (images, feuilles de styles). Une structure claire sera en générale plus facilement 
maintenable.
On veillera à ne pas proposer un document au format propriétaire (Office, Works, etc.), ainsi 
que les formats présentant le texte sous forme d'images (comme Acrobat Reader par exemple). On 
préférera par exemple le format RTF. 
De   même,   certaines   ressources   risquent   de   poser   de   gros   problèmes   d'accessibilité.   Plus 
particulièrement,   on   se   méfiera   des   applets   java   et   des   applications   flash   (voir   plus   bas   les 
paragraphes correspondants).

2. Réalisation des patrons

Une méthode efficace d'ébauche d'un site internet consiste à faire au préalable le dessin des 
différentes fenêtres types, afin de ne pas imposer un choix technique ou un logiciel en particulier 
aux développeurs (cf. " identifier les moyens "). 

3. Identifier le contenu et la forme

Une fois cette ébauche réalisée, il est primordial d'identifier les éléments de mise en page et le 
contenu propre, afin de préparer la séparation du contenu et de la forme.
L'intérêt de cette méthode est connu : elle garantit une cohérence vis à vis des données et de la 
structure des pages. Elle facilitera également les mises à jour ou évolutions du site.

10
III. Gestion du contenu
1. Quel langage utiliser?
Le langage utilisé pour réaliser des pages web est le HTML (HyperText Markup Language). Il 
en existe plusieurs version dont la dernière est la version 4.01. Par la suite, on parle de XHTML 
(Extensible  HyperText Markup Language) actuellement à la version 1.1.
HTML   est   un   langage   très   permissif,   ou   du   moins   que   les   navigateurs   ont   rendu   ainsi : 
beaucoup d'erreurs de syntaxe sont ignorées. XHTML, très proche pourtant du HTML, ne tolère 
aucune erreur de syntaxe. Ce langage a été crée afin de préparer les développeurs à XML.
Nous recommandons fortement l'utilisation de XHTML, dont la rigueur va nous aider à mieux 
gérer notre contenu.
D'autres langages peuvent également être utilisés, sous forme de mini application (applets 
java, flash, activeX) ou script (javascript, vbscript) : il faut se méfier de ces possibilités qui bien 
souvent vont créer des problèmes d'accessibilité. Nous y reviendrons plus bas.
Quoiqu'il en soit, on précisera toujours la norme choisie dès la première ligne du code source 
par une déclaration du type :
<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1­strict.dtd">

2. Structuration du contenu
2.1. Pourquoi structurer le contenu?
Un contenu structuré correctement est la clé même de la réussite d'un site accessible.   La 
structuration doit être le reflet de l'organisation logique de ce que l'on souhaite présenter, et doit 
permettre   à   elle   seule   de   comprendre   cette   organisation.   De   nombreux   outils   d'accessibilité, 
comme les navigateurs en mode texte ou les synthèses vocales, ne prennent pas en compte les 
éléments de mise en forme.
Ainsi, sans mise en forme, le contenu doit néanmoins être présenté de manière logique.

2.2. Les éléments de structuration

Les éléments de structuration sont destinés à regrouper et organiser l'information dans le code 
HTML. Nous présenterons ici les principaux d'entre eux et la manière de les utiliser. 

2.2.1 Les divisions

Elles permettent de diviser une page en sous­parties logiques. Par exemple, une division pour 
le   bandeau,   une  division   pour  le  menu  gauche  de  navigation,   une  division  principale  pour   le 
contenu spécifique de la page.
Il existe 2 balises permettant cette division en HTML: div et span. La balise div est un bloc 
alors  que la balise  span  est une balise en­ligne.  On utilisera  essentiellement  la balise  span  à 

11
l'intérieur d'un bloc, afin de mettre en exergue une partie du contenu, alors que la balise div servira 
à identifier les grandes sous­parties d'une page.
On préférera l'utilisation de div plutôt que de frame, cette dernière balise n'étant pas pratique 
en matière d'accessibilité.
De même, chaque sous­partie étant normalement unique, on précisera à l'aide d'un sélecteur 
(id) le type de div utilisé.
<div id="bandeau">
<p>
mon paragraphe
<span>texte particulier</span>
</p>
</div>

2.2.2 Les titres

Les balises de titre (h1,  h2,  h3...) sont à utiliser comme on le ferait dans un écrit. Chaque 
chiffre représente le niveau de profondeur dans la hiérarchie du texte (h1 pour le titre de la page ou 
du chapitre, h2 pour un sous­titre, etc.).
Respecter   cette   hiérarchie   de   cette   manière   facilite   la   navigation   interne   et   donne   une 
cohérence au contenu.

2.2.3 Les listes

Les listes (ul, ol, et l'élément de liste li) sont des ensembles d'éléments consécutifs de même 
nature. Leur utilisation est fréquente, bien qu'elles ne soient pas toujours identifiées. Ainsi, un 
menu   est  une liste  de lien,  une galerie d'images  est  une liste  d'images, au même  titre  qu'une 
énumération.
On a tendance a minimiser leur importance, c'est une erreur car c'est probablement le moyen 
le plus clair de regrouper des éléments de même nature. De plus, grâce aux feuilles de style, elles 
peuvent être présentées de manière conviviale et pratique pour la navigation (voir css).

2.2.4 Le paragraphe
La   balise   de   paragraphe  p  est   à   employer   systématiquement   dès   qu'on   a   affaire   à   un 
paragraphe de texte. Cette balise peut également servir pour la présentation d'illustration (image au 
centre de la page par exemple), les légendes, les notes, etc...
On lui associera souvent une classe ou un rôle particulier :
<p>Voici mon paragraphe ...... fin du paragraphe</p>
<p class="illustration">

12
 <img src="mon image" alt="texte alternatif pour l'image" />
Texte­légende de l'image
</p>
<p class="note">Une note de bas de page</p>

2.2.5 Les formulaires

Les formulaires sont des éléments structurels destinés en général à interagir avec l'utilisateur. 
Ils contiennent deux catégories d'éléments : les éléments à contenu modifiable ou contrôles (cases 
à cocher, bouton radio, listes déroulantes, zone de texte, champ de texte, etc.) et des éléments à 
contenu   non   modifiable   (labels,   légende,   titre)   généralement   associés   aux   éléments   à   contenu 
modifiable.
Du fait même de leur vocation, il est impératif d'assurer l'accessibilité de ces éléments à tout 
utilisateur.
Il est primordial de respecter les règles suivantes :
– N'utiliser que des éléments prévus à cet effet dans la réalisation d'un formulaire.
– Assurer une navigation logique et chronologique du formulaire : voir "tabindex".

– Si un élément est d'une grande importance, lui affecter une clef d'accès (voir accesskey).

– Utiliser la balise label plutôt que du texte brut.

– Donner un nom (name) et un identifiant unique (id) à chaque contrôle .

– Associer un contrôle et son label de manière explicite en utilisant les identificateurs (id) et 
l'attribut for pour le label.

– Regrouper les éléments structurels, soit à l'aide de la balise fieldset et décrire la sous­partie 
du formulaire ainsi crée avec la balise  legend, soit avec la balise  optgroup  dans le cas 
d'une liste d'option.
– Afin de faciliter la compréhension, donner chaque fois que cela est possible une valeur par 
défaut au contrôle, ou un exemple de saisie à l'aide de l'attribut value.
– S'assurer   que   le   formulaire   fonctionne   même   si   javascript   est   désactivé.   Dans   le   cas 
contraire,   et   si   il   n'est   pas   possible   de   faire   autrement,   prévoir   un   autre   formulaire 
accessible.

13
 2.2.6 Les tableaux

2.2.6.1 Les dangers des tableaux

L'utilisation   des   tableaux   est   actuellement   très   fréquentes   sur   les   sites   internet. 
Malheureusement, dans 95% des cas, c'est à des fins de mise en page et non de présentation de 
données.
Les tableaux ne doivent en aucun cas servir à la mise en page.
Ce sont des éléments de structuration servant à l'organisation de données sous forme tabulaire, 
et qui ne sont pas destinés à un rôle autre que celui là.
Une mauvaise utilisation des tableaux conduit toujours à une page inaccessible, puisque le 
contenu n'est pas présenté à l'aide d'éléments de structuration, mais de manière graphique sans 
tenir compte des ensembles ou des regroupement de données.
Voir l'excellent l'article " En quoi la mise en page par tableaux est­elle stupide " à l'adresse 
http://www.cybercodeur.net/weblog/presentations/seybold/index.html .
 

2.2.6.2 Bien utiliser les tableaux

L'utilisation d'un tableau impose de respecter les règles suivantes :

– Ne pas se servir d'un tableau pour faire de la mise en page. D'autres outils sont faits pour 
ça, notamment les feuilles de styles associées aux éléments de structuration.
– Donner des informations sur le contenu du tableau. On utilisera l'attribut  summary  pour 
expliquer ce que contient le tableau, et la balise caption pour lui donner un titre.
– Chaque colonne et/ou chaque ligne doit commencer par une description du contenu de la 
colonne et/ou de la ligne. Utiliser pour cela la balise  th  (table head). La balise  td  (table 
data) sera elle réservée au données.
– Faciliter la lecture du tableau en précisant le sens de lecture. On utilisera l'attribut scope, 
ou on aura recours aux identifiants id et à l'attribut axis dans les cas les plus compliqués.

Exemple d'un tableau bien réalisé (on n'utilise pas d'identifiant dans cet exemple) :

<table summary="Ce tableau donne la moyenne de chaque groupe dans chacune des  
matières enseignées en premier cycle">
<caption>Résultats du premier semestre</caption>
<tr>

14
 <th scope="col">Groupe</th>
<th scope="col" abbr="maths">Mathématiques</th>
<th scope="col">Physique</th>
<th scope="col">Chimie</th>
<th scope="col" abbr="cc">Culture et communication</th>
</tr>
<tr>
<td>1</td>
<td>10</td>
<td>12</td>
<td>10</td>
<td>14</td>
</tr>
<tr>
<td>2</td>
<td>11</td>
<td>13</td>
<td>10</td>
<td>12</td>
</tr>
<tr>
<th scope="row">Moyenne</th>
<td axis="moyenne">10,5</td>
<td axis="moyenne">11</td>
<td axis="moyenne">10</td>
<td axis="moyenne">13</td>
</tr>
       </table>

Voici le résultat avec un navigateur web graphique :

15
 Résultats du premier semestre

G Mathém Ph C Culture et 
roupe atiques ysique himie communication
1
1 10 12 14
0
1
2 11 13 12
0
M 1
10,5 11 13
oyenne 0

Voici le résultat avec un navigateur web texte (lynx 2.8.5):

CAPTION: Résultats du premier semestre

Groupe Mathématiques Physique Chimie Culture et communication

1 10 12 10 14
2 11 13 10 12
Moyenne 10,5 11 10 13

Et voici ce qu'une synthèse vocale annonce (jaws 4.52 avec internet explorer, comportement 
par défaut) :

Tableau avec 5 colonnes et 4 rangées
Sommaire : Ce tableau donne la moyenne de chaque groupe dans chacune des 
matières enseignées en premier cycle.
Résultats du premier semestre.
Groupe, mathématique, physique, chimie, culture et communication.
1; 10; 12; 10; 14.
2; 11; 13; 10; 12.
Moyenne; 10,5; 11; 10; 13.  
Fin du tableau.

Il   est   important   de   préciser   qu'une   synthèse   vocale  peut   souvent   être   configurée   afin   de 
prendre en compte tous les éléments d'accessibilité.

16
 2.3 Organisation des blocs de structure

2.3.1 Les éléments d'accessibilité

Ils permettent d'améliorer la navigation et l'accessibilité de la page. Souvent facultatifs, ils 
n'en sont pas moins indispensables pour certaines catégories d'utilisateurs, notamment lorsque la 
page présente un contenu important et complexe.
Bien implémentés, ce sont eux qui permettront à tout utilisateur de profiter pleinement du 
contenu de la page. De plus, en appliquant de manière cohérente ces éléments à l'ensemble des 
pages d'un site, les utilisateurs s'y habitueront plus rapidement.

2.3.1.1 Les clefs d'accès (access keys)

Les   clefs   d'accès   sont   des   attributs   permettant   d'atteindre   à   l'aide   d'un   raccourci   clavier 
spécifié par le développeur une partie choisie de la page. Ce sont des éléments appréciés par les 
utilisateurs de synthèse vocale ou de navigateurs texte car ils leur font gagner un temps précieux 
dans la navigation et leur évite de se perdre sur une page.
Les clefs d'accès s'utilisent surtout avec les éléments de type ancre (liens) et les formulaires.
On veillera à bien choisir les raccourci afin de ne pas entrer en conflit avec d'autres raccourcis 
existants7. 
Suivant les navigateurs, les accès ne se font pas grâce à la même combinaison de touche. En 
général, on utilise les combinaisons ALT + clef (Mozilla, firefox, opéra sous windows), ALT + 
clef + ENTER (IE sous windows) ou CTRL + clef (Mozilla, FirefoX, IE sous MAC).
Il sera parfois nécessaire de créer une ancre afin d'accéder à une partie du site, si celle­ci ne 
commence pas elle­même par un lien.
Exemple d'utilisation :
  <div id="menuAccueil">
<ul>
   <li><a href="rubtique1.html" accesskey="m"> rubrique1</a></li>
   <li><a href="rubrique2.html">rubrique 2</a></li>
etc....
</ul>
</div>

<div id="Contenu de la page">
<a id="menu" accesskey="m"></a>
<h1>Bienvenue ....
....etc

7 Voir à ce sujet la page http://www.wats.ca/resources/accesskeysandkeystrokes/38 du WATS (http://www.wats.ca/)

17
        

2.3.1.2 Le menu caché

Le menu caché est un bon moyen de cibler le type d'information dispensé en fonction des 
configurations. Ce menu, rendu uniquement visible par les utilisateurs de synthèses vocales ou de 
navigateurs texte grâce aux feuilles de style (propriété  display: none), va permettre d'indiquer 
quelles clefs d'accès sont associées aux différentes parties de la page.
On   le   place   logiquement   dès   les   premières   lignes   de   la   balise  body  (voir   la   partie 
"enchaînement des blocs".
Afin nommer chaque partie du site, on peut également introduire un cours paragraphe au 
début de chaque sous­partie pour en décrire rapidement le rôle et/ou le contenu.
Exemple avec l'organisation précédente :
<div class="cache">
<a id="racourcis" accesskey="r"></a>
<p>Accès rapide aux différentes parties de la page:</p>
<ul>
<li>Raccourcis clavier: alt+r</li>
<li>Menu principal: alt+m</li>
<li>Contenu de la page :alt+c</li>
</ul>
</div>

Et dans la feuille css :
.cache{display: none;}

2.3.1.3 La navigation au clavier

Afin de s'assurer une bonne navigation tabulaire, il est possible d'indiquer dans quel ordre les 
éléments de la pages doivent être parcourus.
On utilise alors l'attribut  tabindex  suivi du numéro d'ordre dans la navigation. Cet attribut 
peut être utilisé avec pratiquement n'importe quelle balise. Il faut néanmoins se méfier de son 
utilisation généralisée, les contenus devenant difficiles à maintenir.
On ne s'en servira donc qu'en cas de besoin particulier, là où la navigation par défaut (voir 
"enchaînement des blocs") peut poser problème.
Exemple d'utilisation : voir l'exemple du formulaire.

2.3.2 Enchaînement des blocs

Par défaut, et si rien n'est précisé, l'enchaînement des blocs respecte l'ordre d'apparition dans 
le code source. Il est donc intelligent d'organiser le code source d'une page de manière à faire 

18
apparaître   ce   qu'on   considère   comme   le   plus   important   au   début   et   ce   qui   est   de   moindre 
importance à la fin.
En   général,   on   commencera   par   le   menu   cache,   ce   qui   permettra   aux   utilisateurs   d'aller 
directement à l'endroit souhaité sur la page, sans passer par les autres blocs (très pratique lorsqu'on 
utilise une synthèse vocale.
Pour la suite, suivant les intentions du développeur, on peut commencer soit directement par 
le contenu, soit par les menus. C'est uniquement une question de bon sens.
Attention : cette organisation du code source de la page ne devrait pas en principe affecter la 
présentation de cette page dans un navigateur graphique, puisque nous utilisons un outil de mise 
en page indépendant de la structure du document (voir le chapitre "mise en page").
Quoiqu'il en soit, cette structure du code sera présentée telle quelle avec un navigateur en 
mode texte.

2.3.3 Les classes et les identifiants

Afin   de   structurer   d'avantage   notre   page,   il   faut   s'efforcer   d'identifier   les   éléments   de 
structuration uniques et les éléments récurant.
Chaque élément unique sera caractérisé par un identifiant (id), et chaque élément récurant 
pourra ou non être caractérisé par une classe.
Il n'est pas impossible d'avoir à la fois un élément pourvu d'un identifiant et d'une ou plusieurs 
classes.
Cette structuration permettra par la suite de bénéficier pleinement de l'outil css de mise en 
page. De plus, elle garantit une cohérence entre les différentes pages du site, tout en facilitant sa 
maintenance et/ou sa mise à jour.

3. Le contenu
Bien  que la structuration  du contenu soit  une clef essentielle  dans la réalisation  d'un  site 
accessible, ce contenu doit être traité de manière correcte afin d'être apprécié par tous.
Le contenu n'est pas uniquement ce qu'on lis à l'écran, il est présent dans d'autres parties 
moins visibles, à première vue. Nous en détaillons ici l'essentiel.

3.1 L'entète (head) et les méta-données

Chaque document html est constitué de deux parties distinctes : les entêtes, encadrées par la 
balise head, et le corps, par la balise body.
Le rôles des entêtes est de permettre de mieux décrire la page, de donner des informations sur 
le contenu de la page (langue, feuilles de style utilisées, titre de la page, jeu de caractère utilisé, 
meta données, etc.).
On veillera impérativement à préciser dans ces entêtes les éléments suivant, en respectant cet 
ordre :

19
 – jeu de caractère utilisé : les jeux de caractères étant divers et variés suivant les systèmes 
d'exploitation et les langues, ce paramètre permettra d'indiquer au navigateur celui qu'il 
doit utiliser pour présenter correctement la page. On en profitera pour préciser le type de 
contenu à afficher.
<meta http­equiv="Content­Type" content="text/html; charset=iso­8859­1" />

– titre de la page : c'est ce qui apparaît en général dans les favoris, et comme titre de la 
fenêtre dans les navigateurs web graphiques.
<title>Le titre de ma page</title>

– déclaration des feuilles de style. Il peut y avoir plusieurs déclarations de feuilles de style. 
Voir le chapitre "mise en forme" pour plus de détails sur les feuilles de style.
<link rel="stylesheet" type="text/css" href="adresseDeMaFeuille1.css" />

– résumé, description et détails sur le contenu de la page avec la balise meta : cette balise 
possède de nombreux attributs. Le plus important en matière d'accessibilité est l'attribut 
http­equiv valant description qui doit donner un aperçu du contenu de la page.
<meta http­equiv="description" content="Description rapide de la page" />

3.2 Le texte
Le texte est probablement l'élément le plus important quand on parle de contenu, puisque c'est 
le seul qui reste naturellement accessible quelle que soit la configuration utilisée. En général, c'est 
par le texte que la majeure partie de l'information est véhiculée.
Il s'agira donc de veiller à le présenter et à le structurer correctement afin de garantir une 
bonne accessibilité de la page.
De même, afin de faciliter la compréhension des outils de description d'écran, notamment les 
synthèses vocales, il est important d'éviter les coquilles, les fautes d'orthographe ou de grammaire, 
ces dernières pouvant rendre incompréhensible une partie du contenu.
Nous donnerons également, outre les recommandations concernant le texte lui­même, certains 
conseils généraux qui faciliteront l'accessibilité des textes présentés.

3.2.1 Structuration du texte

Nous   nous   contenterons   ici   de   rappeler   l'importance   des   titres,   paragraphes,   labels   de 
formulaire et listes que nous avons décrits plus haut.
En règle générale, il faut traiter un texte en html de la même manière qu'avec un éditeur de 
texte, c'est à dire en utilisant l'ensemble des éléments précédemment cités.
D'autres fonctionnalités du html vont nous permettre d'améliorer encore l'accessibilité de ce 
texte, en voici les principales.

20
 3.2.2 Jeu de caractères et paramètres linguistiques
Nous avons vu dans le paragraphe sur les entêtes qu'il fallait impérativement préciser le jeu de 
caractère utilisé dans le document, et comment procéder.
Nous   allons   ajouter   une   règle   supplémentaire   en   demandant   d'identifier   la   langue   dans 
laquelle la page est écrite.
Nous   utiliserons   pour   cela   un   attribut   de   la   balise  html,  qui   dépend   du   langage   de 
programmation choisi :
<html xml:lang="fr"> pour xhtml
<html lang="fr"> pour html

Il est fréquent qu'une partie du texte ne soit pas dans la langue de la page. Dans ce cas, on 
utilisera l'attribut lang de la balise de texte pour indiquer le changement temporaire de langue dans 
le contenu.
Exemple :
Comme dit le proverbe, chi va piano va sano.
Se traduira en html :
<p>Comme dit le proverbe : <i lang="it">Chi va piano va sano</i></p>

3.2.3 Les attributs de texte

Les attributs de texte doivent être utilisés avec prudence. On distinguera une fois encore la 
mise en forme du contenu.
Un attribut de texte ne doit pas servir à la mise en forme, c'est le rôle de la feuille de style. Il 
doit être utilisé soit pour mettre en valeur un mot ou une expression dans un texte, soit pour 
préciser le sens d'un mot ou d'une expression.
Le changement d'apparence du texte attribué ne doit être qu'une conséquence de ce procédé et 
non pas un but. 
Par   exemple,   supposons   que   nous   voulions   mettre   en   valeur   la   citation   contenu   dans   ce 
paragraphe:
Pour vivre heureux, le sage prétend qu'  Il n'est point nécessaire d'espérer pour  
entreprendre, ni de réussir pour persévérer, comme le disait Guillaume d'Orange.
Nous utiliserons un attribut de texte (ici la balise  i  ). Le texte cité est bien mis en valeur 
explicitement, au moyen d'une balise. La conséquence de cette mise en valeur est que la citation 
est en italique.
Supposons   maintenant   que   nous   voulions   mettre   un   titre   en   gras :   nous   n'utiliserons   pas 
d'attribut de texte, nous passerons par la feuille de style afin de réaliser cette opération.

21
 Exemples :
<h4><b>Mon titre</b></h4> 
Non! On utilise la balise b à des fins de mise en forme et non de mise en valeur du texte.

<b>Mon titre</b> 
Non! Un titre doit être déclaré à l'aide des balises h1, h2 etc....

<h4>Mon titre</h4>
Et dans la feuille de style :
h4{
font­weight: bold;
}
Oui!   On   gère   la   mise   en   forme   dans   la   feuille   de   style,   et   le   titre   est   identifié 
correctement.
De la même manière, on évitera les définitions de style à l'intérieur des balises de texte, ou 
tout   autre   stratagème   du   même   genre   aboutissant   à   associer   le   contenu   et   la   mise   en   forme 
autrement que par les feuilles de style (déclaration de font dans le code html, changement des 
tailles de police, de couleur, etc.).

3.2.3.1 Gras, italique, souligné, couleur

Les balises b, i, u, respectivement gras, italique et souligné, devraient permettre largement de 
mettre en valeur le texte.
Au   besoin,   on   pourra   les   redéfinir   dans   la   feuille   de   style,   ou   leur   affecter   une   classe 
particulière (citation, auteur, référence, etc.).
Il est important d'utiliser ces balises particulières car elles véhiculent une information qui sera 
traitée de manière différente suivant les configurations. On s'assure donc une bonne interprétation 
de nos intentions en passant par elles plutôt que par d'autres non prévus au départ pour jouer ce 
rôle.
La couleur du texte ne devrait pas être gérée directement dans le code source d'une page 
HTML. On préférera la définir à l'aide d'une feuille de style.

3.2.3.2 Abréviations et Acronymes

Html offre la possibilité d'expliquer un acronyme ou une abréviation directement dans le code 
html sans pour autant alourdir l'affichage du texte. On utilisera donc systématiquement les balises 

22
acronym et abbr chaque fois que l'occasion se présente.
Dans le cas d'une abréviation ou d'un acronyme d'une langue différente de celle du site, on 
précisera cette langue à l'aide de l'attribut lang de ces balises.
Exemple :
Le   site   de   la  DSI  de   l'INSA  doit   être   accessible  asap  comme   le   préconise   les 
recommandations de la WAI.
<p>
Le   site   de   la   <acronym   title="Direction   des   Services   Informatique">DSI 
</acronym> de l'<acronym title="Institut National des Sciences Appliquées">INSA 
</acronym>doit   être   accessible   <abbr   lang="en"   title="As   Soon   As 
Possible">ASAP</abbr> comme le préconise les recommandations de la <acronym 
lang="en" title="World Accessibility Initiative">WAI</acronym>.
</p>
On   pourra  considérer qu'il  n'est  nécessaire d'expliciter   un même  acronyme ou  une même 
abréviation qu'une seule fois par page, mais rien n'empêche de le faire systématiquement, bien au 
contraire.

3.2.4 Les liens hypertextes

Un lien hypertexte, matérialisé par une balise d'ancre a, permet d'accéder à une page d'un site 
ou a une section de page.
En conséquence, son contenu doit être explicite et permettre à l'utilisateur de savoir où il se 
rend. Il faudra donc veiller à préciser la destination grâce à la propriété title du lien si le contenu 
ne permet pas de le déterminer, et/ou utiliser un contenu clair.
On évitera également d'enchaîner une série de liens afin de ne pas rendre la navigation trop 
pénible, ni à proposer un trop grand nombre de liens sur une page (sauf si c'est le but de la page 
bien entendu, mais il faudra alors bien organiser ces liens).
Dans la mesure du possible, on évitera de créer de nouvelles fenêtre lorsque le lien est activé, 
afin de ne pas perdre l'utilisateur.
Exemples :
<p>Veuillez   cliquer   <a   href="destination.html">ici</a>   pour   accéder   à   ma  
page.</p>
Non! Le contenu de l'ancre ne permet pas de déterminer la destination.
<p>Vous   pouvez   touver   des   informations   sur   les   sites   <a   href="site1.html">  
site1</a><a href="site2.html">site2</a>etc...<a href="siteN.html">siteN</a></p>
Non! Il y a trop de liens qui s'enchaînent.

23
 <p>Visitez le <a  href="siteINSA.html"  title="Site de l'Institut National des Sciences  
Appliquées">site de l'INSA de Lyon</a> pour plus d'informations.</p> 
Oui! Le contenu du lien est clair et en plus on précise à l'aide de l'attribut title l'acronyme 
et le contenu du site cible.

3.3 Les images

Les images offrent souvent de nombreuses informations. Il faut néanmoins s'arranger pour 
qu'un navigateur texte soit capable de restituer cette information sans avoir recours à l'image.
Une image ne doit jamais être utilisée en tant que contenu si elle n'a qu'un rôle de mise en 
forme. De plus, les images transparentes servant à la mise en page sont à proscrire complètement.
On s'efforcera, comme pour les fichiers, d'utiliser des formats d'images ouverts, c'est à dire 
dont le codage est connu de tous (par exemple : le format PNG).
Plus   l'information   véhiculée   par  l'image   est   importante,   plus   le   texte   alternatif   devra   être 
complet.   On   utilisera   éventuellement   l'attribut  longdesc  afin   de   donner   un   lien   sur   une   page 
expliquant cette image dans les cas les plus complexes.

3.3.1 Texte alternatif, description

Chaque image doit être pourvu d'un attribut alt, qui signifie "texte alternatif". Cet attribut sera 
utilisé lorsqu'un navigateur ne sera pas capable d'afficher l'image, et le substituera au contenu qui 
était constitué par l'image.
Cette recommandation n'est pas uniquement destinée aux navigateurs en mode texte mais bien 
à   l'ensemble   des   navigateurs,   qui   ne   possèdent   pas   forcément   tous   les   outils   nécessaires   au 
décodage de tous les formats d'images existants.
Certains développeurs affectent une valeur nulle aux textes alternatifs des images, afin de 
passer   les   tests   des   validateurs   automatiques.   Cette   solution   ne   devrait   pratiquement   pas   être 
utilisée, sauf dans certains cas particuliers où le développeur considère que l'image ne véhicule 
aucune information et ne sert à rien (on est d'ailleurs en droit de se demander à ce moment si il est 
bien pertinent de conserver cette image...).
Certaines images particulières véhiculent une information très spécifique, comme les textes 
scientifiques ou musicaux. Voir plus bas ces cas particuliers.
Dans le cas d'une image très compliquée à décrire, on aura recours à une page d"explication 
qu'on précisera à l'aide de l'attribut longdesc (description longue).
Exemples :
<p><img   src="logoINSA.png"  alt="logo   :Bienvenue   sur   le   site   de   l'INSA"  
title="Logo de l'INSA" /> </p>

24
 <p><img src="planINSA.png"  alt  = "plan pour se rendre à l'INSA"  title="plan  de  
l'INSA" longdesc= "seRendreA­INSA.html" /></p>
Attention : influencés par le mauvais comportement de certains navigateurs, on utilise parfois 
à tort l'attribut alt afin d'afficher une info­bulle au passage de la souris sur l'image. C'est le rôle de 
l'attribut title et non celui de l'attribut alt.

3.3.2 Le texte scientifique et le texte musical

Voir   plus   bas   " Les   expressions   mathématiques   et   scientifiques "   et   "les   expressions 
musicales".

3.4 Les tableaux

Le principe des tableaux en tant qu'éléments structurels a été expliqué plus haut.
On veillera à respecter les règles d'accessibilité pour chaque élément de contenu du tableau, 
texte, image ou autre.
Le contenu d'un tableau doit se plier aux mêmes exigences que tout autre contenu.

3.5 Les fichiers

Html permet de proposer n'importe quel type de fichier au téléchargement. Bien que n'étant 
pas directement considéré comme un contenu Html, il conviendra néanmoins de d'assurer que ces 
fichiers sont accessibles par tous.
On évitera donc de proposer des fichiers au format propriétaire, nécessitant une configuration 
spécifique (systèmes d'exploitation, logiciel dédié, matériel) pour être interprétés.
Si   cela   n'est   pas  possible,  on  s'efforcera  soit  d'offrir   une  alternative   à l'utilisateur   (même 
contenu de fichier dans d'autres formats, explication du contenu du fichier, ...), soit de mettre à sa 
disposition un moyen lui permettant d'accéder au contenu du fichier (téléchargement d'un logiciel 
par exemple). A ce propos, il convient de ne pas imposer le téléchargement d'un logiciel trop 
volumineux, non­sécurisé (spyware et autres surprises), ou piraté. On évitera également d'obliger 
l'utilisateur à acquérir une licence logicielle si il souhaite accéder uniquement au contenu d'un 
fichier.
Certains formats de fichiers texte convertissent le texte en image, ce qui rendra le document 
inaccessible aux utilisateurs non­voyants. On s'efforcera de na pas utiliser ce type de formats.
On   utilise   généralement   des   ancres   contenant   l'adresse   du   fichier   pour   permettre   son 
téléchargement :   on   n'oubliera   pas   d'utiliser   l'attribut  title  pour   la   description   du   contenu   du 
fichier.

25
 3.6 Le contenu audio-visuel
Il   est   possible   de  mettre   à  disposition   des   internautes   des   ressources   multimédia,   soit   en 
téléchargement,   soit   directement   comme   contenu   d'une   page   internet.   Afin   de   rendre   ces 
ressources accessibles le mieux possible à l'ensemble des utilisateurs, il conviendra de respecter 
les règles suivantes :

3.6.1 La vidéo
Une vidéo est un fichier multimédia encodé d'une certaine manière, qui nécessite un codec 
afin d'être lisible. Le choix de cet encodage est très important, puisqu'il existe un certain nombre 
de   codecs   propriétaires   qui   nécessitent   parfois   l'installation   de   logiciels   spécifiques   pour 
fonctionner.
Comme pour les fichiers, on s'efforcera de n'utiliser que des codecs ouverts, fonctionnant sur 
toutes les plateformes. 
Outre ce qui précède, et qui n'est pas suffisant, il y a plusieurs moyens de rendre accessible 
une vidéo. Certains formats de vidéo, et/ou certains logiciels permettent d'ajouter des fichiers de 
sous­titrage aux vidéos, ou d'inclure de manière optionnelle ces sous­titres. Le sous­titrage permet 
aux personnes non­entendantes, ou aux utilisateurs ne disposant pas de matériel de restitution 
audio de bénéficier néanmoins du contenu de la vidéo.
Au contraire, l'audiotranscription permet aux utilisateurs non­voyants de mieux appréhender 
ce  contenu.   L'audiotranscription  est une bande sonore supplémentaire  qui décrit  la vidéo   en 
complément des dialogues. Certains formats de vidéo permettent d'enregistrer plusieurs bandes 
sonores sur un même fichier.
Dans   le   pire   des   cas,   si   il   n'est   pas   possible   de   réaliser   un   sous­titrage   et   une 
audiotranscription, on veillera à décrire textuellement le contenu de cette vidéo.
La  taille  des fichiers vidéos peut­être importante, il faudra dans ce cas proposer plusieurs 
versions de tailles moindre, en réduisant la qualité d'image et de son par exemple.
On   évitera   également  d'incorporer les  vidéos  au contenu  de la page avec des  outils   non­
accessibles, comme flash par exemple.

3.6.2 Le son
Comme pour la vidéo, il s'agira d'utiliser un format audio ouvert.
Les recommandations en matière de taille et d'utilisation sont les mêmes que pour la vidéo. Il 
faudra donc prévoir une transcription sous forme de texte du fichier son, si cela est réalisable 
(paroles, discours, etc.).
Dans le cas particulier du fond musical sur une page, on précisera qu'un fichier est utilisé de 
cette manière, et on proposera si nécessaire une transcription textuelle de ce fichier.

26
 3.7 Les expressions mathématiques et scientifiques
Actuellement, la plupart des expressions mathématiques et scientifiques utilisées sur le net 
sont   représentées   sous   forme   d'images   (bien   qu'il   existe   une   surcouche   de   XML,   MathMl, 
permettant cette représentation, mais elle n'est qu'encore très peu utilisée). Il convient donc de leur 
donner un texte alternatif permettant à tous d'en comprendre le sens.
Cependant, pour les utilisateurs de plages braille, ce procédé risque de ne pas être satisfaisant, 
puisque le braille mathématique est un langage particulier et linéaire.
Une solution afin de rendre notre site réellement accessible serait donc de commenter ces 
images par la transcription de l'expression en braille mathématique.
Fort   heureusement,   il   existe   un   logiciel   libre   qui   permet   de   réaliser   cela   pour   les 
mathématiques françaises :BraMaNet8.
C'est   un   traducteur   d'expressions   mathématique   en   braille.   Il   ne   fonctionnera   qu'avec   les 
normes françaises, puisque le braille mathématique diffère suivant la langue.
Pour plus de détails sur ce point précis et des renseignements sur la marche à suivre, consulter 
le site de la mission handicap de Lyon 1 : http://handy.univ­lyon1.fr

3.8 Les expressions musicales

Le   problèmes   des   expressions   musicales   et   de   MusicMl   rejoint   celui   des   expressions 
scientifiques et de MathMl. De la même manière, on utilisera le commentaire d'image spécialisé 
(cas d'une expression courte) ou une page spécifique précisée dans l'attribut longdesc.

Il   existe   un   logiciel,  Braille   Music   Editor,   qui   permet   d'effectuer   cette   transcription. 
Malheureusement, ce logiciel  est  vendu sous  licence, et les projets  libres  n'en sont qu'à  leurs 
débuts.

3.9 Les applets Java

Les problèmes d'accessibilité http://trace.wisc.edu/world/java/java.htm

3.10 Flash
Flash n'est tout simplement pas accessible dans de nombreuses configurations!
De plus, c'est un format propriétaire, pas très sécurisé, qui sert essentiellement à faire de la 
mise en forme tout en mélangeant contenu et présentation.
Nous déconseillons fortement l'utilisation de ce genre de produits, d'autant que les feuilles de 
styles permettent la plupart du temps de s'en passer.
Si toutefois il est indispensable d'utiliser Flash, prévoyez une alternative accessible.

8 BRAille MAthématique pour interNET :http://handy.univ­lyon1.fr/projets/bramanet/

27
 3.11 Javascript
Javascript ne devrait être utilisé qu'en dernier recours, et uniquement pour de la mise en forme 
(mise   en   relief   sur   passage   souris),   en   aucun   cas   du   contenu   (formulaire   de   connexion   par 
exemple).
Comme flash, cette technique n'est en effet pas accessible.
On veillera à ce que le site fonctionne même si javascript est désactivé.

28
IV. La mise en forme
1. Les feuilles de style
Les feuilles de style, ou CSS (Cascading Style Sheets), sont des fichiers destinés à mettre en 
forme les documents HTML. On les déclare dans l'entête du document concerné de cette manière :
<link rel="stylesheet" type="text/css" href="adresseDeMaFeuille1.css" />
Cet outil est très puissant, car il permet de dissocier le contenu du document de sa mise en 
forme. De plus, une feuille de style peut être réutilisée autant de fois que nécessaire, sans avoir à 
être récrite. Un seul fichier css peut servir à une infinité de pages HTML, ce qui rend très facile la 
maintenance de la mise en forme de l'ensemble des pages d'un site par exemple (il suffira de 
modifier   la   feuille   de   style   pour   modifier   automatiquement   l'aspect   de   l'ensemble   des   pages 
l'utilisant).
Une   feuille   de   style   sera   d'autant   plus   efficace   qu'elle   mettra   en   forme   un   contenu   bien 
structuré et déjà accessible (voir le chapitre précédant).
Il est possible d'utiliser plusieurs feuilles de style pour un même document HTML. Dans le 
cas de sites complexes, on peut ainsi gérer séparément la mise en forme des liens, des structures, 
des images, etc.
Certaines   feuilles   de   style   peuvent   être   dédiée   à   un   certain   type   d'affichage   (impression, 
affichage   à   l'écran,   présentation   projetée,   etc.).   On   peut   donc   aménager   le   contenu   suivant 
l'utilisation qu'il en sera faite.

Toutefois,  il   est   primordial   de   ne   véhiculer   aucune   information   sur   le   contenu 

exclusivement à l'aide des feuilles de style. En cas de mise en emphase d'une partie d'un texte, 
utiliser un nom de classe ou un identifiant suffisement explicite pour permettre à un utilisateur 
n'utilisant pas les feuilles de style de comprendre néanmoins l'intention de l'auteur.

1.1 Structuration d'une feuille de style

Une feuille  de style  doit  avant tout  refléter l'organisation  et la structuration du document 
auquel on l'applique. On devrait donc logiquement retrouver les identifiants et les classes de ce 
document.
Une feuille de style permet de gérer la mise en forme d'un élément, c'est à dire à la fois son 
aspect (police de caractère utilisée, taille, couleur) et sa position dans la page (marges, espacement, 
position absolue ou relative, etc.).

1.2 Utilisation des feuilles de style

Une   feuille   de   style   est   également   soumise   à   certaines   contraintes   d'accessibilité.   Il   est 

29
d'autant plus important de les respecter qu'une erreur de conception risque de se répéter un grand 
nombre de fois, puisqu'elle sera activée chaque fois que l'élément qu'elle décrit sera utilisé.
Il est également possible de décrire un style à l'intérieur du document HTML :cette méthode 
ne devrait pas être utilisée, car elle ne permet pas toujours de désactiver le style. On spécifiera 
donc chaque style à l'intérieur d'une feuille de style liée, et non directement dans un document 
HTML.
De  plus,   un  contenu   HTML   doit   tojours   être  compréhensible   même   si   l'on   désactive   ses 
feuilles de styles associées.

Voici quelques recommandations essentielles pour bien utiliser une feuille de style :

1.2.1 Disposition des éléments

La mise en forme par tableau est largement dépassée par le positionement à l'aide des feuilles 
de style, beaucoup plus cohérent et léger. Cependant, il est indispensable de respecter certaines 
règles :
– Utiliser des unités de longueur relatives et des pourcentages. Même en cas de positionnement 
absolu, il important d'utiliser des unités relative. La plus simple est le « em », proportionelle à 
la taille de police par défaut utilisée par le navigateur. Elle s'adaptera aux changements de 
résolutions d'écran.
– En règle générale, les longueurs absolues ne devraient pas être utilisées. On peut cependant 
« forcer » leur utilisation, à condition d'adapter la page en conséquence (longueur ou hauteur 
minimale). 

1.2.2 Mise en forme du texte

Les feuilles de style offrent de nombreuses propriétés pour gérer le texte : color, font, font­
family,   font­size,   font­size­adjust,   font­stretch,   font­style,   font­variant,   font­weight,   text­align, 
text­decoration, text­indent, text­shadow, text­transform... On ne devrait donc en aucun rencontrer 
de   balises   « blink »,   « blockquote »,   « marquee »,   « font »   ou   « basefont »   dans   un   document 
HTML. Ces balises sont d'ailleurs dépréciées ou ne font pas partie des spécifications du W3C.
Comme pour la disposition d'élément, on utilisera l'unité « em » pour définir les tailles de 
polices de caractère.
On spécifiera toujours une police générique par défaut. 

Certaines   propriétés   (letter­spacing,   white­space,   word­spacing)   permettent   également   de 

gérer l'espacement entre chaque caractère ou chaque mot : il n'est donc pas utile de rajouter des 
espaces entre les lettres d'un mot pour réaliser un effet visuel d'élargissement par exemple. Les 
descripteurs d'écran (synthèses vocales, convertisseurs texte, etc.) risquent de mal interpréter le 
sens de la phrase ou du mot.

Les propriétés firts­letter ou first­line peuvent également servir à réaliser des effets de lettrine 
ou de mise en emphase. Cependant, ce genre de mise en forme risque de ne pas être perceptible 

30
par tout les utilisateurs. 

1.2.3 Les couleurs

Les couleurs, bien utilisées, peuvent améliorer sensiblement l'accessibilité d'un site web.
Les feuilles de styles offrent de nombreuses propriétés sur les couleurs : color,  background­
color,  border­color, etc.
On respectera cependant les recommandations suivantes :
– Ne   jamais   fournir   une   information   uniquement   par   une   couleur.   Par   exemple,   éviter   les 
formulations du genre « Cliquez sur un des liens en rouges » ou « Sélectionner tel item dans la 
liste bleue ».
– Ne pas utiliser de dominante verte sur fond rouge ou reciproquement (pour les daltoniens).
– Contraster suffisement une page, sans pour autant la rendre incompréhensible si on inverse les 
couleurs (le blanc devient noir, le rouge devient vert, etc.). C'est probablement la tache la plus 
délicate. Pour se faire une idée, imprimer la page sur une imprimante noir et blanc, ou utiliser 
les inverseurs de couleurs logiciels inclus dans certains navigateurs.
– Ne pas utiliser de fond blanc : ils peuvent éblouir certains utilisateurs. Il suffit de mettre une 
légère teinte sur l'arrière plan (blanc cassé par exemple).
– Définir les couleurs à l'aide de nombres et pas de nom.

1.2.4 Les images

Les feuilles de style permettent l'utilisation d'images dans leur code (liste à puce, image de 
fond d'un éléments, etc.
Bien qu'il soit possible de commenter ces images, peu nombreux sont les navigateurs capables 
de bien gérer cette possibilité.
En règle générale, on s'assurera que le site reste accessible même si la feuille de style est 
désactivée.
Les images ne devraient jouer qu'un rôle esthétique, rien de plus.

1.2.5 Cohérence des feuilles de styles

Lors de l'utilisation de plusieurs feuilles de style, on veillera à conserver de l'une à l'autre les 
mêmes définitions et règle de nommage pour les différents éléments. Par exempe, si une feuille de 
style sert pour la mise en page, et contient un élément « bandeau », on devrait retrouver si elles 
existent   les   propriétés   de   cet   élément   dans   les   autres   feuilles   de   style   associées   (gestion   des 
polices, impression, etc.). 

1.3 Les feuilles de styles particulières

Nous avons mentionné au début de ce chapitre qu'une feuille de style pouvait être adaptée à 
un type d'affichage. Ce comportement dépend de la manière dont est déclarée la feuille de style 
dans le document HTML.

31
 Nous expliquerons dans ce qui suit comment mettre en pratique cette possibilité.

1.3.1 La feuille standard

Si rien n'est précisé lors de la déclaration d'une feuille de style, alors celle­ci sera utilisée par 
défaut pour l'ensemble des affichages, à moins qu'une feuille de style plus spécifique (impression 
par exemple) soit également déclarée.
Il est néanmoins important de préciser que dans le cas des navigateurs en mode texte, cette 
feuille   de   style   ne   sera   pas   utilisée,   d'où   l'importance   d'utiliser   un   contenu   déjà   structuré 
correctement.

1.3.2 La feuille d'impression

Cette feuille de style particulière permet d'organiser la page HTML en vue de son impression. 
On pourra par exemple choisir de masquer certains menus, de ne pas afficher les éléments de 
navigation, de changer les couleurs pour une meilleure lisibilité, etc.
On déclare une feuille de style pour l'impression à l'aide de l'attribut media de cette manière :
<link rel="stylesheet" type="text/css" media="print" href="mafeuilleImpression.css" />

Voici quelques éléments de programmation css utiles lors de la réalisation d'une feuille de 
style d'impression :
– pour spécifier une orientation Portrait, utilisez la règle : 
@page { size: portrait; } ;
– pour spécifier une orientation Paysage, utilisez la règle : 
@page { size: landscape; } ; 
– pour spécifier la taille des marges (ici, 3cm), utilisez la règle : 
@page { margin: 3cm; } ;
Il sera bien entendu possible de spécifier différemment les marges de gauche, droite, 
haut et bas en précisant margin­left, margin­right, etc.

– Il est également possible de préciser l'orientation d'un élément en particulier :
@page paysage {size: landscape} ; //déclaration
div {page: paysage} img {page: paysage}  ; //utilisation

– Pour ne pas imprimer un élément :
div{display: none;} 

– pour empêcher qu'un élément soit imprimé sur deux pages : 
img{page­break­inside: avoid;}

32
 – pour forcer un saut de page avant un élément : 
table{page­break­before: always;}

­ pour forcer un saut de page après un élément : 
table{page­break­after: always;}
(Attention néanmoins au coût en papier qque peuvent engendrer de telles propriétés).

– pour afficher les adresses des liens :
a:after { content: " (" attr(href) ") "; }
L'adresse du lien sera écrite entre parenthèses à la suite de ce lien.

Pour plus de détails quant à l'utilisation de ces propriétés, consulter les liens donnés à la fin du 
document.

1.3.3 Le mode texte

Si besoin est, il peut être intéressant de réaliser une feuille de style uniquement pour gérer le 
texte, un peu comme un émulateur de navigateur texte.
Si cette possibilité était intéressante il y a encore quelques années, les outils des nouveaux 
navigateurs permettent en général de faire ce travail.

1.3.4 Les autres feuilles de style

Il   est   également   possible   de   réaliser   des   feuilles   de   styles   pour   téléphone   portable, 
présentation projetée, etc.
Ce sont les objectifs d'utilisation d'un site qui détermineront quelles feuilles supplémentaire 
sont à prévoir.
Chaque utilisation spécifique sera précisée à l'aide de l'attribut media.

2. Les autres outils de mise en forme

2.1 Javascript
Voir plus haut

2.2 Flash
Voir plus haut

33
V. Tester l'accessibilité d'un site
1. Les validateurs en ligne
Bien qu'efficaces pour se donner une première impression sur la qualité d'une page en matière 
d'accessibilité, les validateurs ne sont que des outils d'aide à la décision, et leur diagnostics doit 
être systématiquement vérifiés.
S'ils sont performants en ce qui concerne le respect des normes de programmation en HTML, 
ils présentent certaines faiblesses dès qu'on les utilise pour vérifier les critères d'accessibilité; d'une 
part, car certains de ces critères ne sont pas vérifiables automatiquement (utilisation des couleurs, 
structuration, etc.); d'autre part, car certains critères peuvent sembler respectés en apparence, mais 
ne le sont pas en réalité (commentaires d'images non pertinents ou vide, tableaux mal conçus, etc.).
Voici une présentation comparée de certains de ces validateurs :
http://www.cynthiasays.com/
http://webxact.watchfire.com/
http://validator.w3.org/
http://jigsaw.w3.org/css­validator/

2. La validation manuelle
La   validation   manuelle   reste   la   seule   validation   efficace   à   100%,   bien   qu'une   validation 
automatique permette en général d'identifier les principales erreurs ou dysfonctionnements.
Elle consiste en la vérification des recommandations présentées dans ce document, et peut 
s'appuyer en complément sur les recommandations du W3C et de la WAI.
Nous présentons  également  quelques propositions  permettant de réaliser un travail  de test 
exhaustif.

2.1 Tester avec différents navigateurs

Malheureusement, un site accessible dépend souvent de la qualité des navigateurs utilisés. En 
l'occurrence, le navigateur le plus utilisé au monde est également un de ceux qui présentent le plus 
de dysfonctionnements.
Nous recommandons de tester une pages avec différents navigateurs, sur différents systèmes 
d'exploitation,   afin   d'avoir   une   vision   complète   du   comportement   de   cette   page   sous   des 
configurations logicielles variées.
Cette   recommandation   est   particulièrement   importante   lors   du   développement   d'un   site 
internet :   il   est   préférable   d'adapter   le   plus   tôt   possible   son   travail   afin   de   ne   pas   avoir   de 
mauvaises surprises en fin de projet.
Un   autre   point   de   vue   considère   que   c'est   aux   éditeurs   des   navigateurs   de   respecter 
correctement les normes du W3C, non aux développeurs d'adapter leurs pages. Il est important de 

34
 signaler que ce ne seront pas les mauvais navigateurs qui souffriront le plus de cette philosophie, 
mais bien les utilisateurs. Un point de vue louable mais difficile à appliquer...

2.2 Examen du code source

La plupart des navigateurs permettent de visionner le code source d'une page affichée. Même 
si   l'on   n'est   pas   informaticien,   le   code   source   d'une   page   révèle   très   souvent   les 
dysfonctionnements de celle­ci, ne serait­ce que visuellement. L'utilisation d'un navigateur texte 
peut être un bon compromis pour les moins téméraires (voir paragraphe suivant).
Certains   critères   sont   plus   facilement   vérifiable   à   l'aide   du   code   source   (utilisation   des 
tableaux, commentaire des images, structuration), et ne demandent pas de compétences techniques 
particulières, juste un peu de pratique.
En cas de doutes ou de litiges, c'est cet examen et lui seul qui devrait faire autorité.

2.3 Utilisation de navigateurs en mode texte

Outre le fait d'être représentatifs d'un ensemble d'utilisateurs (donc de configurations),  les 
navigateurs texte donnent également un bon aperçu de la structure d'une page, de manière plus 
triviale que l'examen du code source. Ils deviennent de fait un moyen rapide de se faire une idée 
sur la qualité de la structuration d'une page.
Efficace   pour   un   audit   général,   ce   test   trouvera   ses   limites   dans   le   cas   d'une   analyse 
exhaustive.
Un des navigateurs texte les plus utilisés est Lynx9. Il en existe une version libre pour chaque 
système d'exploitation.
Certains navigateurs permettent également une navigation optionnelle en mode texte (Opéra, 
Firefox, ...).

2.4 Un outil très pratique : Firefox

Sans vouloir faire de publicité particulière pour tel ou tel navigateur, il se trouve néanmoins 
que l'un d'entre eux est reconnu par la plupart des développeurs comme faisant partie des plus 
respectueux des normes :il s'agit de Mozilla Firefox10.
Firefox   propose   notamment   un   ensemble   d'extensions   (plugins)   particulièrement   efficaces 
pour tester une page : il s'agit notamment de WebDeveloper11  (barre d'outils de mise en forme, 
mise   en   relief   des   éléments   de   la   page,   gestion   des   styles)   et   HTML   Validator 12  (validation 
automatique basée sur Tidy).
De plus, Firefox est un logiciel libre fonctionnant avec les principaux systèmes d'exploitation 
actuels.

9 Site officiel de lynx :http://lynx.isc.org/ et documentation en français :http://www.dg77.net/tekno/lynx/index.htm
10 Version française de Firefox téléchargeable sur http://www.mozilla­europe.org/fr/products/firefox/
11 Version française de WebDeveloper téléchargeable sur http://joliclic.free.fr/mozilla/webdeveloper/
12 Version anglaise de HTML Validator téléchargeable sur http://users.skynet.be/mgueury/mozilla/

35
 C'est donc un outil fort pratique d'aide au diagnostic.
L'extension   WebDeveloper   permet   par   exemple   de   désactiver   la   plupart   des   catégories 
d'éléments sur une page, ce qui permet de vérifier si celle­ci demeure accessible sans images, 
feuilles de style, javascript, etc.

2.5 Validation par les utilisateurs

La validation par un panel d'utilisateurs disposants de configurations matérielles et logicielles 
très variées est probablement le meilleur test « grandeur nature » que peut espérer un développeur 
de site internet.
Cependant, il conviendra de se méfier de ce genre de validation, les utilisateurs ayant souvent 
tendance à trouver « officiellement » un site formidable, mais à ne pas vouloir l'utiliser par la suite.
Certains  publics, notamment  dans le monde du handicap, ont développé des habitudes  de 
navigations, bonnes ou mauvaises, et ne sont pas forcément sensibilisés à la notion d'accessibilité 
(même dans le milieu du handicap) : il est préférable de faire tester un même site par plusieurs 
utilisateurs disposant de la même configuration avant de tirer des conclusions trop attives.
Il ne faut pas perdre de vue également qu'il est quasiment impossible de prévoir toutes les 
configurations possibles. 
En cela, le bon respect des normes est le meilleur gage de réussite...

36
VI. Ressources
Sites internets
HTML
Structuration : 
http://css.alsacreations.com/Bases­et­indispensables/La­structure­des­balises­bloc­et­en­
ligne
Tableaux : un tutoriel ludique mais sérieux sur le rôle et l'utilisation des tableaux
http://www.cybercodeur.net/weblog/presentations/seybold/index.html
Listes : site de djidjo + le mien

w3c/wai : technical tips for html

CSS
w3c/wai : 
technical tips for css
Exemples d'utilisation des css : The beauty in css design, css zengarden
http://www.csszengarden.com/

Mathématiques
Le site de BraMaNet (traducteur de maths en Braille) à la mission handicap de lyon 1 :
 http://handy.univ­lyon1.fr/projets/bramanet/
Exemple de site à contenu scientifique : exercices de mathématiques (niveau terminale) sur 
le site de l'association des professeurs de mathématiques de l'enseignement public :
http://www.apmep.asso.fr/roc/index.html

Javascript

JAVA
Accessibilité de java : 
http://trace.wisc.edu/world/java/java.htm
Les critères IBM pour l'accessibilité et leur page sur l'accessibilité de java : 
http://www­306.ibm.com/able/guidelines/java/accessjava.html

37
 Une API java accessible : Sur le site de sun
http://research.sun.com/access/

Législation
Texte et commentaire de la loi n° 2005­102 du 11 février 2005 pour l'égalité des droits et 
des chances, la participation et la citoyenneté des personnes handicapées :
http://www.handicap.gouv.fr/point_presse/doss_pr/loi_egalite/sommaire.htm
http://www.adae.gouv.fr/article.php3?id_article=246

38
Bibliographie

39