Développer un site accessible en XHTML et CSS Raoul MASSON : 11/2006.
-
Upload
gervais-richard -
Category
Documents
-
view
103 -
download
1
Transcript of 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)
XHTML : règles de syntaxe
• 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>
XHTML : règles de syntaxe
• 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>
XHTML : règles de syntaxe
• Réduction des attributs non admise :
- en HTML :select name = "toto" size = "5" multiple
- en XHTML :select name ="toto" size ="5" multiple = "multiple"
XHTML : règles de syntaxe
• Les scripts doivent être inclus dans des sections CDATA :
<script type="text/javascript"><!--<![CDATA[ function validate(myForm) { var rbchecked = 0; for (i=0; i<myForm.type.length; i++) { . . . } }]]>//--></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
Rappels sur les feuilles de style : quelques propriétés
• text-decoration : none underline overline line-through0 blink
Rappels sur les feuilles de style : quelques propriétés
• 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é
Rappels sur les feuilles de style : sélecteurs pseudo-
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>
Rappels sur les feuilles de style : sélecteurs pseudo-
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
Mise en page : positionnement
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
Mise en page : positionnement
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
Mise en page : positionnement
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;}
Mise en page : positionnement
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;}
Mise en page : positionnement
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
Mise en page : positionnement
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
Mise en page : positionnement
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
Mise en page : positionnement
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>
Liens de positionnement rapide
/* @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 :
Liens de positionnement rapide
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>
Liens de positionnement rapide
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
Liens de positionnement rapide
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=""
Aveugles : ajouter équivalents texte pour les
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
Aveugles : ajouter équivalents texte pour les
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