Développer un site accessible en XHTML et CSS

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

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<imgtest.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"> •  • </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 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 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, 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-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>

Développer un site accessible en XHTML et CSS