La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


Présentation au sujet: "Développer un site accessible en XHTML et CSS Raoul MASSON : 11/2006."— Transcription de la présentation:

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

2 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

3 Introduction Les standards actuels : 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 pour un titre principal au lieu d'un changement de graisse avec ) - tous les acteurs concourant à la création d'un site doivent être sensibilisés à la question de l'accessibilité

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

5 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 dafficher, au minimum, le contenu textuel de faciliter l'accès au Web pour les personnes handicapées

6 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

7 XHTML – rappels de la syntaxe générale

8 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

9 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

10 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)

11 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

12 Et laccessibilité ? XHTML : toutes les qualités pour le développement de contenus accessibles. A condition : que le développeur intègre laccessibilité dans la gestion de ses projets quil fournisse les contenus alternatifs et introduise des mécanismes complémentaires

13 Rappels XML Document bien formé : respect dune syntaxe Document valide : conformité à une DTD : grammaire et règles à observer

14 XHTML : les éléments requis Balise Un et un seul élément racine : Spécif dun espace de nommage : Balises et

15 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 …)

16 XHTML : structure du document Tout document doit avoir un titre Contenu du document

17 XHTML : règles de syntaxe Eléments et attributs en minuscules exemple : Attributs entre guillemets simples ou doubles : Eléments correctement imbriqués (pas de chevauchement de balises)

18 XHTML : règles de syntaxe Tout élément a une balise douverture et une balise de fermeture En HTML, balises de fin non obligatoires pour : et les éléments vides indépendants :

19 XHTML : règles de syntaxe En XHTML, balises de fin obligatoires : 2 syntaxes possibles : Au lieu de on aura Nom délément strictement identique dans les balises douverture et de fermeture

20 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"

21 XHTML : règles de syntaxe Les scripts doivent être inclus dans des sections CDATA :

22 XHTML : choix d'un DOCTYPE HTML 4.01 Strict, Transitional, Frameset XHTML 1.0 Strict, Transitional, Frameset XHTML 1.1 DTD

23 XHTML : choix d'un DOCTYPE XHTML Strict Pas d'emploi de balises et attributs déclassés – respect de la syntaxe (plus de balises,, "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é

24 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

25 Identification de la langue Identifier la langue (utile pour les lecteurs d'écran en synthèse vocale) En HTML : en XHTML 1.0 : en XHTML 1.1 Exemple de changement de langue dans une page :......

26 Identification de la langue Identifier la langue dans les balises "meta" 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 Sorry, I don't speak French !

27 Identification du jeu de caractères Définir le jeu de caractères utilisé dans la page 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

28 Outils pour passer de HTML à XHTML Loutil TIDY

29 Feuilles de style et accessibilité En partie inspiré de : CSS2 pratique du design web de Raphaël Goetter

30 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 :

31 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 pour italique est remplacée par : mise en emphase La balise de gras est remplacée par l'élément de renforcement Feuille de styles = mise en forme (caractères, couleurs, marges …)

32 Utilisation des CSS au lieu des tables pour la mise en page Pour la mise en page utiliser la balise au lieu des balises de tableaux est une balise générique de type bloc servant de conteneur neutre exemples d'éléments de type bloc :,, … Remarque : ne pas se contenter de remplacer les par des, il faut revoir la structuration des pages Exemple : CSS\Exemples sur les CSS\mise en page en CSS.htmCSS\Exemples sur les CSS\mise en page en CSS.htm Voir le site : mise-en-page-en-CSShttp://css.alsacreations.com/Modeles-de- mise-en-page-en-CSS

33 Rappels sur les feuilles de style : instructions CSS Une instruction CSS est composée dun mot clé dune (ou plusieurs) balise(s) HTML suivie dune liste de propriétés que lon 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

34 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é

35 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 à len-tête du fichier HTML : Exemples : url(styles.css); La présentation globale est utilisable sur toutes les pages du site Possibilité de préciser le média : screen, print…

36 Rappels sur les feuilles de style : le style incorporé Conteneur (dans le ) permettant de présenter la page courante (vient s'ajouter au style défini au niveau global) : Titre p { text-align: justify }

37 Rappels sur les feuilles de style : le style incorporé Exemple de CSS (style incorporé) pour le formatage de la page courante : body { background-color:#FFF55;color:#99900;margin- top:0;margin-right:0;margin-bottom:0;margin- left:0; } Remarque : utiliser de préférence les codes hexadécimaux pour les couleurs

38 Rappels sur les feuilles de style : le style intégré Définition de style intégrée dans une balise HTML grâce à lattribut style (s'ajoute aux styles précédemment définis) : Mon paragraphe 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

39 Rappels sur les feuilles de style : quelques propriétés color : couleur de lécriture background-color : couleur de larrière-fond background-image : url(nomFichier) : image en arrière-fond text-align : spécifie lalignement du texte : left right center Justify

40 Rappels sur les feuilles de style : quelques propriétés text-decoration : none underline overline line-through0 blink

41 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 dun objet Remarque : les conteneurs et : permettent de regrouper respectivement des paragraphes et des caractères pour leur associer une présentation.

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

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

44 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 : lien important un paragraphe important

45 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 #menu_gauche { background-color: yellow; } […] Utilisation : … menu …

46 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 na 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é

47 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 : texte du lien

48 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 : texte du lien => affectera seulement le survol des liens de la classe liens

49 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 : Retour à l'accueil Présentation

50 Les balises déclassées A la place de : utiliser utiliser les CSS (police de base) utiliser les CSS ({text-align:center}) utiliser utiliser les CSS (font-style, font-weight) utiliser utiliser (deleted text) utiliser utiliser les CSS ({text-decoration:underline;}) utiliser

51 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)

52 Quelques classes CSS de substitution Au lieu de utiliser une classe.centrage{text-align:center;} Au lieu de utiliser une classe.italique{font-style:italic;} Au lieu de utiliser une classe.grassage{font-weight:bold;} Au lieu de utiliser une classe.souligne{text- decoration:underline;} Pour le détail des standards CSS, voir le site :

53 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 et éléments, 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 Possibilité de les positionner en les sortant du flux du document Exemples :, …,,,,,,,,,,,, …

54 Mise en page : types d'éléments Eléments de type "inline" : Le contenu des éléments "inline" est affiché au fil du texte 1. Eléments remplacés -> acceptent des attributs de dimension :,,,, 2. Autres éléments -> sans dimension :,,,

55 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

56 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

57 Mise en page : positionnement Positionnement relatif 1) l'élément prend sa place dans le flux courant 2) on le décale avec les propriétés top, right, bottom, left Remarques : permet des superpositions – attention ! l'élément reste dépendant des éléments frères. p#second { position: relative left: 20px; bottom: 15px; margin-top=0; margin-left: 3em width: 150px; height: 50px; background: green; } p#premier { margin-bottom: 0; margin-top: 0px; margin-left: 3em; width:100px; background: orange; } 20px 15px

58 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) p#second { position: absolute; top: 0; right: 0; width: 150px; height: 50px; background: green; } p#premier { width:100px; background: orange; } div { position: relative; width: 300px height: 200px background: yellow; }

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

60 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. p#premier { float: right; width: 100px; background: orange; } p#second { background: green; } div { width:300px; background: yellow; } 1 2

61 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

62 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

63 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

64 Gestion des conteneurs : positionnement Positionner les blocs dans un ordre logique dans le code HTML sinon désorganisation en cas de désactivation des CSS..div1{...}.div2{...}.div3{...} Comment créer accessibles à tous ? des sites Web Avec CSS : Comment créer des sites Web accessibles à tous ? Sans CSS : Comment créer accessibles à tous ? des sites Web

65 Gestion des conteneurs : prévoir chevauchement Utiliser la propriété "overflow:scroll" pour éviter les chevauchements en cas d'augmentation de la taille des caractères.div1{...; overflow:scroll}.div2{... overflow:scroll}.div3{... overflow:scroll}

66 Techniques XHTML pour l'accessibilité

67 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 L'accessibilité du Web JAWS :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 visitezHome Page Reader Utile pour une indexation correcte par les moteurs de recherche

68 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)

69 Tables : lecture du contenu principal en 1er... Barre de navigation... /td>... Contenu principal Contenu principal Barre de navigation... Pour les pages secondaires Page d'accueil

70 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 :... Contenu principal...

71 Liens de positionnement rapide acces Liens accessibilité */ #acces { position: absolute; right: 10px; top: 40px; font-size: 0.9em; margin : 0; } 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 #acces li { display: inline; margin: 0; padding: 0; } #acces a:link, #acces a:visited { color: #FFF; } #acces a:active, #acces a:focus { color: #F90; } Lien (texte) de saut invisible :

72 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. Aller à la recherche Aller au menu des rubriques Aide Accessibilité

73 Liens de positionnement rapide Lien texte visible : Aller au contenu principal... contenu principal... 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

74 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 : Page d'accueil Sauter les liens de navigation... contenu principal... Le lien Page d'accueil sera lu par JAWS ainsi "lien : Page d'accueil, alt + 1" (pour l'activer : faire alt + 1 et entrée)

75 Aides complémentaires à la navigation Donner des repères de navigation (fil d'ariane): Fil d'Ariane > Accueil > Objectifs : Résultats > Accessibilité numériqueAccueilObjectifs : Résultats Fil d'Ariane Accueil > Objectifs : Résultats > Accessibilité numérique

76 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 : Plongez dans Python

77 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 dun point figurant dans le texte, il est redondant de mettre un texte dans lattribut "alt". Dans ce cas, introduire un alt vide sous la forme : alt=""

78 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" alt="Cliquer ici!" est problématique pour les aveugles qui par nature ne peuvent pas utiliser la souris

79 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 : Correspond à un lien vers une page HTML d'explication

80 Images d'espacement ou de décoration : "alt" vide Spécifier un attribut alt vide pour chaque image d'espacement Exemple : Idem pour les images décoratives (puces) : mettre alt="" Pommes Poires Bananes

81 Fournir des équivalents texte aux images cliquables Exemple de carte réactive avec équivalent texte

82 ... Fournir des équivalents texte aux images cliquables - Zones réactives : respecter si possible un ordre logique - Le bloc doit venir immédiatement après

83 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

84 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 : Calendrier mensuel... 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)

86 Tableaux de données : balisage des entêtes Lundi Mardi Mercredi Calendrier mensuel Jour Lundi Mardi Mercredi Date Jaws : touches "ctrl" "alt" "5" pour lire les coordonnées d'une cellule de tableau

87 Utiliser des balises de structures Baliser votre site web avec une structure en utilisant des balises,, 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%} /* */

88 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 :,, elles permettent de hiérarchiser le contenu

89 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

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

91 Ne pas ouvrir de nouvelles fenêtres – pop-up À éviter : la balise pour obliger l'ouverture du contenu dans une nouvelle fenêtre, => casse le bouton Retour. Si cette technique est utilisée, coder comme suit : lien

92 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é

93 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)

94 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 …

95 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

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

97 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.

98 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é (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

99 Malvoyants : types de police Exemple pour un lien menu en "em" à la place de "px" dans les CSS L'institut TD#menu DIV.menu-lvl2-no {font-size: 1em; text-decoration: underline; text-align: left; } TD#menu DIV.menu-lvl2-no {font-size: 10px; text-decoration: underline; text-align: left;}

100 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 : CSS => A place de CSS la synthèse prononcera "cascading style sheets" M. Lambda a été nommé président

101 Formulaires : regrouper les éléments Regrouper les informations de même nature avec la balise Exemple : regroupement des informations de l'adresse de livraison Adresse de livraison : Nom : Adresse Ville

102 Formulaires : prévoir déplacement par tabulation Si l'ordre des zones dans le code n'est pas logique : prévoir un tabindex Informations personnelles Nom : Adresse : Prénom :

103 Formulaires : labelliser les éléments Chaque élément d'un formulaire doit avoir une étiquette : balise Exemple : Nom: Courrier électronique: URL: Commentaires: Conserver les infos ?

104 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

105 Alternatives aux liens Javascript Menus : ajouter des liens statiques dans une section : liens... 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 click here

106 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"

107 Frames Eviter les frames, sinon balise "noframes" + nommer les cadres : attributs "name" et "title" Votre navigateur ne supporte pas les cadres, activer le lien suivant Contenu alternatif Scroll=no - title : identifier la fonction du cadre - : doit permettre l'affichage des cadres par des liens - maximum : 3 cadres

108 Frames Ajouter un attribut longdesc pour chaque élément frame = explique l'interaction entre les cadres Exemple : Jaws : insert + F9 pour liste des cadres – h ou, (selon versions) pour passer d'un cadre à l'autre

109 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 : p_fp.html

110 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

111 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()

112 Exemple de sites en Flash accessibles ml ml demonew/consumer/index2.html demonew/consumer/index2.html eature/mx/pop_zoot_mx.html eature/mx/pop_zoot_mx.html

113 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

114 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.

115 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

116 Fichiers à télécharger Proposer plusieurs formats dont certains sont accessibles : html, txt, doc, pdf …

117 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

118 Pour plus d'informations … Le guide Accessiweb : ssiweb/index.html

119 Outils et environnements de développement

120 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

121 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...)

122 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

123 HTML Kit

124 UltraEdit

125 Notepad++

126 Dreamweaver : paramétrage accessibilité Paramétrage des préférences :

127 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é

128 Dreamweaver : exemple : accessibilité des formulaires Prénom

129 Dreamweaver : exemple : accessibilité des formulaires Exemple avec l'attribut "for" : Prénom

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

131 Outil d'aide au développement : aDesigner d'I.B.M.

132 Outil d'aide au développement : vischeck Simulation des problèmes de vision des couleurs :

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

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

135 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

136 Outil d'aide au développement : choix de couleurs accessibles Autres outils en ligne pour le choix des combinaisons de couleurs accessibles : tm Analyseur de contrastes - extension pour firefox : extension.php#analyser

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


Télécharger ppt "Développer un site accessible en XHTML et CSS Raoul MASSON : 11/2006."

Présentations similaires


Annonces Google