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 Les standards actuels : Accessibilité et standards :
XHTML 1.0, XHTML 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 = “ 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" " "> <html xmlns=" xml:lang="fr" lang="fr"> <head> <title>Tout document doit avoir un titre</title> </head> <body> Contenu du document </body> </html>

XHTML : règles de syntaxe
Eléments et attributs en minuscules exemple : <html> </html> Attributs entre guillemets simples ou doubles : <img test.gif alt=“image test” /> Eléments correctement imbriqués (pas de chevauchement de balises)

Tout élément a une balise d’ouverture et une balise de fermeture En HTML, balises de fin non obligatoires pour : <p> <li> <dt> <dd> <option> et les éléments vides indépendants : <br> <img> <input> <frame>

En XHTML, balises de fin obligatoires : 2 syntaxes possibles : <img test.gif alt=“image test” /> < img test.gif alt=“image test”> </ img > Au lieu de <br> on aura <br /> Nom d’élément strictement identique dans les balises d’ouverture et de fermeture <img test.gif alt=“image test”> </img>

Réduction des attributs non admise : - en HTML : select name = "toto" size = "5" multiple - en XHTML : select name ="toto" size ="5" multiple = "multiple"

Les scripts doivent être inclus dans des sections CDATA : <script type="text/javascript">  </script>

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

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=" lang="fr" xml:lang="fr"> en XHTML 1.1 <html xmlns=" 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=" hreflang="en" title="Le site du W3C, en anglais">

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 "> charset=iso : encodage classique pour les langues de l'Europe occidentale charset=iso : 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 :

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

text-decoration : none underline overline line-through0 blink

font-family : police de caractères : serif sans-serif (recommandé) Monospace width et height : largeur et hauteur d’un objet Remarque : les conteneurs <div> et <span> : permettent de regrouper respectivement des paragraphes et des caractères pour leur associer une présentation.

Rappels sur les feuilles de style : sélecteurs balises
Toute balise peut intervenir dans un sélecteur Exemple : pour supprimer les interlignes 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é

Exemple : mise en rouge des liens lors de leur survol avec la souris a:hover { color: red; } […] Utilisation : <a href="…">texte du lien</a>

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 :

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

Positionnement dans le flux courant Les éléments de type bloc se succèdent verticalement Les éléments "inline" se suivent sur la même ligne

Positionnement 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

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; }

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; }

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

Choix du positionnement Dans le flux : placement classique suivant la structure hiérarchique du code HTML - les marges externes (margin) ou internes (padding) permettent de positionner les éléments Non applicable pour des conteneurs et blocs, mais pour des contenus et éléments internes En relatif : Dans le flux Non applicable pour des conteneurs et blocs mais pour des contenus et éléments internes Seulement pour des cas particuliers : décalages, superpositions tout en restant dans le flux

Choix du positionnement (suite) En absolu : Sort du flux Pas recommandé car dérive par rapport à la structure HTML Cependant, si utilisé avec des unités de tailles relatives (em ou %) permet de créer des pages fluides Utile pour la structure globale du site, les conteneurs généraux, les grandes zones de la page et les éléments uniques (en-têtes, menus pieds de page) Non applicable pour des contenus et éléments internes

Choix du positionnement (suite) En flottant : Sort du flux Utile pour positionner des éléments d'un côté ou de l'autre dans un contenu (exemple : une illustration) Concurrent du positionnement absolu pour les grands conteneurs Attention, risques de défauts d'affichage En fixe : Ne pas utiliser, non supporté par Internet Explorer 6

Gestion des conteneurs <div> : positionnement
Positionner les blocs dans un ordre logique dans le code HTML sinon désorganisation en cas de désactivation des CSS. <style type ="text/css"> .div1{...} .div2{...} .div3{...} </style> <div name="div1" id = "div1" classe ="div1"> Comment créer </div> <div name="div3" id = "div3" classe ="div3"> accessibles à tous ? <div 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>

Lien (texte) de saut invisible : 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 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

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=aebdca982fe3048a762b " accesskey="0">Accessibilité</a></li> </ul>

Lien texte visible : <a href="#navskip">Aller au contenu principal</a> ... <a name="navskip"></a><h2>contenu principal...</h2> En dehors de l'accessibilité pour les aveugles les liens visibles peuvent être utiles sur des pages Web assez longues pour éviter l'utilisation de l'ascenseur pour se positionner

Les raccourcis clavier : attribut "accesskey" = raccourcis clavier pour liens ou champs de formulaire très utiles aux aveugles (pas de souris) : à prévoir pour chaque partie importante de la page / du site Exemples : <a href="/" accesskey="1">Page d'accueil</a> <a href="#navskip" accesskey="2">Sauter les liens de navigation</a> ... <a name="navskip"></a><h2>contenu principal...</h2> Le lien <a href="/" accesskey="1">Page d'accueil</a> sera lu par JAWS ainsi "lien : Page d'accueil, alt + 1" (pour l'activer : faire alt + 1 et entrée)

Aides complémentaires à la navigation
Donner des repères de navigation (fil d'ariane): Fil d'Ariane > Accueil > Objectifs : Résultats > Accessibilité numérique <p id="chemin"> <em> Fil d'Ariane </em> <a href="/" > Accueil </a> > <a href="/8-objectifs-resultats.htm"> Objectifs : Résultats </a> > Accessibilité numérique </p>

Liens : attribut "title" Si texte de lien insuffisant => ajoutez un attribut "title" (80 caractères maxi) l'intitulé d'un lien doit avoir un sens même en dehors de son contexte (les lecteurs d'écran donnent une liste de tous liens avant la lecture de la page) "title" doit bien fournir des informations supplémentaires par rapport à l'intitulé du lien (sinon il est inutile) liens de destination différente => "title" différents Exemple : <a title="Mode d'emploi Python pour les programmeurs expérimentés" href=" 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=""

Image liée à une fonction (lien) Exemple : Dans le cas présent, ce qui est important c'est la fonction du logo Usabilis : "retour à l'accueil" <img src="img/usabilis.gif" width="170" height="42" alt="Vers l'accueil Usabilis" border="0" class="bloc"/></a> alt="Cliquer ici!" est problématique pour les aveugles qui par nature ne peuvent pas utiliser la souris

Images à 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=" target="milieu" alt="Département de la Meurthe et Moselle" > <area shape="rect" coords="156, 328, 335, 403" href=" 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 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.

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

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=" 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=" ">Courrier électronique:</label><br /> <input id=" " name=" " /><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= 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 :

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

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 :

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 :

Outil d'aide au développement : analyseur de contraste
Résultat des tests selon le handicap Exemple : jaune sur fond noir

Outil d'aide au développement : Accessibility Color Wheel
Les valeurs changent au survol du graphique OK s'affiche pour les combinaisons correctes

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 accessibles
Autres outils en ligne pour le choix des combinaisons de couleurs accessibles : Analyseur de contrastes - extension pour firefox :

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

Développer un site accessible en XHTML et CSS

Présentations similaires

Présentation au sujet: "Développer un site accessible en XHTML et CSS"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Développer un site accessible en XHTML et CSS

Présentations similaires

Présentation au sujet: "Développer un site accessible en XHTML et CSS"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back