FICHE 12

LES BALISES

 

1.Rappel des recommandation 3 et 4 des WCAG 1.0 :

Recommandation 3 :
" Baliser les documents avec les éléments structurants appropriés. Contrôler la présentation avec des feuilles de style plutôt qu'avec des éléments et des attributs de présentation. "

Recommandation 4:
" Utiliser un balisage facilitant la prononciation ou l'interprétation du texte abrégé ou en langue étrangère. "

Points de contrôle :3.1 (Priorité 2) ;3.2 (Priorité 2) ; 3.5 (Priorité 2) ; 3.6 (Priorité 2) ; 3.7 (Priorité 2) ; 4.1 (Priorité 1) ; 4.3 (Priorité 3)

Raisons de ces recommandations

Les balises sont des éléments nécessaires pour la bonne structuration du code html.
L'utilisation inappropriée du balisage restreint l'accessibilité. Le fait de détourner une balise pour créer un effet de présentation complique la tâche des utilisateurs de logiciels spécialisés quand ils essayent de comprendre l'organisation de la page ou d'y naviguer. Une page bien structurée, au contraire, facilitera la compréhension de tous.
Le balisage permet aux textes d'être lus correctement par les terminaux braille, les synthèses vocales et les dispositifs de traduction automatique.

2. Ce qu'il faut faire

La règle générale

Utiliser le balisage uniquement pour la structure de la page, du site.

Le type de document

Pour chaque document il est nécessaire d'indiquer son type : HTML, XML etc. Si ce type n'est pas indiqué, il se peut que les navigateurs ne sachent pas comment afficher le document. Cela peut aussi perturber les logiciels de lecture d'écran.
Pour un document conforme au HTML 4.01 transitional, utiliser la syntaxe :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
en début de document.
Une liste des grammaires valides est disponible sur le site de l'outil de validation HTML du W3C.

Les éléments en-tête

Les éléments en-tête doivent être utilisés en accord avec les spécifications et uniquement pour définir la structure du document.
L'utilisation adéquate des en-têtes aide à séparer le contenu de la structure, l'une des techniques fondamentales de l'accessibilité au Web. Les éléments d'en-têtes ne doivent pas servir uniquement à créer des effets de formatage. Les niveaux d'en-têtes doivent être utilisés correctement, dans un ordre logique. La consultation d'une liste des en-têtes de la page permettra aux utilisateurs d'obtenir une vue d'ensemble de la structure de la page. Cela permettra d'atteindre plus rapidement et plus aisément un paragraphe donné. Si les en-têtes sont utilisées de façon incorrecte, la page pourra être illisible.

Exemple : il faudra utiliser H2 pour indiquer une sous section de H1

Les listes et éléments de listes

Les listes et les éléments de listes doivent être aussi correctement balisés.
Pour une structure logique du contenu, il faut recourir aux éléments de liste HTML 'dl', 'ul' et 'ol' uniquement pour la création de listes, et non pas pour la création d'effets de formatage tels que la mise en retrait du texte. Des listes ordonnées et des indices contextuels tels que l'utilisation de nombres composés (ex.1, 1.1, 1.2, 1.2.1) empêchent que l'utilisateur ne se perde dans les listes.

Le balisage des citations

Utiliser le balisage des citations correctement.
La balise <blockquote> ne doit pas être utilisée pour réaliser des effets visuels tels que la mise en retrait du texte. Un lecteur d'écran, par exemple, interprète la balise <blockquote> comme une citation, ce qui risque une mauvaise interprétation du texte par l'utilisateur.

L'attribut " lang "

Les changements de la langue naturelle du texte d'un document et de tout équivalent textuel doivent être identifiés clairement. La spécification de langue peut être utile pour les traducteurs automatiques et cela simplifie le travail de recensement des moteurs de recherche.

Exemple :

- en HTML utiliser l'attribut 'lang' : <HTML lang="fr">
- en XML, utiliser 'xml:lang'

L'attribut " title "

Utiliser l'attribut " title " pour spécifier la forme complète de toutes les abréviations ou acronymes.

Exemple :

L'interprétation des abréviations avec les synthèses vocales peut varier et s'avérer difficilement compréhensible. Il est possible d'utiliser l'attribut :
<ACRONYM title= " journal officiel ">JO</ACRONYM>
Ainsi, au lieu de prononcer " jo ", la synthèse vocale prononcera " journal officiel ". Avec des navigateurs comme Internet Explorer, la signification des initiales JO apparaîtra en infobulle lorsque la souris est passée sur le mot.

 

3. Applications à l'aide des éditeurs HTML

  • avec Dreamweaver
    Dreamweaver ne permet pas directement d'insérer le type de document, l'attribut lang, etc… Cependant, Macromedia propose sur son site des extensions à Dreamweaver 4 permettant d'améliorer l'accessibilité d'un site. (voir www.macromedia.com/accessibility).

4. Exemples rencontrés sur les sites évalués