Développer un site accessible en XHTML et CSS Raoul MASSON : 11/2006.

Développer un site accessible en XHTML et

CSS

Raoul MASSON : 11/2006

Plan

• Introduction• Avantages des standards et d'une

sémantique sur le web• XHTML 1.0 – rappels de la syntaxe

générale• Feuilles de style et accessibilité• Techniques XHTML pour l'accessibilité• Outils et environnements de

développement

Introduction Les standards actuels :

XHTML 1.0, XHTML 1.1 + CSS2 sont (en principe) supportés par les navigateurs actuels sur les différentes plates-formes

Accessibilité et standards : Les standards permettent de créer des sites accessibles à 2 conditions :- les documents doivent être balisés "sémantiquement" (exemple : balise <h1> pour un titre principal au lieu d'un changement de graisse avec <b>)- tous les acteurs concourant à la création d'un site doivent être sensibilisés à la question de l'accessibilité

Avantages des standards et d'une sémantique sur le web

Avantages des standards et d'une sémantique sur le Web Les standards permettent :

• de créer des sites originaux, jolis, dynamiques• d'assurer une compatibilité avec tous les

navigateurs, toutes les plate-formes, tous les produits actuels ou à venir supportant ces standards

• aux anciens navigateurs et navigateurs en mode texte d’afficher, au minimum, le contenu textuel

• de faciliter l'accès au Web pour les personnes handicapées

Avantages des standards et d'une sémantique sur le Web Les standards permettent :

• de faire des économies de bande passante (grâce aux feuilles de style communes à plusieurs pages et gardée en mémoire cache)

• de faciliter la maintenance (toujours grâce aux CSS)• de faciliter la lecture du code (plus de tableaux

imbriqués, colspan, rowspan …)• de réaliser des économies de développement et de

maintenance• un apprentissage de la programmation facile

XHTML – rappels de la syntaxe générale

XHTML qu'est-ce que c'est ?

• XHTML (V1.0 en 2000) est une reformulation de HTML 4.01 en XML

• XHTML est une application XML• XHTML = le vocabulaire HTML fusionné avec

la syntaxe XML

XHTML pourquoi ?• En finir avec le laxisme des pratiques en

matière de balisage HTML• Supporter de nouveaux matériels : PDA,

téléphones mobiles …(les PDA n'interprètent pas un HTML mal codé)

• Répondre à la nécessité d’étendre HTML pour des contenus plus riches

• Répondre à la nécessité de fournir un sous ensemble de HTML pour des contenus simplifiés

Les points forts de XHTML

• Standardisation : plus de dérives par rapport à la norme

• Extensibilité : ajout possible de nouveaux éléments

• Rigueur : celle de XML élimination du code illisible possibilité de traitements automatisés - meilleure exploitation par les moteurs de recherche - interprétation possible par des logiciels couplés à des aides techniques (exemple : les lecteurs d'écran)

Les points forts

• Interopérabilité : XHTML est multi plate-formes

• Modularité : utilisation possible des technologies connexes à XML (MathML, VMRL, SVG, SMIL …)

• Pérennité des contenus (séparation contenu et présentation)

• Amélioration des liens : possibilité de pointer vers plusieurs ressources

• Meilleure utilisation des ressources réseau

Et l’accessibilité ?

XHTML : toutes les qualités pour le développement de contenus accessibles.

A condition :• que le développeur intègre l’accessibilité dans la gestion de ses projets• qu’il fournisse les contenus alternatifs et introduise des mécanismes complémentaires

Rappels XML

• Document bien formé : respect d’une syntaxe

• Document valide : conformité à une DTD : grammaire et règles à observer

XHTML : les éléments requis• Balise <title>

• Un et un seul élément racine : <html> </html>

• Spécif d’un espace de nommage : <html xmlns = “http://www.w3.org/1999/xhtml”>

• Balises <head> et <body>

XHTML : les éléments requis

DTD: Document Type Declaration • grammaire permettant de vérifier la conformité du

document à une syntaxe • fait référence aux standards du W3C • permet une interprétation correcte du code HTML par

le navigateur et les technologies d'assistance (lecteurs d'écran …)

XHTML : structure du document

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>Tout document doit avoir un titre</title></head><body>Contenu du document</body></html>

XHTML : règles de syntaxe

• Eléments et attributs en minuscules exemple : <html> </html>

• Attributs entre guillemets simples ou doubles : <img test.gif alt=“image test” />

• Eléments correctement imbriqués (pas de chevauchement de balises)


• Tout élément a une balise d’ouverture et une balise de fermeture

• En HTML, balises de fin non obligatoires pour :

<p> <li> <dt> <dd> <option>et les éléments vides indépendants : <br> <img> <input> <frame>


• En XHTML, balises de fin obligatoires : 2 syntaxes possibles :

<img test.gif alt=“image test” />< img test.gif alt=“image test”> </ img >

Au lieu de <br> on aura <br />

• Nom d’élément strictement identique dans les balises d’ouverture et de fermeture <img test.gif alt=“image test”> </img>


• Réduction des attributs non admise :

- en HTML :select name = "toto" size = "5" multiple

- en XHTML :select name ="toto" size ="5" multiple = "multiple"

• Les scripts doivent être inclus dans des sections CDATA :

<script type="text/javascript"></script>

XHTML : choix d'un DOCTYPEHTML 4.01 Strict, Transitional, Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML : choix d'un DOCTYPE XHTML Strict

Pas d'emploi de balises et attributs déclassés – respect de la syntaxe (plus de balises <center>, <font>, "align" … dans le code)

XHTML TransitionalPassage en douceur du HTML 4 au XHTML 1.0 : la syntaxe doit être respectée (fermeture des balises) mais certains éléments HTML4 sont encore acceptés

XHTML FramesetLes cadres sont acceptés : à proscrire – entravent l'accessibilité

Comment choisir un Doctype ?

Le choix :• HTML 4.01 Strict : si on n'utilise pas les technologies

liées à XML• XHTML 1.0 Strict : si on utilise les technologies XML

(parsing XSL, SVG, MathML ...) et aussi pour assurer l'accessibilité présente et à venir des sites

Remarques :• les DTD strictes impliquent la séparation contenu /

présentation = non validation des principaux attributs de mise en forme (meilleure productivité)

• XHTML : meilleure maintenabilité du code, meilleur rendu dans les futures évolutions des différents navigateurs

Identification de la langue Identifier la langue (utile pour les lecteurs

d'écran en synthèse vocale)• En HTML : <html lang="fr">

• en XHTML 1.0 : <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

• en XHTML 1.1<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Exemple de changement de langue dans une page :<html lang="de"> ... <blockquote

lang="fr"> ... </blockquote>

Identification de la langue Identifier la langue dans les balises "meta"

<meta http-equiv="content-language" content="fr">

• Meilleure indexation des pages• Facilite le travail des traducteurs automatiques

Signaler les changements de langue (fonctionne avec Jaws à partir de la V5)

• Après lui avoir demandé l'heure, il répondit <span lang="en">Sorry, I don't speak French !</span>

• <a href="http://www.w3.org/" hreflang="en" title="Le site du W3C, en anglais">http://www.w3.org/</a>

Identification du jeu de caractères

Définir le jeu de caractères utilisé dans la page<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">

• charset=iso-8859-1 : encodage classique pour les langues de l'Europe occidentale

• charset=iso-8859-15 : idem + quelques caractères supplémentaires comme le signe € ou le caractère œ

• UTF8 = Unicode pour la majorité des langues du monde

Outils pour passer de HTML à XHTML

L’outil TIDY

Feuilles de style et accessibilité

En partie inspiré de : CSS2 pratique du design web de Raphaël Goetter

Séparer la présentation et le contenu

L'utilisation des feuilles de style CSS ou XSL :

• permet à l'utilisateur d'appliquer sa propre feuille de style => adaptation des couleurs et des tailles de police (utile pour les malvoyants)

• permet de présenter les informations dans un ordre logique et non selon l'ordre résultant de la présentation visuelle (pour les aveugles)

• rend le code plus clair• rend la maintenance et les changements de

présentation plus faciles à réaliser une même feuille de style peut s'appliquer à des milliers de

pages Web) contrôle centralisé de la mise en page de documents HTML

• évite l'utilisation de balises déclassées – exemple : <font>

Séparer la présentation et le contenu

Utilisation des feuilles de styles CSS ou XSL :Principe : tous les attributs de taille, de position, de couleurs, d'alignement (width, height, align, font, color,...),... NE DOIVENT PAS figurer sur la page html, mais sur ce qui va gérer l'affichage, c'est à dire la feuille de style

• XHTML = structure logique du document – sémantique du contenu – exemples :

la mise en forme graphique <i> pour italique est remplacée par <em> : mise en emphase

La balise de gras <b> est remplacée par l'élément de renforcement <strong>

• Feuille de styles = mise en forme (caractères, couleurs, marges …)

Utilisation des CSS au lieu des tables pour la mise en

page Pour la mise en page utiliser la balise <div>

au lieu des balises de tableaux <td><tr>• <div> est une balise générique de type bloc servant de

conteneur neutre• exemples d'éléments de type bloc : <p>, <h1>, <h2>

…• Remarque : ne pas se contenter de remplacer les <td>

par des <div>, il faut revoir la structuration des pages

Exemple : CSS\Exemples sur les CSS\mise en page en CSS.htmVoir le site : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Rappels sur les feuilles de style : instructions CSS

Une instruction CSS est composée d’un mot clé d’une (ou plusieurs) balise(s) HTML suivie d’une liste de propriétés que l’on souhaite y appliquer.

h1, h2, h3 {color: red;background-color: yellow;

}

=> dans les pages associées à cette feuille de style toutes le entêtes de niveau 1, 2, 3 seront rouge sur fond jaune

Règle

Sélecteur

Bloc de déclaration

Rappels sur les feuilles de style : les types de style

• Style lié: présentation globale du site• Style incorporé: présentation de la page

courante• Style intégré: modification du style déjà défini• Précédence: intégré > incorporé > lié

Rappels sur les feuilles de style : le style lié

Fichier HTML et fichier CSS sont deux fichiers séparés, on ajoute une référence au fichier CSS à l’en-tête <head> du fichier HTML :

Exemples :<link rel=”stylesheet” type=”text/css” href=”fichier.css”>

Ou <style type="text/css">

@import url(styles.css);</style>

La présentation globale est utilisable sur toutes les pages du site

Possibilité de préciser le média : screen, print…

Rappels sur les feuilles de style : le style incorporé

Conteneur <style> (dans le <head>) permettant de présenter la page courante (vient s'ajouter au style défini au niveau global) : <head>

<title>Titre</title><style>

p { text-align: justify }</style>

</head>

Rappels sur les feuilles de style : le style incorporé

Exemple de CSS (style incorporé) pour le formatage de la page courante : <style type="text/css">

body {background-

color:#FFF55;color:#99900;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;}

</style>Remarque : utiliser de préférence les codes hexadécimaux pour les couleurs

Rappels sur les feuilles de style : le style intégré

Définition de style intégrée dans une balise HTMLgrâce à l’attribut style (s'ajoute aux styles précédemment définis) :

<p style=”text-align:justify”>Mon paragraphe

</p>

Sert à modifier un style déjà défini

Remarque : éviter cette technique car elle annule l'avantage des CSS en mêlant à nouveau contenu et présentation

Rappels sur les feuilles de style : quelques propriétés

• color : couleur de l’écriture• background-color : couleur de l’arrière-fond• background-image : url(nomFichier) : image

en arrière-fond• text-align : spécifie l’alignement du texte :

left right center Justify


• text-decoration : none underline overline line-through0 blink


• font-family : police de caractères : serif sans-serif (recommandé) Monospace

• width et height : largeur et hauteur d’un objet

Remarque : les conteneurs <div> et <span> : permettent de regrouper respectivement des paragraphes et des caractères pour leur associer une présentation.

Rappels sur les feuilles de style : sélecteurs balises

Toute balise peut intervenir dans un sélecteur

Exemple : pour supprimer les interlignes entreparagraphes :

p {margin-top: 0;margin-bottom: 0;}

Rappels sur les feuilles de style : sélecteurs balises

Il est possible de regrouper aussi bien les sélecteurs que les propriétés :Exemples :

p, h1, h2, h3 {margin-left: 0;}

p {font-family : Arial, sans-serif;font-style: italic;font-weight: bold;}

Rappels sur les feuilles de style : sélecteur classes

Classe : pour associer un certain style à quelques objets = créer une classe commune à ces objets

Exemple : mettre en rouge certains éléments (ici : un lien et un paragraphe) .important {

color: red;}

[…] Utilisations : <a href="…" class=”important”>lien important</a><p class="important">un paragraphe important</p>

Rappels sur les feuilles de style : sélecteurs

identificateurs

Identificateur : ne porte au plus que sur un objet du document

Exemple : mettre un fond jaune à un menu contenu dans un conteneur <div>

#menu_gauche {background-color: yellow;}

[…] Utilisation : <div id="menu_gauche"> … menu … </div>

Rappels sur les feuilles de style : sélecteurs pseudo-

classes

Pseudo-classes : application de styles sur des mécanismes ou relations non réalisables en HTML

• a:link : un lien qui n’a pas encore été visité• a:visited : un lien qui a déjà été visité• a:hover : la souris se trouve au-dessus du lien• a:active : le lien a été cliqué• a:visited : un lien qui a déjà été visité• a:hover : la souris se trouve au-dessus du lien• a:active: le lien a été cliqué


classes

Exemple : mise en rouge des liens lors de leur survol avec la souris

a:hover { color: red; }

[…] Utilisation : <a href="…">texte du lien</a>


classesPour limiter l'effet à une seule classe on utilise simultanément une classe et une pseudo-classe :

a.lien: hover {color: red;}

[…] Utilisation : <a class="lien" href="…">texte du lien<a>

=> affectera seulement le survol des liens de la classe liens

Rappels sur les feuilles de style : sélecteurs

hiérarchiques

Les sélecteurs hiérarchiques permettent d'économiser du codeExemple : pour mettre tous les liens d'un objet déterminé (ici un menu) avec un fond jaune :

#menu a {Background-color: yellow}

[…] Utilisation : <ul id="menu"><li><a href="...">Retour à l'accueil</a></li>

<li><a href="...">Présentation</a></li>

Les balises déclasséesA la place de :• <applet> utiliser <object> • <basefont> utiliser les CSS (police de base)• <center> utiliser les CSS ({text-align:center})• <dir> utiliser <ul>• <font> utiliser les CSS (font-style, font-weight)• <isindex> utiliser <input>• <menu> utiliser <ul>• <s> utiliser <del> (deleted text)• <strike> utiliser <del>• <u> utiliser les CSS ({text-decoration:underline;})• <xmp> utiliser <pre>

Les attributs déclassés• Align (associé à table, img, iframe, object ...)• Alink (associé à body – couleur des liens sélectionnés)• Background (associé à body)• Bgcolor (associé à table)• Color (associé avec font ou basefont)• Height (associé à TD, TH)• Hspace (espace à droite et à gauche d'une image, d'un

objet)• Link (associé à body)• Size (associé à font et basefont)• Text (associé à body – pour définir la couleur du texte)• Type (associé avec OL LI UL)• Vlink (associé avec body – couleur des liens visités)• Vspace (espace au dessus ou en dessous d'une image,

d'un objet)

Quelques classes CSS de substitution

Au lieu de <center> utiliser une classe .centrage{text-align:center;}

Au lieu de <i> utiliser une classe .italique{font-style:italic;}Au lieu de <b> utiliser une classe .grassage{font-

weight:bold;}Au lieu de <u> utiliser une classe .souligne{text-

decoration:underline;}

Pour le détail des standards CSS, voir le site : http://www.w3.org/Style/CSS/

Mise en page : types d'éléments

Eléments de type bloc :• Peuvent contenir un ou plusieurs éléments bloc ou "inline"

sauf les éléments <p> et éléments <h1>, <h2> qui ne peuvent contenir que des éléments "inline" …

• Les blocs ont des dimensions : hauteur, largeur, profondeur et possèdent des marges internes (padding) et externes (margin) par défaut non nulles sauf pour <div>

• Possibilité de les positionner en les sortant du flux du document

Exemples : <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <li>, <dt>, <dd>, <table>, <blockquote>, <pre>,

<form>, …

Mise en page : types d'éléments

Eléments de type "inline" : • Le contenu des éléments "inline" est affiché au fil du

texte

1. Eléments remplacés -> acceptent des attributs de dimension : <img>, <input>, <textarea>, <select>, <object>

2. Autres éléments -> sans dimension :<span>, <a>, <strong>, <em>

Mise en page : positionnement

• Avec les CSS les objets ne sont pas juxtaposés mais souvent superposés

• Les objets apparaissent selon l'ordre dans lequel ils sont codés en HTML = flux courant

• Pour extraire un objet du flux, il faut lui donner un positionnement absolu ou flottant pour l'afficher, par exemple, à côté du précédent


Positionnement dans le flux courant• Les éléments de type bloc se succèdent

verticalement• Les éléments "inline" se suivent sur la même ligne


Positionnement relatif1) l'élément prend sa place dans le flux courant2) on le décale avec les propriétés top, right, bottom,

left

Remarques : permet des superpositions – attention ! l'élément reste dépendant des éléments frères. p#second {

position: relativeleft: 20px;bottom: 15px;margin-top=0;margin-left: 3emwidth: 150px;height: 50px;background: green;}

p#premier {margin-bottom: 0;margin-top: 0px;margin-left: 3em;width:100px;background: orange;}

20px

15px


Positionnement absoluL'élément sort du flux, il se place par rapport au premier ancêtre positionné (en relatif, absolu ou fixe)

p#second {position: absolute;top: 0;right: 0;width: 150px;height: 50px;background: green;}

p#premier {width:100px;background: orange;}

div {position: relative;width: 300pxheight: 200pxbackground: yellow;}


Positionnement fixeCas particulier du positionnement absolu : l'élément ne se déplace pas lors du défilement (pas pris en charge par I.E. 6)

La profondeurPar défaut, en cas de superposition, le dernier élément positionné s'affiche par-dessus les autres avec z-index => c'est celui qui a le plus grand z-index s'affiche par-dessus les autresp#premier{

position: absolute;top: 0;left: 0;z-index:10;width: 100px;background: #ccc;}

p#second{position: absolute;top: 40px;left: 50px;z-index:0;width: 150px;background: green;}


Positionnement flottantL'élément sort du flux normal pour prendre place à droite ou à gauche du bloc qui le contient. L'élément suivant occupe l'espace libre en épousant sa forme.

p#premier {float: right;width: 100px;background: orange;}p#second {background: green;}

div {width:300px;background: yellow;}

12


Choix du positionnement• Dans le flux :

placement classique suivant la structure hiérarchique du code HTML - les marges externes (margin) ou internes (padding) permettent de positionner les éléments

• Non applicable pour des conteneurs et blocs, mais pour des contenus et éléments internes

• En relatif :• Dans le flux• Non applicable pour des conteneurs et blocs mais

pour des contenus et éléments internes• Seulement pour des cas particuliers : décalages,

superpositions tout en restant dans le flux


Choix du positionnement (suite)• En absolu :

• Sort du flux• Pas recommandé car dérive par rapport à la structure

HTML• Cependant, si utilisé avec des unités de tailles

relatives (em ou %) permet de créer des pages fluides• Utile pour la structure globale du site, les conteneurs

généraux, les grandes zones de la page et les éléments uniques (en-têtes, menus pieds de page)

• Non applicable pour des contenus et éléments internes


Choix du positionnement (suite)• En flottant :

• Sort du flux• Utile pour positionner des éléments d'un côté ou de

l'autre dans un contenu (exemple : une illustration)• Concurrent du positionnement absolu pour les

grands conteneurs• Attention, risques de défauts d'affichage

• En fixe :• Ne pas utiliser, non supporté par Internet Explorer 6

Gestion des conteneurs <div> : positionnement

Positionner les blocs dans un ordre logique dans le code HTML sinon désorganisation en cas de désactivation des CSS.<style type ="text/css">

.div1{...}

.div2{...}

.div3{...} </style>

<div name="div1" id = "div1" classe ="div1"> Comment créer

</div> <div name="div3" id = "div3" classe ="div3"> accessibles à tous ?</div><div name="div2" id = "div2" classe ="div2">des sites Web</div>

Avec CSS : Comment créer des sites Web accessibles à tous ?Sans CSS : Comment créer accessibles à tous ? des sites Web

Gestion des conteneurs <div> : prévoir chevauchement

Utiliser la propriété "overflow:scroll" pour éviter les chevauchements en cas d'augmentation de la taille des caractères

<style type ="text/css">.div1{...; overflow:scroll}.div2{... overflow:scroll}.div3{... overflow:scroll}

</style>

Techniques XHTML pour l'accessibilité

Définition d'un titre significatif pour les pages

Web La balise "title" est lue par les lecteurs

d'écran et permet d'identifier le contenu de la page : il doit être explicite<title>L'accessibilité du Web</title>

• JAWS : "INSERT + F10" permet d'afficher (et de lire) une liste des fenêtres ouvertes par leur titre "ALT + TAB": lecture du titre lors de la navigation de fenêtre en fenêtre

• Home Page Reader lit le titre de la page aussitôt que vous la visitez

• Utile pour une indexation correcte par les moteurs de recherche

Tables : lecture du contenu principal en 1er

Si table utilisée (ce n'est pas interdit !) :• page d'accueil : menu présenté en premier• pour les pages secondaires : menu après le contenu

principal – voir exemple diapo suivante évite la répétition du menu en lecture vocale

Remarques : - le rendu visuel de la page reste le même alors que le rendu auditif est inversé- pour garder la même structure de page, il est sans doute préférable de prévoir un lien d'évitement (voir plus loin)

Tables : lecture du contenu principal en 1er

<table summary=""><tr>

<td valign="top" align="left" width="25%"> ... Barre de navigation ... /td><td valign="top" align="left"> ... Contenu principal ... </td>

</tr></table>

<table summary=""> <tr> <!– image transparente en haut et à gauche -->

<td><img src="/images/1.gif" width="1" height="1" alt=""></td><!– contenu principal dans la première cellule avec rowspan=2 --> <td valign="top" align="left" rowspan="2"> ... Contenu principal ... </td>

</tr><tr>

<td valign="top" align="left" width="25%"> ... Barre de navigation ... </td>

</tr></table>

Pour les pages secondaires

Page d'accueil

Liens de positionnement rapide

Pour les aveugles, prévoir des liens pour atteindre les parties les plus importantes de la page ou du site (informations ou fonctions).

• Notamment : sauter la partie navigation pour atteindre directement le contenu

Cette solution fonctionne mais il existe un moyen plus élégant de rendre un lien invisible : voir diapo suivante

Lien image invisible :<a href="#navskip"><img src="blank.gif" alt="Lien vers le contenu principal"></a> ...<a name="navskip"></a><h2> Contenu principal...</h2>


/* @id accesLiens accessibilité

*/#acces {position: absolute;right: 10px;top: 40px;font-size: 0.9em;margin : 0;}

Liens invisibles : exemple de la section accessibilité du site www.eyrolles.fr

- Les liens sont invisibles car affichés en blanc sur blanc

- Il ne sont visibles que lors du survol ou lors de la lecture vocale avec une revue d'écran

- Remarque : dans le code le menu est situé vers la fin de la page

#acces li {display: inline;margin: 0;padding: 0;}#acces a:link, #acces a:visited {color: #FFF;}#acces a:active, #acces a:focus {color: #F90;}

Lien (texte) de saut invisible :


Suite de l'exemple des liens d'accessibilité du site Eyrolles :

Remarque : ce menu permet d'atteindre les fonctions les plus utilesdu site ainsi que des informations sur l'accessibilité du site.

<ul id="acces"> <li><a href="#recherche">Aller à la recherche</a></li> <li><a href="#navigation">Aller au menu des rubriques</a></li> <li><a href="#aide" accesskey="6">Aide</a></li> <li><a href="/Accueil/Aide/standards_accessibilite.html?xd=aebdca982fe3048a762b738230169031" accesskey="0">Accessibilité</a></li></ul>


Lien texte visible :

<a href="#navskip">Aller au contenu principal</a> ...<a name="navskip"></a><h2>contenu principal...</h2>

En dehors de l'accessibilité pour les aveugles les liens visibles peuvent être utiles sur des pages Web assez longues pour éviter l'utilisation de l'ascenseur pour se positionner


Les raccourcis clavier :• attribut "accesskey" = raccourcis clavier pour liens

ou champs de formulaire• très utiles aux aveugles (pas de souris) : à prévoir

pour chaque partie importante de la page / du site• Exemples :

<a href="/" accesskey="1">Page d'accueil</a><a href="#navskip" accesskey="2">Sauter les liens de navigation</a> ...<a name="navskip"></a><h2>contenu principal...</h2>

Le lien <a href="/" accesskey="1">Page d'accueil</a> sera lu par JAWS ainsi "lien : Page d'accueil, alt + 1"(pour l'activer : faire alt + 1 et entrée)

Aides complémentaires à la navigation

Donner des repères de navigation (fil d'ariane):

Fil d'Ariane > Accueil > Objectifs : Résultats > Accessibilité numérique

<p id="chemin"><em> Fil d'Ariane </em> <a href="/" > Accueil </a> ><a href="/8-objectifs-resultats.htm"> Objectifs : Résultats</a> > Accessibilité numérique

</p>

Liens : attribut "title"

Si texte de lien insuffisant => ajoutez un attribut "title" (80 caractères maxi)

• l'intitulé d'un lien doit avoir un sens même en dehors de son contexte (les lecteurs d'écran donnent une liste de tous liens avant la lecture de la page)

• "title" doit bien fournir des informations supplémentaires par rapport à l'intitulé du lien (sinon il est inutile)

• liens de destination différente => "title" différents

Exemple :

<a title="Mode d'emploi Python pour les programmeurs expérimentés" href="http://diveintopython.org/">Plongez dans Python</a>

Aveugles : ajouter équivalents texte pour les

images Fournir des équivalents texte pour les

images : attribut "alt" (60 caractères maxi)• JAWS lit le texte alt. Sans texte alt valide, c'est le nom

du fichier qui est lu, ce qui n'est pas toujours très informatif

• Le texte doit expliquer brièvement le contenu ou la fonction de l'image

• Le texte doit correspondre à l'information véhiculée par l'image dans son contexte

Remarque : si une image n'est qu'une simple illustration d’un point figurant dans le texte, il est redondant de mettre un texte dans l’attribut "alt". Dans ce cas, introduire un alt vide sous la forme : alt=""


images Image liée à une fonction (lien)

• Exemple :

Dans le cas présent, ce qui est important c'est la fonction du logo Usabilis : "retour à l'accueil"

<img src="img/usabilis.gif" width="170" height="42" alt="Vers l'accueil Usabilis" border="0" class="bloc"/></a>

• alt="Cliquer ici!" est problématique pour les aveugles qui par nature ne peuvent pas utiliser la souris


images Images à fort contenu informatif

nécessitant une description détaillée

• Utiliser l'attribut "longdesc" Est interprété par les lecteurs d'écrans (mais pas par

les navigateurs) – est activé par la touche "entrée"

• Exemple : <img src="graph1.gif" longdesc = "graph1.htm"

alt="Graphique des ventes en 3D"> Correspond à un lien vers une page HTML

d'explication

Images d'espacement ou de décoration : "alt" vide

Spécifier un attribut alt vide pour chaque image d'espacement Exemple :

<img src="spacer.gif" alt="" width="1" height="10">

Idem pour les images décoratives (puces) : mettre alt=""

Pommes

Poires Bananes

Fournir des équivalents texte aux images cliquables

Exemple de carte réactive avec équivalent texte

<img src="Lorraine.jpg" usemap="#lorraine" border=0 alt="Carte de la Lorraine">

<map name="lorraine">

<area shape="rect" coords="138, 221, 312, 269" href="http://www.webhdo.com/lorraine/54/base.htm" target="milieu" alt="Département de la Meurthe et Moselle" >

<area shape="rect" coords="156, 328, 335, 403" href="http://www.webhdo.com/lorraine/88/base.htm" target="milieu" alt="Département des Vosges">

...

</map>

Fournir des équivalents texte aux images cliquables

- Zones réactives : respecter si possible un ordre logique- Le bloc <map> </map> doit venir immédiatement après <img … usemap…>

Images : spécifier les dimensions

Spécifier les dimensions des images • Permet d'éviter un problème de formatage de la

page en cas de désactivation de l'affichage des images par l'utilisateur

<img src="/images/Council-logo.gif" alt="Reigate and Banstead Borough Council." width="240" height="92"/>

Tableaux de données : résumé et légende

Les attributs "summary" et "caption" :• summary : permet de comprendre la fonction et la

structure du tableau = résumé des informations contenues

• caption : titre du tableau (synthétique) – permet, en plus, un meilleur référencement

Exemple :<table border="0" cellspacing="4" cellpadding="0" summary="Calendrier mensuel avec des liens vers les contributions quotidiennes.">

<caption> Calendrier mensuel</caption>...</table>

Jaws : pour passer de tableau en tableau appuyer sur la touche T, la touche E ou la touche Y (selon la version de Jaws utilisée)

Tableaux de données : balisage des entêtes

Les en-têtes – attributs "th" = aides à la navigation pour les aveugles

• permet aux utilisateurs de navigateurs vocaux et lecteurs d'écran de connaître le titre de la ligne ou de la colonne dans laquelle ils se trouvent

Les attributs "headers" font le lien entre les entêtes et les cellules

• permet au lecteur d'écran d'associer l'en-tête avec les données de chaque cellule du tableau

Exemple du calendrier sur diapo suivante : permet au lecteur d'écran d'associer le jour de la semaine avec la date : "jeudi 4, jeudi 11, vendredi 12, samedi 13." Jaws : l'ajout de <th> ou <headers> ne change rien à l'interprétation des tableaux

Tableaux de données : balisage des entêtes

<thead><tr>

<th id="lundi" class="calendrier">Lundi</th><th id="mardi" class="calendrier">Mardi</th><th id="mercredi"

class="calendrier">Mercredi</th></tr>

</thead><tbody>

<tr><td headers="lundi">4</td><td headers="mardi">5</td><td headers="mercredi">6</td>

</tr></tbody>

Calendrier mensuel

Jour Lundi Mardi Mercredi

Date 4 5 6

Jaws : touches "ctrl" "alt" "5" pour lire les coordonnées d'une cellule de tableau

Utiliser des balises de structures

Baliser votre site web avec une structure en utilisant des balises <h1>, <h2>, <h3>

• Les lecteurs d'écran dépendent de ces balises pour interpréter la structure de vos pages.

• JAWS annonce que la page a un certain nombre de liens et un certain nombre d'en-têtes.

• INSERT+F6 : écouter tous les en-têtes d'une page • CTRL+INSERT+ENTER : naviguer rapidement dans une

page en allant à la prochaine section.

Exemple :h1, h2, h3 { margin: 0; padding: 0; } h1 { font-size: 20px; font-weight: normal; } /*/*/a{} h1 {font-size: 100%} /* */

Utiliser des balises de structures

Avantages de l'utilisation des balises H :• Meilleure hiérarchisation de l'information• Meilleur référencement par les moteurs de recherche

Utiliser les balises de listes :• <ul>, <ol>, <dl>

elles permettent de hiérarchiser le contenu

Respecter la sémantique des balises

Ne pas détourner l'usage des balises pour un effet graphique - réserver :

• td pour des tableaux de données• div pour des blocs regroupant plusieurs contenus• blockquote pour des paragraphes de citations

seulementexemple : pour créer un retrait, utiliser margin-left

• q pour des citations au sein d'une phrase• h pour des titres

Effets de l'utilisation de balises de listes (ul…) dans un navigateur en mode texte (lynx)

Sans balises de structures

Avec balises de structures

Ne pas ouvrir de nouvelles fenêtres – pop-up

À éviter : la balise <a target="_blank"> pour obliger l'ouverture du contenu dans une nouvelle fenêtre, => casse le bouton Retour.

Si cette technique est utilisée, coder comme suit :

<a href = "" target = "_blank" title = "ouverture dans une nouvelle fenêtre">lien</a>

Malvoyants : règles au niveau des couleurs

La solution : • le noir et blanc; oui mais... ce n'est pas très excitant

pour tout le monde !

Règles de base : • la couleur ne doit pas véhiculer de sens ou supporter

des informations• le contraste entre l'arrière plan et le texte doit être

suffisant -> voir notamment le problème des liens

• éviter le rouge et le vert en même temps (problème de la majorité des malvoyants)

• les liens ne doivent pas être identifiés seulement par la couleur (ajouter par exemple le soulignement)

• pour les cartes réactives, en plus de la couleur, le contour des zones doit être délimité

Malvoyants : règles au niveau des couleurs

Test du respect des règles :• voir les outils d'analyse de contraste (contrast

analyser…)• voir l'accessibility toolbar : affichage de la page en

niveaux de gris (noir et blanc)

Malvoyants : mise en forme des caractères

Ne pas écrire en majuscules les éléments de texte (titres, sous-titres, phrases…)

• facilite la lecture pour des personnes malvoyantes• réserver les majuscules pour des cas particuliers :

noms de personnes, marques …

Malvoyants : familles de police

La famille de polices de caractères sans sérif est recommandée

• Polices latines : MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica

• Polices grecques : Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek

• Polices cyrilliques : Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion

• Polices hébraïques : Arial Hebrew, MS Tahoma • Polices japonaises : Shin Go, Heisei Kaku Gothic W5

Polices arabes MS Tahoma

Malvoyants : familles de police

Déclaration de la police dans les CSS : indiquer plusieurs polices au cas ou elle serait absente de l'ordinateur

Exemple :body {Font-family: arial, helvetica, sans-serif;}

Malvoyants : types de police Si des polices absolues sont utilisées,

l'utilisateur ne peut pas les changer => utiliser des polices relatives

• Valeurs absolues Non accessibles (à proscrire pour des textes de petite

taille) : En points : P.style1 {font :10 pt Arial} (1 point=0,35

mm) En pixels : P.style1 {font :30 px Arial}

Peu accessibles [ xx-small | x-small | small | medium | large | x-large | xx-large] Exemple : P.style1 {font : large} Même si absolues, l'utilisateur peut les changer dans

une certaine limite : une taille "xx-small" avec la taille de texte la plus grande restera peu visible pour un malvoyant.

Malvoyants : types de police• Valeurs relatives toutes accessibles – exemples :

P.style1 {font-size : +30}

P.style1 { font-size : 105%}

P.style1 {font : 2em}

P.style1 {font : larger}

P.style1 {font : smaller}

L'unité <em> (appelé cadratin) est recommandée par le W3C car permet de modifier les tailles de texte sur tous les navigateurs1 em = 12 pt = 16 px

Malvoyants : types de policeExemple pour un lien menu en "em" à la place de "px" dans les

CSS

<div class=menu-lvl2-no><IMG height="9" alt="" hspace="2" src="isfates16.0_fichiers/bullet1_n.gif" width=9 border=0> <A onmouseover="over('img5_d8d1_0before');" onfocus="blurLink(this);"

onmouseout="out('img5_d8d1_0before');" href="http://www.isfates.com/5+B6Jkw9Mg__.0.html" target=_top>L'institut</A></div>

TD#menu DIV.menu-lvl2-no {font-size: 1em; text-decoration: underline; text-align: left; }

TD#menu DIV.menu-lvl2-no {font-size: 10px; text-decoration: underline; text-align: left;}

Acronymes et Abbr à expliciter

Utiliser les balises acronym et abbr pour expliciter les acronymes et les abréviationsCes informations n'apparaissent pas visuellement dans la page mais sont restituées vocalement par le lecteur d'écran

Exemples : <acronym title="cascading style

sheets">CSS</acronym>=> A place de CSS la synthèse prononcera "cascading style sheets"

<abbr title="Monsieur">M.</abbr>Lambda a été nommé président

Formulaires : regrouper les éléments

Regrouper les informations de même nature avec la balise <fieldset>

Exemple : regroupement des informations de l'adresse de livraison <form action="#" method="#"> <fieldset>

<strong>Adresse de livraison :</strong><br /> <p><label for="nom_l">Nom</label> : <input type="text" id="nom_l" name="nom_l" /></p> <p><label for="adresse_l">Adresse</label : <input type="text" id="adresse_l" name="adresse_l" /></p> <p><label for="ville_l">Ville</label :<input type="text" id="ville_l" name="ville_l" /></p>

</fieldset> </form>

Formulaires : prévoir déplacement par tabulation

Si l'ordre des zones dans le code n'est pas logique : prévoir un tabindex

<form method=post action="..."><fieldset><legend align=top> Informations personnelles </legend>

Nom : <input name="nom" type="text" tabindex=1>Adresse : <input name="adresse" type="text"

tabindex=3 size=40>Prénom : <input name="prénom" type="text"

tabindex=2></fieldset>

</form>

Formulaires : labelliser les éléments

Chaque élément d'un formulaire doit avoir une étiquette : balise <label>Exemple :

<label for="author">Nom:</label><br /><input id="author" name="author" /><br /><br />

<label for="email">Courrier électronique:</label><br /><input id="email" name="email" /><br /><br />

<label for="url">URL:</label><br /><input id="url" name="url" /><br /><br />

<label for="text">Commentaires:</label><br /><textarea id="text" name="text" rows="10" cols="50"></textarea><br /><br />

<input type="checkbox" id="bakecookie" name="bakecookie" /><label for="bakecookie">Conserver les infos ?</label><br /><br />

Javascript Média qui n'activent pas Javascript:

• les robots d'indexation des moteurs de recherche (Google, Yahoo!, MSN, etc.)

• les navigateurs textuels• les plages Braille pour non-voyants• les téléphones mobiles• les PDA (support partiel)• politique de sécurité en entreprise => blocage des

scripts

Alternatives aux liens Javascript

Menus : ajouter des liens statiques dans une section <noscript> :<noscript>liens...</noscript>

Contenus générés par le script : doivent rester disponibles si exécution des scripts désactivée (par des liens éventuellement)

Prévoir l'échec de l'exécution du Javascript<a href=http://www.google.fr target="newWindow"

onclick="window.open(this.href, this.target); return false">click here</a>

Accessibilité "clavier" de fonctions "souris" JavaScript

Evènements liés à l'utilisation de la souris : spécifier des évènements accessibles au clavier de manière redondante :

- Utiliser "onmousedown" avec "onkeydown"

- Utiliser "onmouseup" avec "onkeyup"

- Utiliser "onclick" avec "onkeypress"

- Utiliser "onmouseover" avec "onfocus"

- Utiliser "onmouseout" avec "onblur"

Frames Eviter les frames, sinon balise "noframes" +

nommer les cadres : attributs "name" et "title"<html><frameset cols="20%, 80%">

<frame name="cadre_navigation title="zone de menu" SRC="nav.html"><frame name="cadre_contenu" title="zone de contenu" SRC="content.html">

<noframes> <body> <p>Votre navigateur ne supporte pas les cadres, activer le lien

suivant <a href="alt_content.html">Contenu alternatif</a> </p>

</body> </noframes></frameset></html> Scroll=no

- title : identifier la fonction du cadre- <noframes> : doit permettre l'affichage des cadres par des liens- maximum : 3 cadres

Frames Ajouter un attribut longdesc pour chaque

élément frame = explique l'interaction entre les cadresExemple :<frameset rows="50,*" framespacing="0" title="Exemple de frameset" frameborder="NO" border="0"> <frame src="top.htm" name="menu" title="Menu principal" scrolling="AUTO" longdesc="aide.htm#menu" /> <frame src="prin.htm" name="contenu" title="Contenu de l'information" longdesc="aide.htm#text" /> </frameset>

Jaws : insert + F9 pour liste des cadres – h ou , (selon versions) pour passer d'un cadre à l'autre

Flash Il n'y a pas de Flash 100% idéal, 100%

accessible • Par essence le Flash est une présentation hautement

visuelle donc très difficile à transcrire sous forme de texte

• L'accessibilité ne peut être que partielle• L'environnement de développement permet un

minimum d'accessibilité• Plus d'informations pour rendre un site en Flash

accessible : http://www.adobe.com/resources/accessibility/best_practices/bp_fp.html

Flash Version 6 : accessible avec jaws 4.5, 6.1

et +• Introduction en Flash : prévoir un lien pour sauter l'intro• A défaut de rendre tout le site accessible en Flash : récupérer

une image représentative de l'animation et ajouter un attribut "alt"

• Si tout le site est en Flash (en général à éviter) : faire de préférence une version HTML

• Possibilité de rendre des objets accessibles via différents champs de description, d'associer du texte aux objets graphiques

Flash• Utilisation d'ActionScript pour les équivalents

textuels

Exemple :_root._accProps = new Object(); 'Création d'un nouvel

objet_root._accProps.name = "Moon orbiting planet"; _root._accProps.forcesimple = true;

Accessibility.updateProperties();

• Composants pouvant être rendus accessibles :Simple Button, Check Box, Radio Button, Label, Text Input, Text Area, Combo Box, List Box, Window, Alert, Data Grid

Commande : enableAccessibility()

Exemple de sites en Flash accessibles

http://www.eduplace.com/geonet/geonet.html

http://www2.bankone.com/presents/banking/demonew/consumer/index2.html

http://www.pbs.org/wgbh/amex/zoot/eng_sfeature/mx/pop_zoot_mx.html

Animations et rafraîchissements

Gifs animés : limiter le nombre de relectures

Blocs de textes défilants en Javascript : permettre d'arrêter le défilement

Balises "blink" et "marquee" : ne pas utiliser car déclassées

Auto-refresh : à éviter

Ajouter un moteur de recherche interne au site

Ajouter un moteur de recherche au site : accès sur chaque page du siteRemarque : généralement les hébergeurs en proposent.

Ajouter une page d'aide Ajouter une page d'aide expliquant la

navigation et donnant des indications sur les mécanismes d'accessibilité présents dans le site : à prévoir sur toutes les pages du site

Fichiers à télécharger Proposer plusieurs formats dont certains

sont accessibles : html, txt, doc, pdf …

Faire des pages légères La page doit faire moins de 70 Ko

• permet un temps de chargement acceptable• grâce aux feuilles de style le poids peut être réduit

La page doit faire au maximum 3 écrans en résolution 1024*768 si absence de navigation interne

• charge mentale réduite pour les aveugles• Plus facile à naviguer pour les malvoyants utilisant

un logiciel d'agrandissement

Pour plus d'informations …

Le guide Accessiweb :http://www.accessiweb.org/fr/

guide_accessiweb/index.html

Outils et environnements de développement

Cycle de production de sites accessibles

L'accessibilité : prise en compte à tous les stades du cycle du développement

• Du cahier des charges jusqu'aux tests utilisateurs évite de devoir recoder entièrement le site

Quels outils ? Pas d'outil miracle pour les développeurs

• prise de conscience de la question de l'accessibilité nécessaire• formation à la programmation fortement conseillée• formation aux recommandations• évaluation de l'accessibilité : fait appel au jugement humain (pertinence d'une alternative texte, cohérence de la navigation ...)

Editeurs et environnements de développement

HTML Kit Ultraedit Homesite Dreamweaver ... Attention aux éditeurs automatiques (CMS*)

qui ajoutent du code propriétaire non conforme ! (la société Atalan développe un CMS prenant en compte l'accessibilité)

* Content Management Systems

HTML Kit

UltraEdit

Notepad++

Dreamweaver : paramétrage accessibilité

Paramétrage des préférences :

Dreamweaver : exemple de texte alternatif sur une

imageExemple d'effet du paramétrage sur l'insertion d'une image : un texte alternatif est demandé

Dreamweaver : exemple : accessibilité des formulaires

<label>Prénom <input type="text" name="prenom" accesskey="1" tabindex="1" /></label>

Dreamweaver : exemple : accessibilité des formulaires

Exemple avec l'attribut "for" :<label for="prenom">Prénom</label><input type="text" name="prenom" accesskey="1"

tabindex="1" id="textfield" />

Vérification de l'accessibilité de la page Web dans Dreamweaver (V8)

Outil d'aide au développement : aDesigner

d'I.B.M.

Outil d'aide au développement : vischeck

Simulation des problèmes de vision des couleurs :

http://www.vischeck.com/

http://www.nils.org.au/ais/web/resources/contrast_analyser

/versions/fr/

Outil d'aide au développement : analyseur

de contrasteRésultat des tests selon

le handicap

Exemple : jaune sur fond noir

Outil d'aide au développement : Accessibility Color Wheel

http://gmazzocato.altervista.org/colorwheel/wheel.php

OK s'affiche pour les

combinaisons correctes

Les valeurs changent au

survol du graphique

http://wellstyled.com/tools/colorscheme2/index-en.html

Outil d'aide au développement : Color

Scheme Generator

Aide au choix de couleurs pour créer des pages web jolies, équilibrées, harmonieuses et accessibles

Outil d'aide au développement : choix de

couleurs accessiblesAutres outils en ligne pour le choix des

combinaisons de couleurs accessibles :http://www.q42.nl/demos/contrastcheck/ http://colorfilter.wickline.org/http://colorlab.wickline.org/colorblind/colorlab/http://www.rdjm.net/Outils/NColor/nColor8_selecteur_de_couleur.htm

Analyseur de contrastes - extension pour firefox :http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php#analyser

Fin de : Développer un site accessible en XHTML et

CSS

Développer un site accessible en XHTML et CSS Raoul MASSON : 11/2006.

Documents

Transcript of Développer un site accessible en XHTML et CSS Raoul MASSON : 11/2006.