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 : Accessibilité et standards : 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 DOCTYPE HTML 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 Transitional Passage 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 Frameset Les 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.htm Voir 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 Sélecteur Règle 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 HTML grâ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 entre paragraphes : 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 { font-family : Arial, sans-serif; font-style: italic; font-weight: bold; } p, h1, h2, h3 { margin-left: 0; }
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: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-classes Pour 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 code Exemple : 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ées A 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 Eléments remplacés -> acceptent des attributs de dimension : <img>, <input>, <textarea>, <select>, <object> 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 relatif l'élément prend sa place dans le flux courant 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#premier { margin-bottom: 0; margin-top: 0px; margin-left: 3em; width:100px; background: orange; } p#second { position: relative left: 20px; bottom: 15px; margin-top=0; margin-left: 3em width: 150px; height: 50px; background: green; } 20px 15px
Mise en page : positionnement Positionnement absolu L'élément sort du flux, il se place par rapport au premier ancêtre positionné (en relatif, absolu ou fixe) div { position: relative; width: 300px height: 200px background: yellow; } p#second { position: absolute; top: 0; right: 0; width: 150px; height: 50px; background: green; } p#premier { width:100px; background: orange; }
Mise en page : positionnement Positionnement fixe Cas 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 profondeur Par 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 autres p#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 flottant L'é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. div { width:300px; background: yellow; } p#premier { float: right; width: 100px; background: orange; } p#second { background: green; 1 2
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 name="div2" id = "div2" classe ="div2"> des sites Web 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> <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> <td valign="top" align="left" width="25%"> ... Barre de navigation ... </td> Page d'accueil Pour les pages secondaires
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 Lien (texte) de saut invisible : /* @id acces Liens accessibilité */ #acces { position: absolute; right: 10px; top: 40px; font-size: 0.9em; margin : 0; } #acces li { display: inline; margin: 0; padding: 0; } #acces a:link, #acces a:visited { color: #FFF; #acces a:active, #acces a:focus { color: #F90; 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
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 utiles du 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
Fournir des équivalents texte aux images cliquables <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> - 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> <td headers="lundi">4</td> <td headers="mardi">5</td> <td headers="mercredi">6</td> </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 seulement exemple : 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 navigateurs 1 em = 12 pt = 16 px
Malvoyants : types de police Exemple 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: 10px; text-decoration: underline; text-align: left;} TD#menu DIV.menu-lvl2-no {font-size: 1em; text-decoration: underline; text-align: left; }
Acronymes et Abbr à expliciter Utiliser les balises acronym et abbr pour expliciter les acronymes et les abréviations Ces 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> title : identifier la fonction du cadre <noframes> : doit permettre l'affichage des cadres par des liens maximum : 3 cadres Scroll=no
Frames Ajouter un attribut longdesc pour chaque élément frame = explique l'interaction entre les cadres Exemple : <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 site Remarque : 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 image Exemple 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/
Outil d'aide au développement : analyseur de contraste Résultat des tests selon le handicap Exemple : jaune sur fond noir http://www.nils.org.au/ais/web/resources/contrast_analyser/versions/fr/
Outil d'aide au développement : Accessibility Color Wheel Les valeurs changent au survol du graphique OK s'affiche pour les combinaisons correctes http://gmazzocato.altervista.org/colorwheel/wheel.php
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 http://wellstyled.com/tools/colorscheme2/index-en.html
Outil d'aide au développement : choix de couleurs accessibles Autres 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