Home

Guide technique d`accessibilité pour la création et la refonte des

1. Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 65 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION d en t te aff rente laquelle la donn e se r f re Dans l exemple ci apr s quand l utilisateur se trouvera par exemple sur la troisi me ligne de la troisi me colonne le lecteur d cran dit Flen Ben Foulen t l phone 71 710 170 Page 66 Le style du texte dans lt CAPTION gt et ou dans lt TH gt peut tre modifi en utilisant le CSS Il peut tre utile de fournir une description des contenus du tableau travers l attribut SUMMARY du tag lt TABLE gt au b n fice des utilisateurs qui emploient des lecteurs d cran Il faut toutefois se rappeler que le SUMMARY peut alourdir beaucoup la lecture de la page et donc la description mettre dans le SUMMARY doit tre tr s synth tique et fonctionnelle comme indiqu dans les exemples pr c dents Si le tableau pr sente d j un titre lt CAPTION gt correctement descriptif le SUMMARY ne doit pas tre mis Exemple de la mani re d organiser les titres dans le tableau des donn es Ceci est le titre du tableau ins r en utilisant le tag lt CAPTION gt Ali Ben Ali 5 rue du Jardin Tunis 71 710 710 Flen Ben Foulen 2 Av Abou Al Kacem El Chabi Tunis 71 710 170 Le code de ce tableau est le suivant lt table
2. Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 22 T Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 18 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION e Attribut CHARSET Tous les documents x HTML doivent sp cifier leur codage des caract res l int rieur de la section lt HEAD gt le meta tag CHARSET sert d finir la table de caract res utilis s dans une page web Le terme Charset abr viation de Character set indique un ensemble de caract res Unicode ISO 8859 1 ASCII o chaque caract re est associ un num ro de mani re univoque Cette association permet au navigateur une repr sentation correcte du texte D habitude un document x HTML est crit en utilisant la table de caract res ISO qui par rapport au codage ASCII permet l utilisation de caract res sp ciaux comme les lettres accentu es Dans le cas de sites multilingues une norme utile consiste utiliser un codage UTF 8 dans la mesure o e l largit la gamme des caract res support s comme la lettre grecque b ta B pour les formules math matiques les caract res graphiques A
3. LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION R f rence WCAG 2 0 1 3 1 1 4 1 1 4 4 1 4 8 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 a et 1I1 2 c selon la m thodologie indiqu e dans le paragraphe 111 3 Difficult du contr le moyen Objet de la check list d accessibilit 10 13 20 d Num ros et caract res sp ciaux Dans leur param trage par d faut les lecteurs d cran interpr tent toutes les s quences de chiffres comme des nombres entiers sauf s ils commencent par 0 Il peut donc y avoir des difficult s de compr hension de la part des utilisateurs dans le cas de num ros de t l phone ou d autres caract res sp ciaux Il peut y avoir des probl mes de compr hension pour les num ros de t l phone en tunisie par exemple le num ro 71710170 sera lu de la mani re suivante soixante et onze millions sept cent dix mille cent soixante dix ce qui rend la compr hension et la m morisation difficiles Pour faire en sorte que les num ros de t l phone qui ne commencent pas par 0 soient facilement lisibles et m morisables il faut adopter les r gles suivantes pour e num ros tunisien deux chiffres pour l indicatif r gionale puis groupes de trois chiffres s par s par un tiret ou deux espaces par exemple 71 710 170 ou 71 710
4. Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 17 Listes L x HTML offre trois types diff rents de listes ordonn es non ordonn es et listes de d finitions Les listes ordonn es codifi es au moyen du tag d ouverture lt OL gt servent d crire des l ments lt LI gt en s quence temporelle ou de priorit Dans le texte ces l ments sont num r s en utilisant des lettres ou des num ros ordonn s Les listes non ordonn es identifi es au moyen du tag d ouverture lt UL gt servent regrouper les l ments lt LI gt o la num rotation ou l ordre ne sont pas particuli rement importants Leur utilisation convient des listes simples mais aussi des menus de navigation des listes de nouvelles etc Les listes de d finition identifi es au moyen du tag d ouverture lt DL gt sont des listes constitu es Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 22 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION de termes lt DT gt avec la d finition aff rente lt DD gt Elles sont adapt es structurer des sections du type nom description ou produit desc
5. R f rence WCAG 2 0 1 1 1 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 46 d Couleurs et contrastes Tous les l ments d informations et toutes les fonctionnalit s transmises travers la couleur doivent tre disponibles m me en l absence de la couleur particuli re utilis e pour les pr senter La couleur ne saurait donc tre utilis e comme unique forme de communication Par exemple e Pour mettre en vidence un mot ne pas utiliser uniquement le changement de couleur mais utiliser aussi le gras ou une autre forme graphique e Pour mettre en vidence les champs obligatoires ne pas utiliser la couleur par exemple les champs obligatoires sont marqu s en rouge mais ajouter plut t un ast risque la fin de l tiquette e Eviter les phrases du genre les donn es marqu es en rouge sont erron es mais fournir un message ad quat qui explique avec clart la nature de l erreur Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Ne pas utiliser de couleurs fluorescent
6. Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 29 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION b Ind pendance du dispositif d input La g n ration de tout v nement quel qu il soit ouverture d un menu d roulant activation de Page 30 connexion confirmation d un formulaire etc doit tre e ind pendante du dispositif d input utilis par l utilisateur souris clavier mulateur de souris etc e contr l e par l utilisateur et jamais activ e automatiquement par le syst me comme cela se produit par exemple avec certaines fonctions JavaScript qui permettent la visualisation d une information au simple passage de la souris ou au changement de l l ment d une liste Il ne faut donc jamais utiliser de scripts qui requi rent uniquement l utilisation de la souris et il faut avoir l esprit que e OnDblClick associ au double clic de la souris sur un l ment HTML s lectionn n a pas d quivalent sur le clavier et ne doit donc pas tre utilis e les v nements de la souris li s des coordonn es ne doivent pas tre utilis s e les v nements de la souris doivent tre associ s des l ments analogues du clavier Par exemple OnMouseUp avec OnKeyUp OnMouseDown avec OnKeyDown OnClick avec OnKeyPress OnMouseOver et OnMo
7. gt lt td gt lt l main contents gt lt td class main gt Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 37 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION lt h1 gt Stock Market up today lt h1 gt lt article text here gt lt td gt lt right panel gt lt td class link gt lt h2 gt Related links lt h2 gt lt content here gt lt td gt lt tr gt lt table gt lt body gt R f rence WCAG 2 0 1 3 1 1 3 2 2 4 6 2 4 10 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 11 b Taille relative du lay out Utiliser le lay out avec lt DIV gt et CSS ou l utiliser avec des tableaux dans ces deux cas les diff rentes zones qui composent la page doivent tre d finies en pourcentage et jamais en valeur absolue Ceci donne la possibilit aux navigateurs de proc der l adaptation des contenus en rapport avec les dimensions de l interface utilis e par l utilisateur sans superposition des objets ou perte d informations Il faut prendre en consid ration le fait que les ma
8. LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION a 3 ES ns Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Date Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Mode d emploi du pr sent guide technique 5 Recommandations pour le d veloppement de l interface de nouveaux sites 7 1 Structure Pr sentation Action se seeseseseeeeeseseeserreststssesresrserrerrsrtnesrenesrntsresnnes 8 2 Gode OUATNIL 2 sb nar arar ae eE Ee unanime 11 o TREE f TA e e a E na eee E 13 b Internationalisation eeeeeeeeeeeeseseseseseseesssssssrsrrensrsrsntstsssssrsrretenesrsrersttnennnenrnrsnsnsne te 15 C AMDULLANG ersa naine E in 16 d Attrib t DIR e serr an e aaae oennent ana 17 Attib t CARS ETS de R outous 19 f Tag x HTML pour les COnIenus seine dns 20 g Actualisation et redirections raensnmenninnonmasneninnie nee 24 3 CSS Cascading Style Sheet 25 4 Script et autres objets de programmation 28 a Alternatives aux scripts applets ou autres objets de programmation 29 b Ind pendance du dispositif d input s seseseeseseseseeseeesesrsrsrsrssesssesrsesrsrsrsnsnsnsneseseseene 30 c Fen tres et pop up e e eeseseseeeesesrsrsrereresrsrsrsrsrsnessstnenenrstsrsrnonentntstnononentstststererettnenee es 32 D Eay out des PADES nn none E Ea 34
9. Objet de la check list d accessibilit 5 4 Script et autres objets de programmation Comme nous l avons d j sp cifi au paragraphe Il 1 l int rieur des sites applications les actions se r alisent au moyen des fonctions JavaScript ou d autres objets de programmation Toutefois toutes les technologies ne supportent pas ceux ci D s lors dans l optique de l am lioration progressive il est n cessaire de pr voir des modalit s alternatives ces actions Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 28 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION a Alternatives aux scripts applets ou autres objets de programmation Toutes les informations significatives et les fonctionnalit s activables par scripts applets et autres objets de programmation doivent tre disponibles galement quand les pages sont visualis es avec des navigateurs et des technologies qui ne les supportent pas Pour ce motif les informations et les fonctionnalit s v hicul es au moyen de ces objets doivent tre galement disponibles dans des modalit s alternatives Naturellement l alternative doit tre fournie dans le cas o ces objets ont un contenu informatif un script qui change la couleur d un texte au passage de la souris seulement des fins esth tiques n a pas besoin de
10. les symboles commerciaux e Il simplifie de nombreux aspects de l internationalisation sur le web e _Ilest largement support par tous les navigateurs les plus r cents Exemple pour ISO e pour HTML lt meta http equiv content type content text html charset iso 8859 1 gt e pour XHTML lt meta http equiv content type content text html charset iso 8859 1 gt Exemple pour UTF 8 e pour HTML lt meta http equiv content type content text html charset UTF 8 gt e pour XHTML lt meta http equiv content type content text html charset UTF 8 gt R f rence WCAG 2 0 3 1 1 3 1 2 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 4 T Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 19 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION f Tag x HTML pour les contenus Page 20 Titres Une page web doit tre structur e en titres sous titres chapitres sous chapitres et ainsi de suite Certains outils d assistance technologique comme les lecteurs d cran utilisent les titres pour d
11. pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 16 23 Paragraphe Les paragraphes servent contenir des phrases G n ralement un paragraphe contient au maximum trois ou quatre phrases corr l es logiquement et donc diff rents paragraphes c est dire diff rents tags lt P gt et lt P gt appara tront dans un texte Pour revenir la ligne il faut utiliser le tag lt br gt mais il est important que ce lt br gt soit ins r l int rieur du paragraphe et donc entre les tags lt P gt lt P gt L utilisation des lt br gt pour s parer des paragraphes ou cr er des espaces entre les paragraphes doit donc tre consid r e comme impropre La distance entre les diff rents paragraphes doit tre g r e au moyen des CSS en donnant une valeur aux propri t s margin et padding du CSS du tag lt P gt Exemple de CSS pour carter les paragraphes p margin top 1em margin bottom 1em R f rence WCAG 2 0 1 3 1 1 4 8 Type de contr le Test automatique
12. y ait pas d expirations de session inattendues ou de limites temporelles d autres types Pour ces m mes raisons il faut viter les textes en mouvement m me si des m canismes de blocage D Capteur de souffle mulateur de souris souffle sont pr vus Boutons pression Clavier sp cial avec touches encastr es 0 La a Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Version 1 0 Page 101 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Figure 4 Syst mes d entr e pour handicap s moteurs Page 102 Joystick et boule de commande IV Les personnes ayant des difficult s cognitives Le domaine de troubles cognitifs est tr s vaste et diversifi Dans ce contexte on peut uniquement tenter de mettre en vidence avec beaucoup de prudence quelques aspects communs En g n ral ces personnes peuvent avoir des probl mes de concentration d attention de lecture et de m morisation qui au niveau de l interaction homme machine comportent des difficult s par exemple dans e la compr hension des pages complexes tant au niveau du contenu que de la mise en page e la lecture de texte en mouvement e la lecture de textes sur une m me page comportant des objets en mouvement images Flash etc e l arriv e au bout de s quences d actions complexes En g n ral les person
13. attribut ALT vide ALT ou elles sont charg es comme image de fond au travers des CSS 48 Dans les plans image c t client ou c t serveur des liens alternatifs visibles sont pr sents sur la page de mani re ce que les fonctionnalit s affich es sur le plan soient utilisables m me lorsque les images sont d sactiv es 49 Dans les plans image c t client ou c t serveur des textes alternatifs sont pr sents tant sur l image du plan que sur les zones cliquables du plan Notes Documents non HTML OUI NON N C Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Page 93 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION 50 Les objets qui utilisent des technologies non d finies par des grammaires formelles publi es PDF Flash etc ont des scripts et des applets accessibles aux outils de technologie d assistance 51 En pr sence d objets multim dia des alternatives textuelles x HTML un r sum bref des l gendes textuelles synchronis es et ou des descriptions audio sont fournies selon l importance du contenu Notes Script applet et autres objets de programmation OUI NON N C 52 Applet script et autres objets de programmation y compris les gestionnaires d v ne
14. dans un ensemble de boutons radio l un d eux doit tre s lectionn par d faut Toujours pour garantir l ind pendance du dispositif d input tous les l ments du formulaire doivent tre utilisables galement partir du clavier Les touches utiliser sont le tab le shift tab les fl ches la barre d espace et l envoi Pour cette raison comme nous l avons indiqu au paragraphe 2 4 2 il ne faut pas permettre la g n ration automatique d v nements au moment o l on quitte le focus d un champ ou d un contr le par exemple travers l instruction Onchange et OnSelect pour la souris il faut toujours ins rer un bouton de confirmation explicite de l action Si n cessaire mentionner les champs obligatoires avec un ast risque plac la fin de l tiquette exemple Pr nom en sp cifiant au bas du formulaire le sens de l ast risque Il est pr f rable de ne pas utiliser les tableaux pour disposer les champs sur le formulaire mais plut t de recourir aux feuilles de style CSS Ne pas utiliser les listes d roulantes pour l insertion de la date utiliser les champs d input pr format s de fa on appropri e R f rence WCAG 2 0 1 4 2 1 4 8 2 1 1 2 1 2 2 4 3 3 2 5 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 a et 1I1 2 c selon la m thodologie indiqu e dans
15. lectronique Agrandisseur d cran C est un logiciel qui agrandit l cran et visualise la portion d cran o se trouve le curseur comme s il s agissait d une sorte de loupe L utilisateur se sert de la souris ou du clavier pour explorer l cran la recherche des l ments qui l int ressent Les agrandisseurs d cran sont utilis s normalement par les malvoyants graves c est dire ceux qui ont une r duction de la vue tr s lev e Tous les agrandisseurs de nouvelle g n ration ont une vaste gamme d outils de navigation agrandissent les caract res et disposent d une synth se vocale pour aider la consultation de longues pages de texte Parmi les agrandisseurs d cran les plus utilis s il y a ZoomText produit par Ai Squared www aisquared com et Magic de Freedom Scientific www freedomscientific com c Outils d valuation automatique du code Ces outils permettent de v rifier si les pages web sont compl tement adh rentes aux sp cifications techniques du W3C pour le code HTML XHTML et CSS Ces outils sont D W3C s HTML Validation Service http validator w3 org W3C s CSS Validation Service http jigsaw w3 org css validator W3C Link Checker http validator w3 org checklink instrument de validation en ligne qui permet la v rification des liens et des ancres l int rieur des pages individuelles ou de Guide technique d accessibilit pour la cr ation et la refonte des
16. utilisation de lt FIELDSET gt pour regrouper les champs les instructions tablies dans les recommandations ont t suivies 34 Il est possible d interagir avec tous les l ments du formulaire diter les champs s lectionner des entr es dans les listes activer des boutons etc uniquement via le clavier 35 Dans le formulaire en mode de lecture lin aire e es tiquettes sont dispos es proximit de leurs champs respectifs e les tiquettes et les champs sont correctement associ s 36 La tabulation du formulaire est correcte 37 Utilisation des boutons standards et non des liens 38 Les boutons d un formulaire sont loign s les uns des autres tant verticalement qu horizontalement 39 Les dimensions des boutons sont adapt es l tiquette de mani re rendre leur contenu clairement lisible 40 Les messages d erreur sont affich s de mani re claire et pr cise 41 En cas d expiration de la session de la page l utilisateur en est averti de mani re claire et explicite par l indication du temps maximum consenti et les ventuelles alternatives pour jouir du service 42 En pr sence de contr les c t client Javascript de la bonne saisie sur clavier des champs les contr les sont r p t s c t serveur Notes Tableaux de donn es OUI NON N C 43 Les tableaux de donn es ont un titre codifi par lt CAPTION gt et ou par SUMMARY selon les instructions de
17. videmment les lecteurs Page 98 d cran les plus r pandus parmi les aveugles sont ceux qui sont les plus compatibles avec les applications les plus commun ment utilis es par les utilisateurs et ce sont ceux qui assurent la garantie de la compatibilit des produits services r alis s Figure 1 Images de l cran braille Un autre produit prendre en compte est le navigateur textuel Lynx http lynx isc org lynx2 8 5 index html Gr ce son interface facilement compatible avec la synth se vocale et la rapidit de chargement des pages il est souvent utilis par les aveugles la place des navigateurs graphiques Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Version 1 0 bee LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION lt http www infocom tn index php id 41 e f x 1l information et de la communication en Tuni Technologies de TEREM d offres Merci Rfles et Attributions Organisation Etablissements Sous Tutelle xxx XI me plan Page 99 Strat gie Nationale Principales R alisations Perspectives d Avenir Projets de d veloppement des TIC XXXXX Secteur des t l communications Secteur Informatique Secteur de la Poste Echanges et Commerce Electronique Entreprises des Pilles Technologiques Formations et Enseignement Superieur p s
18. x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe IlIl 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 17 23 T Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 21 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Emphase L emphase est un aspect essentiel dans le texte dans la mesure o elle focalise l attention du lecteur sur des mots ou des sections auxquels l auteur attribue une importance particuli re Pour emphatiser le texte en italiques ou en gras il est conseill de ne pas recourir au CSS mais d utiliser directement dans la structure x HTML les tags s mantiques lt EM gt et lt STRONG gt pour g n rer respectivement l italique et le gras Les tags lt l gt et lt B gt ont le m me rendu visuel mais n ayant pas de valeur s mantique ils ne sont pas interpr t s correctement par les outils d assistance technologique et sont consid r s comme des tags ind sirables Exemple de la mani re de mettre les textes en italique et en gras lt p gt Pour g n rer respectivement l lt emitalique lt em gt et le lt strong gt gras lt strong gt lt p gt R f rence WCAG 2 0 1 3 1 Type de contr le Test automatique
19. 0 Page 25 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Author CSS feuille de style cr e par l auteur de la page web cette feuille de style pr vaut sur la pr c dente User CSS il s agit d un type particulier de feuille de style g n ralement cr e par les utilisateurs ayant des exigences sp cifiques comme les malvoyants qui ont la facult de l activer au moyen de personnalisation du navigateur cette feuille de style a la priorit absolue sur les pr c dentes Sur la base de ces consid rations dans la d finition des propri t s du CSS le d veloppeur doit tenir compte du fait que la page web pourrait tre visualis e avec un CSS d fini par l utilisateur user CSS l user CSS d finit uniquement les tags x HTML relatifs aux contenus titres listes etc et non les tags div et span relatifs au lay out de la page titre menu principal etc Les r gles pour composer les feuilles de style sont contenues dans un ensemble de lignes directrices d j publi es par le W3C Voici quelques suggestions de codification correcte du CSS utiles en vue de l accessibilit Suivre correctement les r gles indiqu es par le box model du CSS Pour simplifier la largeur et la hauteur de chaque l ment d finissable comme box par exemple les listes les cellules de tableaux les divisions les paragraphes etc il faut en indiquer les propri t s dans le
20. 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 75 MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION LA REPUBLIQUE TUNISIENNE b Flash Adobe Flash est un logiciel qui permet de cr er des animations vectorielles principalement pour le web Il est utilis en outre pour cr er des sites applications entiers et gr ce l volution des derni res versions il est devenu un instrument puissant pour la cr ation de Rich Internet Application et de plateformes de streaming audio video Pour Flash galement comme pour les PDF d importantes barri res se sont cr es pour l accessibilit dans la mesure o les fichiers swf extension qui caract rise les fichiers r alis s en Flash r alis s de mani re incorrecte ne s int grent pas bien avec les outils d assistance technologique La pratique la plus correcte pour l accessibilit est donc de ne pas les utiliser Si l on ne peut pas les viter il faut les rendre directement accessibles en suivant les lignes directrices sur accessibilit du producteur comme indiqu la page http www adobe com accessibility products flash ou fournir pour les vid os une alternative textuelle tel qu il est d crit au paragraphe 1 11 3 Comme pour les PDF il est n cessaire d indiquer clairement dans le texte du lien le type de document que l on ouvre flash et de fournir le lien pour t l cha
21. 170 e num ros tunisien avec indicatif international deux zero ou le signe puis trois chiffres du pr fixe international suivis des deux chiffres de l indicatif r gionnal et enfin groupes de trois chiffres s par s par un tiret ou deux espaces par exemple 00 216 71 710 170 00 216 71 710 170 216 71 710 170 216 71 710 170 Le m me num ro de l exemple pr c dent s il est crit 71 710 170 sera lu Soixante et onze sept cent dix cent soixante dix donc de mani re plus compr hensible Pour faire lire correctement les num ros ordinaux premier deuxi me troisi me etc il faut les crire 1er 2eme 3eme etc ou en entier premier deuxi me troisi me etc Les caract res romains sont interpr t s de mani re irr guli re et souvent comme du texte normal Izi I deux VI vi VIl sept Il est donc d conseill de les utiliser Pour lire n comme num ro par exemple n 32 num ro 32 il faut crire n par exemple n 32 Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 46 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION R f rence WCAG 2 0 3 1 2 3 1 3 4 1 1 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II
22. 59 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION s agit d un usage impropre de ce contr le comme on l a d j dit le lecteur d cran lirait le LEGEND avant tout autre contr le dans le FIELDSET En cas de listes tr s longues et ou relevant de typologies diff rentes il peut tre utile de recourir Page 60 au tag lt OPTGROUP gt pour s parer les mots d une liste d roulante ou d une bo te combin e en plusieurs groupes en attribuant un titre chaque groupe Exemple de la mani re d organiser correctement le lt FIELDSET gt Dans ce formulaire les champs sont regroup s avec lt FIELDSET gt et lt LEGEND gt Les tiquettes sont associ es au champ de mani re univoque au moyen de lt LABEL FOR gt et ID TABINDEX assure la tabulation correcte De plus lt lt OPTGROUP gt est pr sent dans lt SELECT gt Donn es personnelles Nom Pr nom Formation Titre du dipl me Ingenieur informaticien Y Mention Exp rience professionnelle i Soci t actuelle Fonction Le code de ce formulaire est le suivant lt form name CV1 gt lt fieldset gt lt legend gt Donn es personnels lt legend gt lt label for Nom gt Nom lt label gt lt input type text tabindex 1 value id Nom gt lt label for Prenom gt Pr nom lt label gt lt input type text tabindex 2 value id Prenom gt lt fieldset gt lt fieldset gt lt legend gt
23. Formation lt legend gt lt label for TitDiplome gt Titre du diplome lt label gt lt select id TitDiplome tabindex 3 gt lt optgroup label Titre gt lt option value L1 gt Ingenieur informaticien lt option gt lt option value L2 gt Ingenieur electronic lt option gt lt optgroup gt lt optgroup label Diplome gt lt option value D1 gt Maitrise lt option gt lt option value D2 gt Mastere lt option gt lt optgroup gt lt optgroup label Autre gt lt option value Al gt Licence lt option gt Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION lt option value A2 gt Doctorat lt option gt lt optgroup gt lt select gt lt label for Mention gt Mention lt label gt lt input type text tabindex 4 value id Mention gt lt fieldset gt lt form gt R f rence WCAG 2 0 3 3 2 4 1 1 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et III 2 c selon la m thodologie indiqu e dans le paragraphe 11 3 Difficult du contr le moyen Objet de la check list d accessibilit 33 d Boutons Comme indiqu au paragraphe 1l 4 b la g n ration automatique d v nement lorsque
24. cette s paration savoir e DTD Strict de HTML 4 01 e DTD Strict de XHTML 1 0 Pour les DTD de type Transitional il est de toute fa on n cessaire e D utiliser les CSS pour r gler les caract ristiques de pr sentation et de style de la page e D viter l insertion de tags ind sirables parce que les outils d assistance technologique ne les interpr tent pas correctement e D viter louverture de nouvelles fen tres du navigateur avec attribut lt TARGET _BLANK gt parce que certaines personnes handicap es et valides avec une faible exp rience dans l utilisation des technologies informatiques peuvent ne pas avoir la perception de cet v nement et donc rester bloqu es e Ne pas utiliser les images pour g rer les espaces et les marges parce que celles ci alourdissent inutilement la page mais elles cr ent aussi des probl mes avec les outils d assistance technologique Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 12 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Exemple de la mani re d indiquer correctement la DTD e pour DTD Strict de HTML 4 01 lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN http www w3 org TR html4 strict dtd gt e pour DTD Strict de XHTML 1 0 lt DOCTYPE html PUBLIC W3C DTD XHTML 1 0 Strict EN http www w3 org TR x
25. endif gt Sp cifier les styles relatifs aux liens Le CSS doit d finir le style des liens selon l ordre suivant a link a visited a hover a active Certaines informations n cessaires aux utilisateurs de lecrteurs d cran ne doivent pas tre affich es sur l interface L utilisation de l instruction DISPLAY NONE ne permettant pas de r aliser cela il est recommand d utiliser les instructions suivantes position absolute top 10000px left 10000px D autres modes de codifier le texte cach impliquent que le lecteur d cran ignore aussi ce texte D nommer correctement les classes et id du point de vue syntaxique Les noms de classes et id peuvent contenir seulement des caract res alphanum riques A Za z0 9 et le tiret et ne peuvent pas commencer par un tiret ou un chiffre Consid rer que les propri t s CSS sont sensibles la casse Les valeurs des attributs x HTML class et id sont aussi sensibles la casse utilis es dans la feuille de style Par exemple id HOME identifie un objet diff rent de id home D finir les id de mani re univoque Il faut garder dans l esprit que dans un document x HTML l attribut id est utilis pour identifier de fa on univoque un l ment Au contraire la classe peut tre rappel e Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1
26. et sont encore utilisables malgr un agrandissement de 200 des caract res 14 V rification de la navigation avec le navigateur textuel Lynx e Les contenus et fonctionnalit s sont disponibles de mani re quivalente tout comme avec les navigateurs graphiques e les contenus des pages gardent leur signification d ensemble et leur structure s mantique Notes Pr sentation des contenus OUI NON N C 15 Utilisation d un titre significatif des contenus lt H1 gt coh rent avec le contenu du TAG lt TITLE gt 16 Les titres lt H1 gt lt H6 gt sont utilis s pour structurer le texte dans la page et respectent un ordre hi rarchique 17 Afin de d finir le contenu paragraphes listes citations etc les tags x HTML ont t utilis s de mani re s mantiquement correcte selon les instructions tablies dans les recommandations 18 Toutes les informations et les fonctionnalit s v hicul es au travers de la couleur sont disponibles m me sans cette derni re et ce m me pour la couleur utilis e pour les liens 19 Les couleurs du texte et le fond sont tablis de mani re garantir un contraste suffisant contr l par l algorithme propos par le W3C et ce m me pour les probl mes de daltonisme Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique B Version
27. f rence WCAG 2 0 1 3 1 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe IIl 2 b selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 44 c En t tes multiples Lorsqu il est n cessaire d utiliser des tableaux avec des en t tes multiples o sont pr sentes diff rentes en t tes en relation avec diff rents groupes de colonnes la simple construction du tableau avec des cellules d en t tes lt TH gt et des cellules de donn es lt TD gt n est pas suffisante en vue de permettre au lecteur d cran de lire toutes les informations utiles pour comprendre la donn e Dans ces cas utiliser les attributs ID et HEADERS e D permet d identifier sans quivoque une cellule il doit tre utilis pour identifier les cellules qui contiennent les donn es descriptives des cellules de donn es classiquement les cellules des en t tes et celles de la premi re colonne e HEADERS permet d associer les diff rentes cellules entre elles en se basant sur l ID des cellules Pour des exigences diff rentes on peut utiliser galement e AXIS permet une sp cification ult rieure de la donn e identifi e avec ID par exemple la typologie de donn e T Guide technique d accessibilit pour la cr ation et la refonte des sites Web
28. ils sont lus hors de leur contexte et parce ce qu ils sont ambigus pour tous les utilisateurs S il est n cessaire de recourir ces liens il est pr f rable d utiliser des textes significatifs Par exemple si l utilisateur se trouve dans la page des r sultats de la Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION recherche pour revenir la page de param trage de la recherche il vaut mieux utiliser le lien param trage de la recherche la place de page pr c dente puisque l utilisateur peut avoir oubli quelle tait la page pr c dente Ne pas utiliser les URL comme texte des liens surtout si elles sont complexes Par exemple dans le cas de la phrase Le logiciel peut tre t l charg la page suivante du site de Microsoft Page 52 http www microsoft com downloads include en us RelatedSites asp le lecteur d cran lira URL qui appara tra incompr hensible et les utilisateurs recourant des syst mes d input vocal auront de grandes difficult s donner la commande vocalement Il vaut mieux pr senter le lien avec un texte Le logiciel peut tre t l charg dans la section du site Microsoft consacr au t l chargement Si pour quelque motif que ce soit on veut indiquer explicitement si le lien est reli
29. la signification des donn es de la premi re colonne Exemple de tableau avec des donn es peu descriptives et des donn es suffisamment descriptives pour la premi re colonne Dans le tableau ci dessous les donn es de la premi re colonne sont peu descriptives La cellule relative l adresse de Sfax par exemple est lue de la mani re suivante par le lecteur d cran colonne 3 ligne 3 adresse 2016 64 Avenue Franklin Roosevelt Mettre le code postal dans la premi re colonne n aide pas comprendre de quelle ville il s agit Code E Gl Ville Adresse T l phone posta 1080 Tunis 5 rue du Jardin Tunis 71 353 444 2016 Sfax 64 Avenue Franklin Roosevelt 73 522 123 8050 Hammamet 10 Avenue Moncef Bey 72222777 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Dans le tableau suivant en revanche quand le lecteur d cran doit lire la m me cellule que dans le tableau pr c dent il lit comme suit colonne 3 ligne 3 adresse Sfax 64 Avenue Franklin Roosevelt en rendant compr hensible ce quoi renvoie la donn e de la cellule s lectionn e 7 Code 1 Ville Adresse T l phone Postale Tunis 1080 5 rue de Jardin Tunis 71 353 444 Sfax 2016 64 Avenue Franklin Roosevelt 73 522 123 Hammamet 8050 10 Avenue Moncef Bey 72222777 R
30. le Par ailleurs le chapitre 3 aborde l aspect de la v rification Il illustre une m thodologie qui permet l expert en accessibilit d exprimer un avis sur la conformit ou la non conformit des pages r alis es aux recommandations d utilisabilit et d accessibilit contenues dans le chapitre 2 Cette m thodologie se base sur l utilisation de diff rents instruments d valuation comme le navigateur les technologies d assistance les outils pour l valuation automatique et semi automatique du code Le r sultat du contr le effectu avec ces instruments est repris dans la check list jointe l annexe 1 en indiquant pour chaque item s il est conforme Oui s il n est pas conforme Non ou s il n est pas applicable N C apr s avoir effectu le contr le aff rent L valuation sera positive seulement dans le cas o tous les items auront une r ponse positive ou N C Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 6 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Il Recommandations pour le d veloppement de l interface de nouveaux sites Le pr sent chapitre contient les recommandations pour l organisation et la r alisation du graphisme de la structure des pages de la navigation et de la structure des contenus c est dire de tout ce qui doit tre organis et
31. le paragraphe 111 3 Difficult du contr le facile Objet de la check list d accessibilit 34 36 b tiquettes label Tous les champs doivent avoir une tiquette label Les tiquettes et les champs doivent tre align s gauche ou droite selon le sens de lecture de la langue c t gauche pour les langues occidentales c t droit pour la langue arabe Le champ doit tre plac le plus pr s possible des tiquettes aff rentes en cherchant respecter galement l alignement entre les champs eux m mes EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 57 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Les tiquettes e Doivent tre associ es sans quivoque aux contr les relatifs en utilisant n cessairement le tag lt LABEL FOR gt et l attribut ID du tag lt INPUT gt e Doivent tre claires concises significatives et descriptives e Doivent tre plac es toujours sur la m me ligne des contr les auxquels elles se r f rent de pr f rence devant les champs et non au dessus l exception des boutons radio et des cases cocher qui pr voient l tiquette toujours sur la m me ligne mais apr s le champ e Ne doivent pas tre trop loign es des champs relatifs pour favoriser les malvoyants qui utilisent des logiciels d agrandissement qui sont donc
32. les lignes directrices nonc es dans le chapitre 2 de ce document La check list se divise en trois sections e introduction e contr les d accessibilit e observations suppl mentaires La premi re section d finit e le nom du site de l application web e l URL de r f rence e les utilisateurs cibl s c est dire savoir si le site l application s adresse au personnel interne ou externe de l administration de r f rence Conna tre les utilisateurs et le contexte dans lequel ils op rent permet d valuer le contr le sur les sp cificit s de l environnement cible e Outils utilis s pour l valuation navigateur outils d assistance technologique etc La deuxi me section reprend tous les items v rifier par l expert en accessibilit et qui subdivis s par typologie de contr le Chaque item pr voit 3 possibilit s e Oui dans le cas o la caract ristique d interface analys e est correspondante tout ce qui a t prescrit par l item e Non dans le cas o il ne correspond pas il faut alors mentionner dans le champ Notes les ventuelles indications qui peuvent aider le d veloppeur r soudre le probl me Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION e N C dans le cas ou l item n est pas applicable par
33. li s une visualisation tr s limit e de l cran e Doivent tre coh rentes c est dire qu il faut utiliser toujours la m me tiquette pour identifier le m me champ e Doivent se terminer par un double point par exemple Pr nom du contribuable e utiliser les caract res majuscules seulement pour la premi re lettre du premier mot de l tiquette sauf s il s agit d un nom propre ou d un acronyme Exemple de la mani re de coder les tiquettes avec lt LABEL FOR gt et lt INPUT ID gt Dans ce formulaire les tiquettes sont associ es aux champs avec lt LABEL FOR gt et avec ID de lt INPUT gt TABINDEX est galement tabli pour assurer la navigation correcte entre les champs Nom Pr nom O O Grade Marque Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 58 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Entreprise R le Le code de cette tiquette est le suivant lt form name CV gt lt label for Nom gt Nom lt label gt nn lt input type text value id Nom gt lt label for Pren gt Pr nom lt label gt lt input type text value id Pren gt lt label for TitStudio gt Grade lt label gt lt select id TitStudio gt lt form gt R f rence WCAG 2 0 3 1 5 3 2 4 3 3 2 4 1 1 Type de co
34. modalit s alternatives ou d tre comment Si des scripts de validation sont pr vus c t client ces contr les doivent tre dupliqu s c t serveur dans la mesure o certains navigateurs ne supportent pas JavaScript Exemple e Si l on utilise JavaScript l information analogue peut tre fournie l int rieur du tag lt NOSCRIPT gt e Si l on utilise lt OBJECT il faut ins rer la description textuelle l int rieur du tag lt OBJECT gt e Si l on utilise lt APPLET gt il faut fournir un quivalent textuel l attribut ALT R f rence WCAG 2 0 4 1 2 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 a II1 2 b et 111 2 c selon la m thodologie indiqu e dans le paragraphe 111 3 Difficult du contr le moyen Objet de la check list d accessibilit 9 42 Concernant les mises jour automatiques et les r adressages les m mes recommandations que celles d j fournies pour l x HTML au paragraphell 2 e sont applicables tant que les programmes utilisateur ne permettront pas de les bloquer il ne faut pas utiliser de code JavaScript pour mettre jour ou r adresser automatiquement les pages Il faut pr f rer des m canismes c t serveurs ou dans le cas du r adressage pr voir une page statique avec le lien pour passer la nouvelle page
35. moyen de ACRONYM exemple lt ACRONYM TITLE Bons ordinaires du tr sor gt BOT lt ACRONYM gt et ABBR exemple lt ABBR TITRE Paragraphe gt Par lt ABBR gt mais pr f rer la mention tendue des mots ou la sp cification entre parenth ses du sens de l acronyme au profit de l ensemble des utilisateurs Ne pas pr senter de texte clignotant ou en mouvement dont les fr quences d intermittence peuvent provoquer des troubles d pilepsie photosensible des troubles de la concentration ou qui peuvent causer le mauvais fonctionnement des outils d assistance technologique La fr quence de clignotement qui peut cr er des troubles d pilepsie est celle comprise entre 4 et 59 Hz Lorsque des informations n cessitent l utilisation de ces animations il faut pr venir l utilisateur du risque possible avant de les pr senter et pr voir des m thodes qui permettent de les viter Si l on veut mettre en vidence un contenu eviter de le souligner afin de ne pas le confondre avec un lien utiliser plut t le gras Rappelons que les caract res gras doivent tre codifi es avec lt STRONG gt et non avec lt B gt bold comme indiqu au paragraphe I1 2 d L utilisation du gras doit tre toutefois mod r e par exemple ne pas l utiliser pour les labels des contr les De plus le gras ne doit pas tre associ e une diminution de la taille des caract res Ne pas utiliser les italiques car elles sont plus diffi
36. o Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION lt Sync Start 17000 gt lt p class ENCC id Source gt Debra lt p class ENCC gt Cette br ve vid o vous montrera un exemple de l utilisation des sous titres lt SpaniD 17000 gt lt Sync Start 21500 gt lt p class ENCC id Source gt Debra lt p class ENCC gt Cette m thode est fondamentale pour permettre aux personnes sourdes de profiter d une vid o lt SpaniD 21500 gt R f rence WCAG 2 0 1 2 1 1 2 2 1 2 3 1 2 4 1 2 5 1 2 6 1 2 7 1 2 8 1 2 9 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe 1I1 2 a selon la m thodologie indiqu e dans le paragraphe 111 3 Difficult du contr le facile Objet de la check list d accessibilit 51 lll v rification d accessibilit bas e sur la check list La mise en conformit d un site service existant trouve son fondement dans les activit s de v rification de l accessibilit et de l utilisabilit qui sont des phases essentielles de la conception centr e sur l utilisateur et du processus pour la d finition de la qualit globale du site service L valuation bas e sur des check lists
37. pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 84 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION les contenus de la page soient accessibles en cas d utilisation des fonctions pr vues par les navigateurs pour d finir la grandeur des caract res les contenus des pages soient accessibles en cas de modification de la r solution de l cran en v rifiant que la barre de d filement horizontal ne soit pas activ e la page soit consultable uniquement avec le clavier en s assurant de pouvoir acc der tous les liens et tous les contr les des formulaires et que les liens indiquent clairement o ils m nent les contenus et les fonctionnalit s de la page soient encore consultables m me selon des modalit s diff rentes en cas de d sactivation des feuilles de style script applet et autres objets de programmation v rifier les diff rences de luminosit et de couleur entre le texte et le fond selon les algorithmes d finis par le W3C modifier la couleur de l cran en chelle de gris ou imprimer la base en chelle de gris ou en noir et blanc et observer si les liens sont identifiables visuellement Naviguer avec un navigateur textuel Lynx de mani re ce que les contenus et les fonctionnalit s des pages s lectionn es maintiennent leur signification d ensemble et leur structure s mantiq
38. pour le d veloppement d interfaces accessibles des nouveaux sites et services web mais aussi pour la mise en conformit des sites et services d j existants fournis par l administration publique Dans ce contexte le terme d accessibilit d signe la capacit des syst mes informatiques fournir des services et des informations accessibles sans discriminations visant tous les utilisateurs ind pendamment de la pr sence ou non d handicaps physiques sensoriels cognitifs et des sp cificit s mat rielles et logicielles Le concept d accessibilit limit la possibilit d acc s aux informations est englob par le concept d accessibilit vue comme possibilit de b n ficier Dans cette optique il est pleinement assimilable celui d utilisabilit entendue comme la capacit du logiciel permettre des utilisateurs sp cifiques d ex cuter des activit s particuli res avec efficacit efficience et satisfaction dans un contexte d utilisation d termin L objectif est de fournir l utilisateur toutes les fonctionnalit s dont il a besoin pour ex cuter les activit s de fa on correcte et rapide en relation avec les objectifs d interaction atteindre le contexte technologique et organisationnel dans lequel il op re les exigences qu il manifeste quel que soit l outil d interaction sp cifique utilis qu il s agisse d un navigateur d un outil d assistance technologique ou d un PDA Le
39. re aider l utilisateur comprendre quoi se r f rent les donn es et les informations contenues dans la page et ou quelle activit doit tre effectu e Les titres ne doivent pas d passer la longueur maximale de 80 caract res y compris les espaces le texte exc dentaire n est pas lu par le lecteur d cran et l utilisateur perd l information sur la hi rarchie entre les diff rents titres Le fichier x HTML doit aussi avoir un titre significatif ins r dans le tag lt TITLE gt plac entre le d but et la fin de lt HEAD gt de mani re ce que l utilisateur puisse reconna tre la page sans quivoque lorsqu il en ins re l adresse dans la liste des favoris Le standard pour le lt TITRE gt des fichiers html est lt TITLE gt Nom site Titre page visualis e lt TITLE gt Le titre qui identifie les contenus principaux et le titre du tag lt TITLE gt doivent tre coh rents entre eux comme indiqu au paragraphe II 7 b e Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 41 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Il faut faire attention la longueur du TITLE pour ne pas avoir le texte tronqu la description dans le lt TITLE gt ne doit pas d passer les 70 caract res espaces compris Dans le lt TITLE gt comme dans les autres parties textuelles du site de l application i
40. sentent une r f rence dont il faut tenir compte dans la conception de l interface et de l interaction homme machine l inverse il y a moins de litt rature concernant les modalit s d interaction des handicap s avec les technologies informatiques En fait ces personnes n interagissent pas souvent avec le produit informatique de mani re directe l interaction est fournie par une interface les outils d assistance technologique utilis s pour compenser l handicap qui les caract rise Par outils d assistance technologique on entend tout objet faisant partie d un quipement ou d un syst me produit de mani re commerciale ou personnalis e qui est utilis pour augmenter maintenir et am liorer les capacit s fonctionnelles des personnes handicap es Dans ce contexte on prendra uniquement en consid ration les outils d assistance technologique qui concernent l interaction homme machine et qui influence la mani re avec laquelle l utilisateur interagit avec l ordinateur et donc avec le site service sp cifique mis en place La connaissance des handicap s des outils d assistance technologique qu ils utilisent et de la mani re dont ils les utilisent pour interagir avec l ordinateur devient fondamentale pour au moins deux aspects e D un c t il est n cessaire de conna tre les outils d assistance technologique afin de s assurer que les produits services r alis s leur soient techniquement accessibles e D un autre
41. sites Web de l administration publique Janvier 2010 Version 1 0 Page 100 MINISTERE DES TECHNOL CIES DE LA COMMUNICATION Les probl mes dans l usage des mains peuvent aller des tremblements jusqu la paralysie totale des membres sup rieurs Pour cette raison les outils d assistance technologique utilis s qui concernent principalement la facult d ins rer des donn es peuvent tre tr s diff rents selon la gravit de l handicap Ils consistent en des p riph riques d entr e comme des claviers sp ciaux des mulateurs de souris et de claviers des commutateurs des senseurs des joysticks des boules de commandes des logiciels de reconnaissance vocale jusqu des syst mes sophistiqu s qui permettent d entrer des donn es gr ce aux battements des paupi res ou au souffle dans une paille Normalement si l interface est utilisable avec le clavier elle fonctionnera aussi avec les outils d assistance technologique mais il faut prendre en compte des dimensions et des espacements suffisants entre les objets sur l interface afin que l handicap puisse toucher l objet d int r t sans erreurs Dans les images suivantes sont pr sent s quelques exemples de syst mes d entr es pour handicap s moteurs Vu les difficult s que rencontrent les handicap s moteurs dans le contr le de leurs mains ils ont besoin de plus de temps pour ex cuter les actions sur l interface Pour cette raison il est important qu il n
42. summary Le tableau reprend l adresse et le num ro de t l phone des diff rents contribuables gt lt caption gt Ceci est le titre du tableau ins r en utilsant le tag amp lt CAPTION amp gt lt caption gt lt tr gt lt th gt Nom du contribuable lt th gt lt th gt Adresse lt th gt lt th gt T l phone lt th gt lt tr gt lt tr gt lt td gt Ali Ben Ali lt td gt lt td gt 5 rue du Jardin Tunis lt td gt lt td gt 71 710 710 lt td gt lt tr gt lt table gt EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION R f rence WCAG 2 0 1 3 1 Type de contr le Test automatique Page 67 Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et IIl 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 43 Les cellules de la premi re colonne du tableau doivent contenir une valeur descriptive valable pour toute la ligne partir du moment o les lecteurs d cran consid rent les informations figurant dans la premi re colonne comme en t tes des lignes respectives Deux exemples sont pr sent s ci apr s l un est n gatif et l autre est positif au sujet de
43. surtout dans le cas de pr sentations en temps r el On consid re qu un m dia audio ou vid o est indispensable quand il n est pas possible de comprendre la signification globale du contenu transmettre si l on n a pas acc s ce m dia En relation avec ces aspects et en consid ration des outils d assistance technologique lecteur d cran on peut imaginer les cas suivants avec les interventions correspondantes possibles pour impl menter l accessibilit pour les aveugles et les sourds e Film o le son et l image sont interd pendants la vid o n est pas d crite par une voix transcription de la voix sur la page html avec description des ventuelles parties importantes de la vid o r alisation de l gendes synchronis es avec la vid o e Film o le son est explicatif de la partie vid o l image est d crite par une voix transcription de la voix sur la page html ou version audio uniquement r alisation de sous titres synchronis s e Film o seule la partie audio est importante ex discours message ou interview transcription de la voix sur la page html r alisation de sous titres synchronis s Les standards pour les pr sentations synchronis es sont le SMIL de W3C et le SAMI de Microsoft bas sur Windows Media Player Quicktime Realplayer et Flash permettent d ajouter des sous titres aux vid os Exemple de code d un fichier de type smi pour souligner une vid
44. une perte partiels ou totale de la vue avec le support d un lecteur d cran e Lecteurs d cran Un lecteur cran est une application logicielle qui identifie et interpr te le texte montr l cran d un ordinateur par synth se vocale ou travers un cran braille et qui est Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION utilis e par des personnes ayant une perte partielle ou totale de la vue l un des lecteurs d cran les plus utilis s est Jaws Job Access With Speech produit par Freedom Scientific www freedomscientific com Jaws est probablement le meilleur lecteur d cran non seulement pour la quantit de fonctionnalit s qui l enrichissent mais parce qu il permet d utiliser la plus grande partie des applications Windows comme Microsoft Office Word Excel Access PowerPoint Outlook Internet Explorer etc Ce logiciel payant peut tre install seulement sur des syst mes d exploitation Microsoft Il existe une version d mo gratuite qui permet d utiliser Jaws pour 40 minutes maximum Il existe galement des lecteurs d cran limit s la navigation web comme Home Page Reader un produit d IBM mais moins r pandu justement parce qu il n est utilis que pour naviguer sur internet et lire le courrier
45. utiliser les outils indiqu s dans les paragraphes 111 2 b et II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Page 34 Objet de la check list d accessibilit 31 5 Lay out des pages a Caract ristiques g n rales Les pages d un site d une application doivent tre organis es en zones bien d finies chacune d elles tant destin e accueillir des typologies sp cifiques de contenus De fa on classique une page web est organis e comme suit Le titre est positionn en haut et contient en plus du logo les fonctions de services et de m tanavigations retour la page d accueil acc s au guide l aide au plan du site aux contacts au moteur de recherche aux zones r serv es etc Le menu principal est positionn horizontalement sous le titre de la page ou verticalement gauche pour les langues occidentales droite pour les langues lues de droite gauche comme l arabe Les contenus principaux sont positionn s sur le corps central de la page Des informations et fonctions additionnelles ou d approfondissement prennent parfois place dans la zone droite ou gauche selon le sens de la lecture Le lay out pour les pages doit tre maintenu de mani re consistante dans tout le site application Le lay out de la page d accueil peut tre diff rent du lay out des pages int rieures Il est utile de d crire par un titre cod
46. 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION plusieurs fois dans le code x HTML pour caract riser de la m me fa on des l ments diff rents Codifier correctement les commentaires Dans les CSS les commentaires doivent tre pr c d s de et suivis de exemple Ceci est un commentaire Organiser le formatage et la position des l ments sur la page par exemple marges pour cr er des espaces sur les quatre c t s du contenu d un l ment on doit utiliser les propri t s margin margin top margin right margin bottom margin left ou les propri t s padding au lieu d ajouter des espaces amp nbsp indentations utiliser text indent espacement entre lettres et ou mots utiliser letter spacing et ou word spacing ne pas ajouter des caract res d espace pour espacer les lettres images et couleurs de fond polices tailles et couleur des caract res positionnement des diff rents l ments dans une image mise en page en respectant correctement les r gles relatives aux l ments float R f rence WCAG 2 0 1 3 1 1 3 2 1 4 8 4 1 1 Type de contr le x Test automatique valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 a et III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile
47. 1 0 Janvier 2010 Page 90 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION 20 Les textes au format image sont r alis s de mani re garantir un contraste texte fond suffisant contr l par l algorithme propos par le W3C et ce m me pour les probl mes de daltonisme 21 En cas d objets et de textes en mouvement d filant ou clignotant dont les fr quences d intermittence peuvent provoquer des troubles d pilepsie photosensible et des troubles de la concentration e utilisateur est averti pr ventivement e ilya des m thodes pr vues pour les viter e on a v rifi qu ils ne provoquent pas des dysfonctionnements des outils de technologie d assistance note animations absentes ou inoffensives N C 22 En cas d abr viations d acronymes de texte en langue trang re etc les instructions relatives au code reprises dans les recommandations ont t bien suivies 23 Les CSS sont utilis es pour d finir le style des textes alignement couleur fond etc selon les instructions des recommandations Notes Navigation et liens OUI NON N C 24 Les liens pr sents dans les pages sont s lectionnables et activables dans le bon ordre travers les commandes du clavier de la technologie d mulation du clavier ou au moyen de syst mes de pointage autres que la souris 25 Chaque lien indique clair
48. 10 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 6 15 c Activation et caract re significatif des liens Pr voir la compr hension des contenus des pages de mani re ce que l utilisateur puisse clairement comprendre ce qu il trouvera dans les diff rentes pages avant m me d y acc der Les liens doivent tre d crits de mani re synth tique et significative m me s ils sont lus hors de leur contexte comme dans la modalit d utilisation par les aveugles au moyen du lecteur d cran qui peut extraire de la page une liste des liens pr sents Pour atteindre ces objectifs il peut parfois tre n cessaire d adapter le texte de la phrase qui contient les liens Dans tous les cas les liens ne doivent pas d passer la longueur maximale de 110 caract res espaces compris le texte exc dant est tronqu par le lecteur d cran Pour clarifier la signification du lien on peut utiliser l attribut TITLE du tag lt A gt en tenant toutefois compte du fait que e Certains outils d assistance technologique ne parviennent pas le lire LE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publiqu
49. 2 lt option gt lt option value page htm gt Page 3 lt option gt lt select gt lt input type button value Gol onclick goto_URL this form selectPage2 gt lt p gt lt form gt R f rence WCAG 2 0 2 1 2 1 1 2 1 2 2 1 3 Type de contr le Test automatique Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Version 1 0 Juillet 2010 Page 31 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION XI valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 a et 1I1 2 c selon la m thodologie indiqu e dans le paragraphe 111 3 Difficult du contr le moyen Objet de la check list d accessibilit 24 34 52 c Fen tres et pop up viter l ouverture de pop up et de nouvelles fen tres du navigateur par rapport celle o est visualis le site l application S il nest pas possible d viter ces v nements il est n cessaire d avertir explicitement l utilisateur louverture de nouvelles fen tres et pop up met en grande difficult les personnes handicap es de la vue et les utilisateurs non habitu s aux technologies informatiques Si la DTD transitionnelle de HTML a t adopt e l ouverture de nouvelles fen tres est possible avec l attribut TARGET du tag lt A gt Dans ce cas l informa
50. CSS gt width largeur height hauteur padding marge int rieure border largeur du bord En sachant que dans le cas d Internet Explorer 5 Win les deux valeurs relatives la marge int rieure et la largeur du bord sont incluses dans la largeur et la hauteur fournies Sp cifier les propri t s de box selon l ordre correct haut droite bas gauche Le CSS permet d indiquer dans une instruction unique les valeurs relatives aux propri t s margin padding ou border mais il est n cessaire de rappeler que l ordre d interpr tation est dans le sens horaire partir du haut par rapport au box haut droit bas gauche Top Right Bottom Left Sp cifier les unit s de mesure pour les valeurs num riques autres que z ro Les r gles du CSS veulent que pour certaines propri t s par exemple width height et font size les unit s de mesure soient clairement sp cifi es sauf dans le cas o la valeur est z ro viter le hack en utilisant les commentaires conditionnels pour Internet Explorer dans la Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 26 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION section lt HEAD gt de l x HTML Exemple Page 27 lt l if IE gt lt link rel stylesheet type text css href style_IE css media screen gt lt
51. E DES TECHNOLOGIES DE LA COMMUNICATION Si pour b n ficier d un service fourni sur une page un laps de temps d termin est pr vu pour effectuer certaines actions Il est n cessaire d avertir les utilisateurs car certains pourraient avoir besoin de plus de temps pour remplir un formulaire ou pour lire une information Page 64 Dans ces cas il y a lieu d indiquer galement le temps maximum utile en fournissant d ventuelles alternatives pour b n ficier du m me service R f rence WCAG 2 0 2 2 1 2 2 3 2 2 5 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 41 g Captcha Dans le domaine de l informatique l acronyme CAPTCHA Completely Automated Public Turing test to tell Computers and Humans Apart d signe un test fait d une ou de plusieurs questions et r ponses pour d terminer si l utilisateur est un humain et non un ordinateur ou plus pr cis ment un robot Les CAPTCHA se basent sur des images particuli rement d form es de lettres et ou de num ros que l utilisateur doit reconna tre et crire sans erreur dans un champ appropri pour achever avec succ s une interaction par exemple l inscription un service en ligne Dans la mes
52. INISTERE DES TECHNOLOGIES DE LA COMMUNICATION Difficult du contr le moyen Objet de la check list d accessibilit 15 16 b Style r dactionnel Pr senter les textes de la fa on la plus simple possible structur s en phrases br ves en liminant tout ce qui est superflu Si n cessaire dans le cas de documents tr s longs pr senter au d but une synth se significative en renvoyant au texte complet via un lien Utiliser toujours les m mes mots pour indiquer les m mes actions ou les m mes concepts si l on a choisi de parler de zones du site ne pas les changer en sections du site Ne pas utiliser des mots trangers ni un langage que des utilisateurs non experts en informatique ou qui ne comprennent pas les langues trang res ne peuvent pas comprendre Chercher le plus possible ne pas les utiliser dans la mesure o la plupart des lecteurs d cran les lisent tels quels par exemple download est lu do double v load file est lu comme le mot fran ais file au sens de queue Il faut toujours sp cifier la langue pr dominante de la page ou d une portion de texte travers l attribut LANG comme indiqu au paragraphe II 2 c viter autant que possible les acronymes et les abr viations parce que les lecteurs d cran ont des difficult s les interpr ter S il est n cessaire de recourir aux acronymes et aux abr viations viter de les sp cifier au
53. Ils recourent donc aux outils d assistance technologique qui exploitent les canaux sensoriels de l ou e et ou du toucher comme les lecteurs d cran Les lecteurs d cran sont des programmes logiciels qui identifient et interpr tent le texte visualis sur l cran de l ordinateur Dans le cas o ces lecteurs utilisent une synth se vocale le contenu est lu l utilisateur canal auditif Dans le cas o un cran braille est utilis le contenu est rendu l utilisateur en symboles braille se composant en relief sur une barre hardware que l utilisateur touche avec les doigts canal tactile Un utilisateur aveugle peut choisir d utiliser un des deux syst mes ou les deux simultan ment synth se vocale et cran braille selon les circonstances Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Version 1 0 Page 97 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Dans les deux cas les contenus de l cran sont pr sent s l utilisateur de mani re lin aris e c est dire lus ou restitu s en symboles Braille dans l ordre dans lequel ils apparaissent dans le code de la page ind pendamment de la mise en page graphique Tous les lecteurs d cran n ont pas de caract res standards Quelques uns sont en mesure de lire des contenus pr sent s uniquement travers des applications sp cifiques
54. Juillet 2010 Version 1 0 Page 5 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Enfin en se focalisant sur la s paration entre contenus pr sentation et action elles facilitent la satisfaction d autres facteurs de qualit du logiciel comme la portabilit la maintenabilit ou l efficacit Il convient galement de noter que le pr sent document adopte une approche pragmatique bas e sur les objets de programmation et non une approche th orique bas e sur des principes de conception Ceci permet au d veloppeur de trouver toutes les lignes directrices relatives un sujet ou un objet l int rieur d un m me chapitre sans devoir les rechercher parmi les diff rents principes d accessibilit Il est toutefois important de rendre galement explicite le principe auquel ces recommandations font r f rence d s lors pour chaque objet le document pr sentera les lignes directrices du W3C WAI dont les recommandations indiqu es s inspirent De plus lorsque cela est jug n cessaire le document fournit e des exemples d application pratique des recommandations comment crire le code e e type de contr le appliquer pour v rifier l application correcte des recommandations e a mani re d effectuer le contr le e les difficult s du contr le e l indication des objets de la check list d accessibilit mentionn e au chapitre 3 dans laquelle il y a le r sultat du contr
55. Le tag lt BLOCKQUOTE gt est utilis pour identifier un bloc de texte de citation qui requiert une visibilit accrue pour le s parer et le distinguer du corps du texte normal Le code pr sent l int rieur de blockquote doit tre compris dans un autre l ment comme lt p gt Le tag lt Q gt est utilis pour des citations br ves contenues l int rieur d un paragraphe l attribut CITE qui reproduit URI du document source de la citation est utilisable aussi bien par lt BLOCKQUOTE gt que par lt Q gt Les navigateurs visualisent g n ralement le lt BLOCKQUOTE gt comme un bloc de texte indent tandis que le texte pr sent dans le lt Q gt est reproduit l int rieur de guillemets ou dans des styles de citations diff rents dans le contexte de la langue utilis e Exemple de la mani re d organiser les citations lt blockquote cite http www mycom com tolkien twotowers html gt lt p gt They went in single file running like hounds on a strong scent and an eager light was in their eyes Nearly due west the broad swath of the marching Orcs trampeld its ugly slot the sweet grass of Rohan had been bruised and blackened as they passed lt p gt lt blockquote gt John said lt q gt l saw Lucy at lunch she told me lt q gt Mary wants you to get some ice cream on your way home lt q gt think I will get some at Ben and Jerry s on Gloucester Road lt q gt R f rence WCAG 2 0 1 3 1 Type de con
56. R f rence WCAG 2 0 1 3 1 1 3 2 2 4 6 2 4 10 Type de contr le Test automatique Xx valuation humaine paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 6 10 16 Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II1 2 c selon la m thodologie indiqu e dans le Il est possible de d finir le lay out de la page galement au moyen de tableaux M me si elle est tr s utilis e cette pratique n est pas conseill e d une part parce qu il s agit d un usage impropre du tag lt TABLE gt et d autre part parce qu il pr sente des inconv nients e il est tr s difficile de r organiser les zones de la page de mani re diff rente e les lecteurs d cran tendent les interpr ter comme des tableaux de donn es ils lisent dans de nombreuses situations le nombre de lignes et de colonnes e utilisateur qui emploie le lecteur d cran est oblig de sauter ou d couter int gralement de longues listes de liens et de contenus secondaires avant de parvenir aux contenus principaux de la page Au cas o l on choisit quand m me une organisation bas e sur les tableaux il est n cessaire Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Version 1 0 Juillet 2010 Page 36 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMM
57. SS M me si elle est plus lourde quant la conformit de visualisation avec les diff rents navigateurs cette solution garantit une compatibilit accrue et de meilleures possibilit s d entretien mais surtout la nette s paration entre structure et pr sentation qui a t voqu e au paragraphell 1 et qui est n cessaire pour e e respect de la DTD de type Strict e la lisibilit correcte si le CSS est d sactiv comme le font souvent les malvoyants e la possibilit d intervenir globalement sur le graphisme du site de l application en travaillant sur un fichier unique e la garantie de l uniformit de toutes les pages consistance Exemple de la mani re d organiser le layout de page avec les CSS lt head gt lt title gt Stock Market Up Today lt title gt lt head gt lt body gt lt left nav gt lt div class left nav gt lt h1 gt menu lt h1 gt lt content here gt lt div gt EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION lt l main contents gt lt div class main gt lt h1 gt Stock Market up today lt h1 gt lt l article text here gt lt div gt lt right panel gt lt div class link gt lt h2 gt Related links lt h2 gt lt l content here gt lt div gt lt body gt
58. TD Frameset et en respectant les indications suivantes e Eviter de sp cifier les caract ristiques de pr sentation et de style l int rieur de Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 13 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION la page et recourir par contre aux CSS pour obtenir le m me effet graphique e D finir les lignes et les colonnes de subdivision du frameset avec des mesures relatives par exemple 20 80 de mani re permettre le redimensionnement proportionnel de la page e Ins rer l int rieur de lt NOFRAMES gt lt NOFRAMES gt les liens vers les diff rentes pages qui composent le frameset de mani re permettre la navigation individuelle Les liens doivent tre significatifs de mani re faire comprendre clairement l utilisateur quoi ils renvoient et ce que contient le fichier qu ils ouvrent exemple Menu du site et non Frame lat ral e Dans la page frameset e Utiliser l attribut TITLE dans le tag lt FRAMESET gt et dans le tag lt FRAME gt e Utiliser dans la section lt HEAD gt lt HEAD gt le tag lt TITLE gt e Dans les pages ins r es dans le frameset sp cifier le tag lt TITLE gt dans lt HEAD gt lt HEAD gt e Afin d assurer une interaction efficace la description ins r e dans le
59. UNICATION d utiliser seulement les tags lt TABLE gt lt TR gt et lt TD gt et les fermetures aff rentes de ne pas utiliser les tags lt CAPTION gt lt TH gt lt THEAD gt lt TBODY gt et lt TFOOT gt parce que ces tags sont typiques des tableaux de donn es et ex cut s par les lecteurs d cran dans des contextes de lay out ils rendent les contenus propos s incompr hensibles D viter que le lecteur d cran interpr te les tableaux comme des tableaux de donn es et en lise les nombres de lignes et de colonnes De ne pas loger les tableaux les uns dans les autres mais d utiliser un ou plusieurs tableaux pour chaque l ment de la page par exemple un tableau pour l en t te un tableau pour le corps central un tableau pour le pied de page etc De g rer les marges et les espaces avec les CSS ou lt DIV gt et non avec des l ments graphiques des images de s paration ou des imbrications De pr voir des sauts de navigation skip link de fa on ce que l utilisateur puisse sauter les menus et aller directement aux contenus principaux dans le corps central de la page cf paragraphe Il 7 e Exemple de la mani re d organiser le layout de page avec tableaux et CSS lt head gt lt title gt Stock Market Up Today lt title gt lt head gt lt body gt lt l left nav gt lt table gt lt tr gt lt td class left nav gt lt h1 gt menu lt h1 gt lt l content here
60. XHTML e les instructions relatives au code reprises dans les recommandations ont t bien suivies e les pages sont valid es par le validateur du W3C Dans le cas de sites applications d j existants avec des frames et r alis s avec une DTD de type Frameset de XHTML ou de l HTML e les instructions relatives au code reprises dans les recommandations ont t bien suivies e les pages sont valid es par le validateur du W3C Les instructions relatives l internationalisation tablies dans les recommandations dont l insertion correcte des attributs lang dir et charset ont t suivies Le code CSS est valid par le validateur du W3C Notes Mise en page de la page OUI NON N C 6 La page d accueil et les pages internes sont divis es en zones fonctionnelles bien distinctes et ont un contenu clair ex menu de service menu principal contenus principaux et contenus secondaires Le contenu et la fonctionnalit pr sents dans les pages sont identiques lorsqu ils sont visualis s dans les diff rents navigateurs graphiques indiqu s dans les recommandations La pr sentation des pages est identique dans les diff rents navigateurs graphiques Les contenus et les fonctionnalit s des pages sont actifs et utilisables m me lorsque les applets scripts et autres objets de programmation sont inactifs ou qu ils ne peuvent tre support s Si ce n est
61. a Caract ristiques g n rales e ssseseseesssssesesrererererrsrstststsrsttenenenesrstsnnnennnrstsnen et 34 b Taille relative du la Qui inaineniniansnenninnidinenunse 38 c Compatibilit avec les diff rents navigateurs 40 6 Pr sentation des contenus 41 a Organisation des titres ne nn nennnneis 41 D Style r dactionnel sssi a a 43 C Style graphique crea D dan nu 44 T Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION d Num ros et caract res Sp ciaux 46 7 Navigation et Ile s s ss haine 46 a Caract ristiques g n rales esssesesessssssesesrerererestsrstststsrsrtenenenesrstsnsnsnentnrstsnen e 46 b Reconnaissance du context ssriiniasnunensininimionaebitenie 46 c Activation et caract re significatif des liens 46 d Caract re reconnaissable des liens 46 E e and ad Boat 46 t Espaces entte les lens nan 46 8 FORMS rue 46 a Caract ristiques g n rales ss nent 46 b tiquettes labo been tinen ent innibinnte 46 FIELDSET et LEGEND OPTGROUP Mods nain 46 di BOUTON S ceinen eeoa D ul 46 6 MO SSADeS annee modernes 46 f Dur e des S SSIONS admet na nou 46 x CAPI sine en E E a 46 9 Tableaux de donn es ft 46 a Caract ristiques g n rales hisser rnatanndhstdien 46 b Titre des tableaux et des colon
62. ascript L am lioration progressive progressive enhancement fait pr cis ment r f rence cela une am lioration progressive de la page partir des fonctionnalit s de base auxquelles tous peuvent acc der Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 10 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION En plus d une meilleure accessibilit la s paration structure pr sentation action d crite ci dessus offre aussi d autres avantages techniques importants e Compatibilit descendante les pages sont rendues r sistantes dans le temps ce qui limite le risque que les navigateurs et technologies futurs ne soient plus en mesure d interpr ter le code utilis e T l chargement et visualisation des pages plus rapides en r alisant des fichiers de dimensions plus contenues et avec moins de code les d lais de visualisation se r duisent e Meilleur positionnement dans les moteurs de recherche la s paration entre structure contenus et pr sentation fait en sorte que le contenu est la partie la plus consistante dans la taille finale des fichiers cet aspect associ au marquage s mantique du code am liore le positionnement dans les moteurs de recherche e Portabilit un document marqu de mani re opportune peut tre facilement adapt aux dispositifs de navi
63. ateur mais elle peut aussi affecter l impression la synth se vocale et m me la pr sentation graphique sur un PDA ou un portable Du point de vue technique il est conseill de s parer dans des fichiers diff rents la structure et la pr sentation Cette modalit de travail o les CSS sont codifi s sur un fichier part s par du fichier de la structure permet de changer un composant sans influer sur l autre Il est possible par exemple d appliquer la m me modalit de pr sentation de nombreuses pages ou d effectuer des modifications graphiques des textes et des liens changer de couleur ou de dimension du caract re etc sans toucher le lay out de structure Le concept d action repr sent par JavaScript ou d autres objets de programmation se r f re au comportement du site aux effets dynamiques et aux animations que l on entend ins rer dans les diff rentes pages x L action est r alis e travers l adoption de ECMAScript version standard de JavaScript et l utilisation de W3C DOM Comme pour la structure et la pr sentation il convient de codifier l action dans un fichier s par avec l extension js Il est conseill d utiliser des techniques qui permettent de projeter des pages o les fonctionnalit s fondamentales sont utilisables galement sans Javascript De cette mani re le site fonctionne m me dans le cas o la technologie appliqu e par l utilisateur ne supporte pas Jav
64. ation du navigateur mettre toutes les options de navigation sur la page Maintenir dans l ensemble du site de l application la consistance des m canismes et le style de navigation viter les Voie sans issue c est dire les pages sans options de navigation Si le site est tr s complexe ins rer un moteur de recherche d utilisation simple mais efficace Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 47 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION viter l utilisation de l attribut ACCESSKEY car celle ci peut alourdir sensiblement la lecture des contenus par les lecteurs d cran ACCESSKEY peut tre utilis uniquement dans les cas o il y a des utilisateurs quotidiens et pour des fonctions r p titives comme cela peut tre le cas dans l utilisation d application ou de sites intranet Dans ces cas dans le choix de la lettre utiliser comme access key il faut faire attention de ne pas cr er d interf rence avec les raccourcis clavier du navigateur du syst me d exploitation et des outils d assistance technologique Pour le codage des liens du menu le tag pr vu pour les listes non ordonn es lt UL LI gt peut tre utilis condition que le lecteur d cran ne lise pas ces listes avec une redondance excessive L abondance dans la lecture cr e en effet d impo
65. aut e la d sactivation de JavaScript e la navigation sans CSS ou le remplacement des CSS par ceux mis aux points par l utilisateur e la d sactivation des images La connaissance approfondie de la mani re dont travaille un navigateur et dont il peut tre personnalis devient donc importante non seulement pour ceux qui doivent projeter et r aliser les pages mais aussi pour l expert en accessibilit Les navigateurs prendre en consid ration sont indiqu s au paragraphe II 5 c b Outils d assistance technologique Les outils d assistance technologique sont les instruments et les solutions techniques mat rielles et logicielles qui permettent une personne handicap e de surmonter ou de r duire les conditions de d savantage pour acc der aux informations et aux services fournis par les syst mes informatiques Il est donc n cessaire que l expert en accessibilit ait une connaissance approfondie sur la mani re d utiliser ces technologies afin d assurer que les sites applications soient techniquement accessibles galement travers celles ci e Lynx Lynx est un navigateur qui visualise uniquement les contenus textuels des pages Il ne supporte pas la souris les images montrant donc le texte alternatif les vid os audio animations plug in applet java et javascript Il a t ins r dans les outils d assistance technologiques parce qu il est typiquement utilis par des personnes ayant
66. boutons peuvent tre adapt s au contexte s il existe un risque d ambigu t ou pour mieux pr ciser l action du syst me Par exemple dans les pages de param trages de la recherche il est pr f rable d utiliser Rechercher tandis que l on peut utiliser Envoyer dans les pages d envoi des messages Le bouton Annuler ne doit jamais tre utilis Les tailles des boutons doivent permettre de rendre clairement lisible l tiquette qu elles contiennent par exemple en utilisant de mani re appropri e la marge entre l tiquette et les bords du bouton Il faut toujours d finir un bouton par d faut qui doit tre activable au moyen de la touche Enter du clavier Exemple de la mani re de rendre accessible un bouton graphique lt label for recherche class skiplink gt Cherche lt label gt lt input type text id recherche name ric value gt lt input type image class image alt OK src img_arrow_white gif gt Cherche Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION R f rence WCAG 2 0 3 2 5 3 3 2 4 1 1 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et II1 2 c selon la m
67. c t conna tre les sp cificit s des utilisateurs caract ristiques exigences et pr f rences dans leur interaction avec l ordinateur permet de d finir et d impl menter cette flexibilit n cessaire qui garantit la jouissance des produits services r alis s pour ces utilisateurs sp ciaux aussi bien que pour tous les autres types d utilisateurs l Les personnes souffrant de troubles de la vision Les troubles de la vision comprennent deux classes d utilisateurs les malvoyants avec divers niveaux de gravit et les aveugles Cependant les probl mes d acc s l ordinateur sont diff rents dans les deux cas 1 Les malvoyants En g n ral les personnes malvoyantes per oivent le texte et le graphisme de mani re confuse et limit e En r alit comprendre pleinement une telle forme d handicap n est pas simple puisque diff rents facteurs interviennent Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Version 1 0 Page 96 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION e acuit visuelle combien je vois e champ visuel central p riph rique maculaire etc e sensibilit aux couleurs e sensibilit la lumi re e qualit de la vision brouill e d form e etc l interaction entre les diff rents facteurs m ne des tats de perception extr mement subjectifs et diffi
68. ce que l interface ne pr sente pas cette caract ristique par exemple aucune inscription en mouvement n est pr sente sur le site Dans la troisi me section celle des Observations suppl mentaires il est possible d ins rer toutes les indications additionnelles par rapport aux items de la section pr c dente qui peuvent tre utiles au d veloppeur pour mieux comprendre les corrections et les am liorations qu il devra r aliser L valuation sera positive seulement dans le cas o tous les items auront une r ponse positive ou N C 2 Outils d aide l valuation Il existe une vari t d outils que l expert en accessibilit peut utiliser pour d terminer si un site web r pond des crit res de conformit d un site accessible c est dire pour r pondre aux items de la check list En tout tat de cause aucun instrument d valuation isol ne fournit des informations compl tes ou est en mesure d appr hender l ensemble des probl mes relatifs l accessibilit d un produit logiciel Par exemple le service en ligne du W3C pour la validation du code HTML permet de contr ler si le code est crit correctement mais il n est pas en mesure de fournir une valuation ad quate sur tous les d tails et les l ments qui servent la cr ation d un site accessible Il ne fournit pas par exemple de r ponse quant au caract re ad quat de l attribut ALT des images Pour r pondre de fa on ad quat
69. cilement standardisables Donc selon la sp cificit de leur handicap pour interagir avec l ordinateur les malvoyants adoptent diff rentes m thodes et diff rents outils d assistance technologique Dans quelques cas ils utilisent des outils d assistance technologique comme des agrandisseurs d cran souvent combin s des lecteurs d cran synth se vocale Dans d autres cas ils utilisent les fonctions de personnalisation du navigateur ils augmentent la taille de la fonte ils d sactivent les feuilles de style CSS Cascading Style Sheets du navigateur pour en charger d autres avec des agencements personnalis s ils changent les couleurs de la mise en page En r sum les malvoyants ont besoin d une importante flexibilit de l interface afin qu ils puissent l adapter leurs exigences a priori difficilement pr visibles Ces strat gies mettent en vidence l insuffisante utilit des options d agrandissement des caract res que certains d veloppeurs mettent disposition sur les pages web Bien que l attention soit appr ciable et tant donn les nombreuses pr f rences dues aux diff rents d fauts visuels ces options ne satisfont presque jamais les attentes de l utilisateur sp cifique Afin de favoriser ces types d utilisateurs ils impl mentent d autres caract ristiques comme indiqu dans le pr sent Guide Technique 2 Les aveugles Les aveugles ne peuvent pas percevoir les contenus visuels
70. ciles lire l cran Quand il faut les utiliser Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 43 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION elles doivent tre codifi es avec lt EM gt et non avec lt l gt italic comme indiqu au paragraphe I1 2 d Ne pas crire des parties enti res de texte en majuscule parce qu elles sont plus difficiles lire par rapport aux minuscules les majuscules peuvent tre utilis es pour des phrases qui doivent attirer l attention du moment qu elles sont tr s br ves S il faut ins rer du texte cach au b n fice des utilisateurs qui emploient les lecteurs d cran consulter les indications du paragraphe II 3 R f rence WCAG 2 0 2 3 1 2 3 2 3 1 1 3 1 4 3 1 5 3 2 4 4 1 1 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et III 2 c selon la m thodologie indiqu e dans le paragraphe 11 3 Difficult du contr le difficile Objet de la check list d accessibilit 21 22 c Style graphique Pour le param trage graphique des contenus et leur disposition sur la page utiliser les CSS et les organiser de fa on ce qu ils puissent tre lus galement lorsqu ils sont d sactiv s ou qu ils n
71. consiste effectuer par un expert d accessibilit une s rie de navigations sur le site service valuer en suivant une grille de r f rence Cette m thodologie a une double valeur e Il s agit d une m thode efficace et conomique pour certifier le niveau d accessibilit et d utilisabilit d un site nouveau ou existant lorsque l on ne dispose pas d utilisateurs finaux impliquer dans l valuation e C est une m thode qui remplace la v rification avec des utilisateurs afin de certifier Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 78 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION pr ventivement que les utilisateurs peuvent effectivement acc der aux contenus et donc ex cuter les activit s Dans ce qui suit nous pr sentons la check list les outils que l expert utilise pour r pondre aux Page 79 items de la check list et la m thodologie d application 1 Check list d accessibilit Pour faciliter et standardiser le processus d valuation d accessibilit et d utilisabilit d un site web par l expert une check list d accessibilit a t mise au point qui est disponible l annexe 1 Une check list se compose de 53 items qui correspondent 53 contr les travers lesquelles l expert en accessibilit exprime la conformit de l interface avec
72. contenus des formulaires de fa on ce que les utilisateurs ex cutent travers ceux ci des parties compl tes d activit s sans d couper les activit s m me en multiples tapes op rationnelles Organiser la navigation l int rieur des formulaires suivant un ordre de tabulation logique et coh rent Le formulaire doit avoir du sens aussi bien quand il est lu de fa on lin aire par le lecteur d cran que quand il est consult travers la touche de tabulation Si n cessaire utiliser l attribut TABINDEX du tag lt INPUT gt pour donner un ordre de tabulation correct Organiser le flux de l interaction l int rieur du formulaire de fa on verticale du haut vers le bas ou de fa on horizontale de gauche droite ou de droite gauche en fonction du sens de lecteur de la langue utilis e sur la base des contenus qui doivent tre repr sent s dans la page et aussi de la taille et du nombre de champs contr les Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 56 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION viter les listes tr s longues de boutons radio ou de cases cocher maximum 5 boutons radio ou 5 cases cocher et utiliser ventuellement un menu d roulant ou une liste s lection multiple Aligner les boutons radio et les cases cocher de pr f rence verticalement Rappelons que
73. d Ariane est la suivante Vous tes dans page d accueil nom page interm diaire nom page visualis e e les mots pr c dant la page visualis e sont des liens ils fonctionnent comme support pour la navigation en permettant le retour aux pages pr c dentes e e dernier mot en quelque sorte mis en vidence repr sente le titre de la page visualis e Ce mot doit tre r p t comme en t te de la page en utilisant lt H1 gt Maintenir la correspondance entre le texte utilis pour les liens et les titres des pages associ es Le lien de la page visualis e doit tre d sactiv par exemple si l on se trouve sur la page d accueil le lien vers la page d accueil ne doit pas tre actif et mis en vidence d une mani re ou d une autre Exemple de la mani re d organiser le fil d Ariane lt head gt lt title gt Minist re des Finances Services lt title gt lt head gt lt body gt Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION lt l main contents gt lt p gt Vous vous trouvez dans lt a href index htm gt Home lt a gt Services lt p gt lt div class main gt lt h1 gt Services du Minist re lt h1 gt lt l text here gt lt div gt lt body gt R f rence WCAG 2 0 2 4 7 2 4 8 2 4
74. de l administration publique Juillet 2010 Version 1 0 Page 68 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION e ABBR permet de faire dire au lecteur d cran la forme tendue de l abr viation e ROWGROUP et COLGROUP pour associer l en t te des groupes de lignes ou des groupes de colonnes Page 69 e THEAD TBODY TFOOT pour diviser le tableau en sections logiques Exemple de tableau avec en t tes multiples R sum versements titre ins r avec CAPTION Flan Ben Foulen RRRRRR66D541348B Ali Ben Ali BBBBBBO0G54H501T 380 107 557 Dans ce cas quand l utilisateur se trouvera sur la ligne 3 de la colonne 3 le lecteur d cran lira colonne 3 ligne 3 versements en dinars ann es 1991 Flan Ben Foulen 220 Le code de ce tableau est le suivant lt table summary Le tableau contient un r sum des versements par les contribuables pour les ann es 1991 1992 1993 gt lt caption gt R sum versements lt caption gt lt tr gt lt th id label_int1 colspan 2 gt Donn es sur le contribuable lt th gt lt th id label_int2 colspan 3 gt Versements en dinars lt th gt lt tr gt lt tr gt lt th id label_nom gt Nom lt th gt lt th id label_cod gt Code fiscal lt th gt lt th id label_91 axis ann e gt 1991 lt th gt lt th id label_92 axis ann e gt 1992 lt th gt lt th id label_93 axis ann e gt 1993 lt th gt lt tr g
75. des pages internes ou des pages externes au site il faut le rendre avec le choix du texte du lien et non avec des codages graphiques particuliers par exemple Forum pour le lien int rieur et Forum du site du gouvernement pour les liens ext rieurs Il faut viter d utiliser des acronymes abr viations et mots trangers comme texte des liens car il pourrait y avoir des ambigu t s sur la fa on correcte de prononcer les liens pour les utilisateurs qui utilisent des syst mes d input vocal R f rence WCAG 2 0 2 4 4 2 4 9 Type de contr le Test automatique XI valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et III 2 c selon la m thodologie indiqu e dans le paragraphe 11 3 Difficult du contr le moyen Objet de la check list d accessibilit 25 26 d Caract re reconnaissable des liens Tous les liens doivent tre s lectionnables et activables au moyen du clavier des technologies d mulation du clavier ou d autres syst mes de pointage diff rents de la souris Les liens doivent tre rapidement distingu s des autres l ments non s lectionnables travers la seule vision directe sans devoir v rifier leur caract re s lectionnable ou non avec le pointeur de la souris Le meilleur moyen d assurer ce caract re reconnaissable est garanti par l utilisation du style bleu soulign pour des motifs conve
76. dispensables une page web e contenus e marquage s mantique HTML XHTML Pr sentation Il est fondamental que la page soit bien structur e et codifi e en respectant la signification s mantique des marqueurs En d autres termes il est important que les donn es textuelles soient format es selon leur signification structurelle propre e en t te e en t te secondaire e paragraphe e liste num rot e T Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Version 1 0 Juillet 2010 Page 9 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION e liste de d finitions e et autres L utilisation du code HTML ou XHTML sans erreurs sans tags ind sirables produira une page web compl tement portable compr hensible par tous les navigateurs web par les outils technologiques d assistance par les navigateurs textuels par les t l phones portables de nouvelle g n ration etc La pr sentation est d finie par les feuilles de style CSS Cascading Style Sheets Elle repr sente et codifie le style graphique qui est donn au contenu depuis le formatage de la page web jusqu la disposition des objets et des contenus en passant par la typologie et la taille des polices de caract res et par les couleurs utilis es Dans la plupart des cas la pr sentation concerne la mani re dont un document est visualis avec un navig
77. disseur prouvent des difficult s reconna tre une image agrandie et ne r ussissent pas lire de fa on ad quate les ALT S il s av re n cessaire d utiliser les liens graphiques il est important e de rendre vident le caract re s lectionnable de l l ment e d ajouter toujours l attribut ALT du tag lt IMG gt l ALT devrait r p ter le m me texte que l image pour favoriser les utilisateurs qui interagissent avec des syst mes d input vocal il n est pas n cessaire de sp cifier le mot lien parce que cette mise en vidence est donn e par le pointeur de la souris et par le lecteur d cran pour les aveugles Il faut galement avoir l esprit que les liens graphiques tr s petits petites ic nes fl ches et en g n ral les puces sont difficiles s lectionner pour les handicap s moteurs Lorsque les liens sont pr c d s de puces ou quivalents et que l on veut mettre le renvoi galement sur la puce il faut impl menter un lien unique en utilisant de pr f rence les instructions CSS R f rence WCAG 2 0 1 4 1 3 2 4 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et III 2 c selon la m thodologie indiqu e dans le paragraphe 111 3 Difficult du contr le moyen Guide technique d accessibilit pour la cr ation et la refonte des sites Web d
78. e Juillet 2010 Version 1 0 Page 50 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION e D autres outils d assistance technologique permettront selon les cas de visualiser et ou lire Soit le texte des liens Page 51 Soit le texte sp cifi travers le TITLE Soit les deux ce qui cr e de la confusion lorsque le texte du lien et celui du TITLE sont diff rents l un de l autre De plus l attribut TITLE n est pas support par tous les navigateurs et ne peut donc pas tre consid r comme un instrument principal pour communiquer des informations importantes il peut tre utile pour augmenter l expressivit du lien mais ne doit pas tre indispensable sa compr hension Il n y a pas de motif d ajouter le TITLE aux liens en sp cifiant le texte m me du lien Le texte contenu dans le TITLE ne doit pas d passer les 60 caract res Il faut pr ter une grande attention la consistance dans la d nomination des liens Si sur la m me page il y a deux liens qui conduisent la m me page par exemple un lien sur le menu et un lien dans la page de contenu le texte et l ventuel TITLE doivent tre identiques pour les deux liens De fa on analogue il ne peut y avoir de liens avec la m me d nomination qui conduisent des pages diff rentes Dans tous les cas viter de dupliquer les liens si ce n est pas strictement n cessaire Exemple de la mani re d organ
79. e l expert doit recourir d autres outils qui lui permettent de voir l image dans le contexte o elle s ins re et partir de l juger du caract re ad quat de l ALT auquel elle est associ e Le W3C WAI fournit une liste pr cise r guli rement mise jour de ces outils la page Web Accessibility Evaluation Tools http www w3 org WAI ER tools Evaluation Nous illustrerons bri vement ci apr s les principaux outils d aide pour l valuateur a Navigateur Le navigateur joue un r le central pour l accessibilit web Les recommandations du chapitre Il pr voient une conception cross browser c est dire non li e un navigateur sp cifique pour faire face aux diff rentes exigences des utilisateurs Il devient donc important au moment de la v rification de contr ler la page avec diff rents navigateurs graphiques dans les diff rentes versions et dans les diff rents syst mes Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 80 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION op rationnels et dans le cadre de chaque typologie de navigateur de contr ler s il est possible de r aliser avec toutes les personnalisations qui sont d habitude mises en uvre par les utilisateurs valides et handicap s Page 81 e l agrandissement des caract res par d f
80. e rect coords 0 0 30 30 href essais html alt Essais gt lt area shape rect coords 34 34 100 100 href romans html alt Romans gt lt area shape rect coords 55 55 200 20000 href manuels html alt Manuels gt lt map gt lt ul gt lt li gt lt a href essais html gt Essais lt a gt lt li gt lt li gt lt a href romans html gt Romans lt a gt lt li gt lt li gt lt a href manuels html gt Manuels lt a gt lt li gt lt ul gt R f rence WCAG 2 0 1 1 1 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 48 49 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 74 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION 11 Documents non html a PDF L utilisation de documents PDF est tr s r pandue sur le web pour divers besoins Ceci a toutefois cr d importantes barri res pour l accessibilit tant donn que les PDF r alis s de mani re incorrecte ne s int grent pas bien avec les outils d assistance technologique Nous nous r f rons en particulier aux PDF qui proviennent de la num ri
81. e sont pas support s Pour d finir la dimension du texte y compris les tiquettes des champs d input utiliser la taille relative et non la taille fixe en pixels Comme type de police de caract res pr f rer celles sans serif arial verdana tahoma helvetica etc qui sont plus lisibles l cran et utiliser toujours les polices du syst me Pour les applications il est pr f rable d utiliser arial tandis que verdana sera choisi pour les sites uniquement de texte Pour toutes les polices de caract res y compris les tiquettes et les textes des contr les et des champs d dition utiliser la taille relative et non la taille fixe en pixels de fa on ce que les contenus puissent s adapter l interface employ e par l utilisateur sans superposition des objets ou perte d informations de nature rendre incompr hensible le contenu m me en cas de modification des dimensions d agrandissement ou de r duction de la zone de visualisation et ou des caract res par rapport aux valeurs par d faut Pour la dimension standard des polices on peut utiliser les param tres suivants correspondant 13 px 10 pt font size 2 Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 44 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION e 80 ou e 0 8 em ou Page 45 e small Le texte doi
82. e l administration publique Juillet 2010 Page 17 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Exemple de la mani re de sp cifier l attribut DIR au niveau de la page e pour HTML lt html lang fr dir ltr gt e pour XHTML lt html xmins http www w3 org 1999 xhtml xml lang fr lang fr dir Itr R f rence WCAG 2 0 1 3 2 3 1 1 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 4 Si l int rieur de la page il y a des textes sp cifiques crits dans une langue ayant une directionnalit de lecture diff rente de la principale il faut pr ciser la direction du texte pour le visualiser et le lire correctement Dans ce cas la directionnalit du texte peut tre ins r e dans le tag principal ex lt p DIR rtl gt ou lt span DIR rtl gt ou reproduite dans le CSS au moyen de la propri t direction ex p direction rtl Exemple de la mani re de sp cifier l attribut DIR dans le texte lt p gt L expression lt span dir rtl gt sl le slal La d Si lt span gt en arab signifie lt p gt R f rence WCAG 2 0 3 1 2 Type de contr le Test automatique
83. e l administration publique Juillet 2010 Version 1 0 Page 53 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Objet de la check list d accessibilit 18 24 27 28 e Skip link Chaque fois que l utilisateur s lectionne un lien les lecteurs d cran commencent en fait lire la page depuis le d but En fonction de la structure de la page il peut arriver que des s quences r p titives de contenus ou des liens communs toutes les pages soient relus chaque fois Dans ces cas il est toujours n cessaire de fournir des m canismes pour sauter des groupes de liens ou des contenus r p titifs et amener l utilisateur directement la partie des contenus principaux de la page Le saut vers la partie du contenu principale H1 dans le corps principal de la page est possible travers un lien placer au d but de la page avant tout autre contenu Ce lien doit tre rendu invisible mais lisible par les lecteurs d cran en utilisant toutes les instructions CSS suivantes d j indiqu e au paragraphe 2 3 e position absolute e top 10000px e eft 10000px D autres mani res de coder le texte cach y compris l instruction DISPLAY NONE ont pour effet que m me le lecteur d cran ignore ce texte Les textes des skip link doivent tre tr s directs et brefs Par exemple contenus pour le skip link qui renvoie directement aux contenus menu principal pour le li
84. em el et pourrait ne pas tre compris pour qui ne parle pas couramment l anglais Exemple de la mani re de sp cifier l attribut LANG dans le texte lt p gt La Divine Com die de Dante commence de cette fa on lt span lang it gt Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita lt span gt Le grand po te qu il voulait dire lt p gt R f rence WCAG 2 0 3 1 2 Type de contr le Test automatique XI valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et III 2 c selon la m thodologie indiqu e dans le paragraphe 11 3 Difficult du contr le moyen Objet de la check list d accessibilit 22 d Attribut DIR En plus de sp cifier la langue d un document il peut tre n cessaire de sp cifier la directionnalit de base gauche droite ou droite gauche de tout le texte ou d une partie seulement de celui ci Ceci se fait travers l attribut DIR La valeur pr d finie de l attribut DIR est Itr left to right texte de gauche droite Il faut se rappeler que en ins rant l attribut DIR rtl dans l l ment lt HTML gt dans les diff rentes versions d Internet Explorer la barre de d roulement du navigateur se positionne gauche Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web d
85. ement sa destination m me s il est isol du contexte ou du texte qui le pr c de ou le suit 26 I n y a pas de liens portant le m me nom et menant des pages diff rentes 27 Les liens sont reconnaissables la vue sans devoir passer dessus avec la souris et sans l aide de la couleur 28 Au moins pour les liens autres que les menus l tat d j visit est mis en vidence 29 S il y a en d but de page des groupes de liens ou des contenus communs toutes les pages un lien m me cach est pr vu pour sauter directement au contenu principal 30 Dans une liste de liens ces derniers sont loign s les uns des autres tant verticalement qu horizontalement Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Version 1 0 Janvier 2010 Page 91 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION 31 En cas d ouverture de nouvelles fen tres et de pop up dans le navigateur e les instructions relatives au code reprises dans les recommandations ont t bien suivies e utilisateur est averti du changement de cible Notes Formulaires OUI NON N C 32 Chaque champ du formulaire a sa propre tiquette indiquant le contenu codifi e avec lt LABEL for gt 33 En cas
86. en qui renvoie directement au menu principal Exemple e Dans la page x HTML lt body gt lt div class skiplink gt lt a href contenu gt contenus lt a gt lt div gt lt l main contents gt EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 54 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION lt p gt Vous vous trouvez dans lt a href index htm gt Home lt a gt Services lt p gt lt div class main gt lt a id contenu name contenu gt lt a gt Page 55 lt h1 gt Services du Minist re lt h1 gt lt l text here gt lt div gt lt body gt e Dans le code CSS Skiplink position absolute top 10000px left 10000px R f rence WCAG 2 0 2 4 1 Type de contr le Test automatique XI valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 29 f Espaces entre les liens Les liens regroup s dans le sens horizontal et vertical doivent tre opportun ment espac s les uns des autres de mani re permettre aux handicap s moteurs d atteindre ais ment une cible Dans le cas de liens juxtapos s verticaux il est n cessa
87. es et ne pas pr senter des couleurs voisines appartenant aux extr mes oppos s de la gamme de couleurs par exemple bleu et noir Utiliser toujours un contraste fort en termes de luminosit et de couleur entre le fond et le texte en se basant sur l algorithme fourni par la W3C de mani re tre facile distinguer par des personnes ayant diff rents probl mes de perception de la couleur Pour ces motifs il est toujours pr f rable d utiliser le texte sur fond blanc ou de tonalit tr s claire viter d utiliser des fonds lign s marbr s en d grad etc R f rence WCAG 2 0 1 4 1 1 4 3 1 4 6 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 18 19 e Plans Si un plan sensible est utilis pour la navigation ou la pr sentation des liens celui ci doit tre d fini c t client et non c t serveur Il convient de fournir ce type de plans e _unattribut ALT sur l image du plan e un attribut ALT galement sur les zones sensibles liens du plan L ALT doit tre significatif et mesure facilement la compr hension des contenus des pages de mani re ce que l utilisateur puisse clairement comprendre ce qu il trouvera dans les diff rentes
88. et ActiveX la modification de la taille de la fen tre du navigateur le contr le du contraste texte fond au moyen de Color Contrast Analyser d crit dans le paragraphe suivant la visualisation du tag lt IMG gt avec la description relative de l attribut ALT e Color Constrast Analyser C est un outil pour contr ler les combinaisons entre les couleurs de fond et le premier plan afin de v rifier si elles parviennent garantir une bonne visibilit des couleurs II contient galement les fonctionnalit s pour v rifier si la combinaison satisfait ceux qui ont une perception alt r e des couleurs comme les daltoniens LE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 3 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION L outil se base sur les algorithmes qui calculent la diff rence de couleur et la diff rence de luminosit sugg r s par le W3C Il est install en m me temps que la Web Accessibilit Toolbar ou peut tre utilis ind pendamment de celle ci en le t l chargeant du site du Web Accessibility Tools Consortium http www wat c org tools index html Application de la check list Les tapes op rationnelles pour proc der la v rification d accessibilit au moyen de check list sont D Conna tre les th matiques sur l accessibilit et l utilisabilit en r f rence part
89. f sp cifi dans ALT doit avoir une signification quivalente celui transmis travers les images c est dire associ e la fonction exerc e par l objet original dans le contexte sp cifique Le texte explicit travers ALT ne devrait pas d passer les 60 caract res Si l image n est pas significative et ne v hicule donc aucun contenu d information puces graphiques images de remplissage etc elle doit tre g r e comme fond pour le CSS et non ins r e dans la page x HTML S il y a lieu de l ajouter dans la page l ALT doit tre cod de cette mani re ALT L quivalent textuel doit tre fourni galement pour les applets scripts et fichiers audio et vid o travers lesquels les personnes handicap es ne parviennent pas interagir viter d utiliser des images pour la cr ation de lignes ou de barres de s paration et r aliser ces barres au moyen du tag correct lt HR gt Pour les accompagner de donn es graphiques utiliser les CSS Exemple de ALT sur des images d importance diverse e pour des images de faible importance lt img src ligne_d_espace gif alt gt e pour des images d importance moyenne lt img src pomme gif alt pomme golden gt e pour des images significatives link lt img src newsletter gif alt Newsletter gratuite Vous recevrez des recettes des informations et plus encore gt R f rence WCAG 2 0 1 1 1 Type de contr le Test auto
90. gation alternatifs comme les PDA t l phones portables assistants particuliers pour les personnes handicap es Il y a aussi des avantages en termes de co ts et de qualit du produit tels que e Meilleure qualit du code le respect du marquage standard augmente la qualit des produits r alis s e Moindre co t d entretien et de d veloppement utiliser un code bien structur et s mantiquement correct r duit consid rablement les d lais et les co ts de cr ation et d entretien du site e Economie de la bande les fichiers peuvent peser jusqu 50 moins ce qui r duit les d lais de r ponse du serveur avec par cons quent une demande de bande diminu e 2 Code x HTML l HTML est un langage de marquage qui d crit les m canismes de repr sentation structurels s mantiques ou de pr sentation du texte en utilisant des conventions standardis es du domaine public dont la syntaxe est tablie par le W3C Au cours du temps le W3C a reformul HTML selon les standards de l XML d finissant ainsi un nouveau langage de marquage appel XHTML Les r gles d criture d une page XHTML sont contenues dans un ensemble de directives recommandations publi es depuis le 26 janvier 2000 par la W3C http www w3 org TR xhtml1 Dans le pr sent document nous entendons par x HTML indiff remment HTML ou XHTML Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l adminis
91. html1 DTD xhtml1 strict dtd gt e pour DTD Transitional de HTML 4 01 lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd gt e pour DTD Transitional de XHTML 1 0 lt DOCTYPE HTML PUBLIC W3C DTD XHTML 1 0 Transitional EN http www w3 org TR xhtml1 DTD xhtmli transitional dtd gt R f rence WCAG 2 0 4 1 1 Type de contr le x Test automatique valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 1 2 a Frame Les frames sont de vieilles structures x HTML que l on tend ne plus utiliser parce qu ils pr sentent certains inconv nients Il n est pas possible d ajouter un marque page directement la page d int r t sp cifique ils sont indiqu s comme des pages s par es dans les moteurs de recherche l impression du contenu peut tre difficile etc Il est conseill de ne plus utiliser les frames pour la r alisation de nouveaux sites applications Pour les sites applications d j r alis s avec des frames il est conseill de migrer vers la version avec DTD Transitional voir DTD Strict Dans l intervalle pour garantir l accessibilit il est n cessaire de modifier les pages qui contiennent les frames en ins rant la D
92. iculi re aux recommandations du chapitre 2 Identifier une s lection de page la navigation l int rieur du site doit se faire en s lectionnant un chantillon repr sentatif des diff rents types de pages par exemple la page d accueil Toutes les pages auxquelles l utilisateur acc de probablement en naviguant dans le site Toutes les pages qui pr sentent des formulaires et les pages de r ponse aff rentes Effectuer une valuation du code HTML XHTML et CSS en utilisant les outils indiqu s dans le paragraphe 3 2 3 ex cuter au moins un des outils de validation sur les 100 premi res pages du site web S lectionner au moins trois diff rents navigateurs graphiques par exemple Internet Explorer Firefox Opera parmi ceux indiqu s dans le paragraphe 2 5 3 en diff rentes versions install es sur diff rentes plateformes Windows Linux Mac et v rifier que le contenu d information et les fonctionnalit s pr sents sur une page soient les m mes dans les diff rents navigateurs la pr sentation de la page soit semblable dans les diff rents navigateurs le contenu d information et les fonctionnalit s de la page soient encore accessibles en cas de d sactivation du chargement des images en v rifiant si des textes alternatifs sont appropri s les contenus d information de fichiers audio ventuels soient accessibles m me sous forme textuelle Guide technique d accessibilit
93. idth 40 R f rence WCAG 2 0 1 3 1 1 4 4 1 4 5 1 4 8 Type de contr le Test automatique T Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION XI valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 a et 1I1 2 c selon la m thodologie indiqu e dans le paragraphe 111 3 Difficult du contr le facile Page 40 Objet de la check list d accessibilit 12 c Compatibilit avec les diff rents navigateurs Les pages doivent tre r alis es de mani re tre compatibles avec les navigateurs les plus utilis s dans les diff rents syst mes d exploitation On entend par compatibilit que e les contenus et fonctionnalit s soient les m mes avec tous les navigateurs graphiques e a pr sentation graphique soit semblable dans les diff rents navigateurs graphiques Les navigateurs prendre en consid ration sont les suivants e Windows Internet Explorer Opera Firefox Google Chrome e MacOSX Firefox Safari e Linux Konqueror Firefox La compatibilit doit tre garantie galement avec les versions de navigateurs en usage au moins deux ans avant la publication de la page web Il convient aussi de tenir compte de Lynx un navigate
94. ifi par lt H1 gt la fonction des diff rents groupes de liens ou zones de la page Ce H1 peut tre rendu invisible sur la page gr ce aux instructions de style mais lisible par les lecteurs d cran Pour les pr cautions appliquer pour les textes cach s voir le paragraphe 11 3 La description des zones doit avoir un caract re fonctionnel et ne pas utiliser de r f rences spatiales par exemple en t te ou des termes techniques par exemple menu de m tanavigation D Utiliser menu de service pour la zone qui contient des liens vers des services telle que Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION plan recherche guide contacts etc typiquement plac s en t te de page e Utiliser menu principal pour la zone qui regroupe le menu principal du site application typiquement plac gauche Page 35 e la partie du contenu est d crite avec le titre appropri selon ce qui est sugg r au paragraphe II 6 a Attention ne pas d couper le contenu de la page en un nombre important de zones chacune codifi e par un texte cach car il pourrait n y avoir aucun avantage pour l utilisateur qui utilise le lecteur d cran vu la redondance des contenus Le codage du lay out de page doit tre fait de pr f rence par lt DIV gt et C
95. ire de param trer un espace interligne ad quat EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Dans le cas de liens juxtapos s horizontalement une mani re de bien rendre cette s paration consiste ins rer un tiret ou des barrettes verticales comme dans l exemple suivant Exemple pour liens adjacents horizontalement Une mani re de bien rendre cette s paration consiste ins rer un tiret ou des barrettes verticales comme dans l exemple ci apr s Entr e de menu 1 Entr e de menu 2 R f rence WCAG 2 0 1 4 8 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe 1I1 2 a selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 30 8 Formulaires a Caract ristiques g n rales Organiser les formulaires en tenant compte des activit s des utilisateurs Pr voir le nombre la fonction l ordre de pr sentation et l organisation interne des formulaires en rapport avec le flux de travail de l utilisateur et les informations qu il traite aux diff rentes tapes de l activit Utiliser une unit de travail appropri e Il est opportun d organiser les
96. iser le skip link Le congr s Informatique et personnes handicap es s est tenu Tunis continuer gt gt Le congr s Informatique et personnes handicap es s est tenu Tunis Le congr s Informatique et personnes handicap es s est tenu Tunis Dans ces trois cas le premier lien n a pas de sens s il est lu hors du contexte de la phrase le deuxi me lien pourrait tre trop abondant le troisi me lien v hicule l information de fa on appropri e m me s il est lu s par ment du reste de la phrase Pour vous inscrire cliquez ici a du sens s il est lu dans la phrase enti re mais perd sa signification si on lit ou sion coute seulement cliquez ici Le m me pour Suivant Approfondissement etc Dans les liens du courrier lectronique il faut viter d crire uniquement le nom du destinataire du message lectronique par exemple Flen Ben Foulen Service d assistance car on pourrait tre amen penser qu il s agisse d une page reli e et non d un syst me pour envoyer un message Il vaut mieux crire Envoyer un courriel au service d assistance ou expliciter directement l adresse lectronique par exemple assistance administration tn Lorsque c est n cessaire utiliser les liens pour le retour la page pr c dente et l avance la page suivante viter d utiliser des termes g n riques comme Pr c dent et Suivant car ils ne sont pas significatifs s
97. l 2 b selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit chapitre Observations additionnelles 7 Navigation et liens a Caract ristiques g n rales Il faut organiser la navigation sur la base des caract ristiques des actions que les utilisateurs devront effectuer en interaction avec le site l application Compte tenu des limites des pages web visualisation d une page la fois on tend souvent reproduire une logique de navigation qui donne l utilisateur l opportunit de faire seulement un choix par page Un bon regroupement des liens disponibles dans des zones d di es de l cran permet d viter du moins en partie ces limitations en rendant l interaction davantage flexible Il y a lieu de r duire le plus possible le nombre de pages consulter pour arriver l objectif de l activit L utilisateur devrait pouvoir acc der l information qui l int resse en naviguant au maximum travers trois pages Permettre le retour la page d accueil et l acc s aux fonctionnalit s du service aide en ligne moteur de recherche plan fonction de d connexion etc partir de chaque page du site de l application Cr er un ordre logique de navigation par la touche de tabulation du clavier entre les liens en utilisant si n cessaire l attribut TABINDEX viter que l utilisateur se fie aux instruments de navig
98. l ne faut pas utiliser les signes sup rieur gt et inf rieur lt car ils sont interpr t s de fa on litt rale par les lecteurs d cran Il faut pr f rer un tiret les deux points ou les barrettes verticales N utiliser le caract re majuscule que pour la premi re lettre du premier mot des titres des pages par exemple Param trage de la recherche au lieu de Param trage de la Recherche sauf s il s agit d un acronyme ou d un nom propre Ne pas utiliser les verbes l infinitif par exemple Param trage de la recherche plut t que Param trer la recherche Exemple de la mani re d organiser le titre HTML et les titres lt H gt lt head gt lt title gt Minist re des Finances Services lt title gt lt head gt lt body gt lt main contents gt lt div class main gt lt h1 gt Services du Minist re lt h1 gt lt text here gt lt div gt lt body gt R f rence WCAG 2 0 1 3 1 2 4 1 2 4 2 2 4 6 2 4 10 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et III 2 c selon la m thodologie indiqu e dans le paragraphe 111 3 Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 42 LA REPUBLIQUE TUNISIENNE M
99. la souris quitte un champ par exemple avec les fonctions Onchange et OnSelect de la souris n est pas consentie afin d assurer l accessibilit Tous les formulaires doivent donc avoir au moins un bouton Placer les boutons d action au bas du formulaire ou pr s des contr les pour lesquels une confirmation de l utilisateur est requise Les boutons doivent tre des boutons standard de Windows Il est fortement d conseill d utiliser des boutons graphiques cod s en tant que liens car les utilisateurs de lecteurs d cran ne parviennent pas les distinguer des liens de navigation normaux et les activer sans les avoir atteints avec le tabulateur Lorsqu il est n cessaire d avoir un bouton l aspect graphique diff rent du bouton standard utiliser les CSS pour en modifier l apparence esth tique Les r gles pour l intitul des boutons sont les suivantes e OK accepte les changements effectu s et active la transaction utiliser par exemple dans le formulaire d identification de l utilisateur Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 61 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION e R tablir r tablit les valeurs et param tres par d faut e Nettoyer supprime les donn es ins r es par l utilisateur Page 62 e Imprimer pour imprimer une page Les
100. les crit res de diff renciation indiqu s au paragraphe I1 10 d Comme cela a d j t dit au paragraphe 11 8 d il est fortement d conseill d utiliser des boutons graphiques car les utilisateurs de lecteurs d cran ne parviennent pas les distinguer des liens de navigation normaux et les activer sans les avoir atteints avec le tabulateur Lorsqu il est n cessaire d avoir un bouton l aspect graphique diff rent du bouton standard utiliser les CSS pour en modifier l apparence esth tique Comme indiqu au paragraphe Il 5 b il faut pr ter une attention particuli re l impact des images photos titres de pages etc sur la possibilit de r gler les dimensions de la page et de l adapter l interface utilis e par les utilisateurs Ne pas pr senter des objets clignotants ou en mouvement dont les fr quences d intermittence peuvent provoquer des troubles d pilepsie photosensible des troubles de la concentration ou qui peuvent causer le mauvais fonctionnement des outils d assistance technologique Cf Paragraphe 1 6 b b ALT Il convient de fournir toujours un quivalent textuel pour chaque l ment non textuel travers l attribut ALT du tag lt IMG gt LE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 70 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Le texte alternati
101. lt TITLE gt doit tre significative Exemple de frame accessible Pour rendre accessibles les pages web avec frame il est n cessaire de sp cifier des lt TITLE gt significatifs et la taille relative des colonnes du frameset e Frameset lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Frameset EN http www w3 org TR html4 frameset dtd gt lt HEAD gt lt TITLE gt Accessibilit des frame lt TITLE gt lt HEAD gt lt FRAMESET TITLE Menu de la page des nouveaut s du site du D partement des politiques fiscales cols 23 gt lt FRAME TITLE Aire menu du site SRC frame02a htm gt lt FRAME TITLE Aire nouveaut s du site SRC frame02b htm gt lt NOFRAMES gt lt a HREF frame02a htm gt Menu du site du D partement des politiques fiscales lt a gt lt BR gt lt BR gt lt a HREF frame02b htm gt Page des nouveaut s du site du D partement des politiques fiscales lt a gt lt NOFRAMES gt lt FRAMESET gt e File frame02a htm Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 14 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN http www w3 org TR html4 strict dtd gt lt HTML gt lt HEAD gt lt TITLE gt Menu du site du D partement des politiques fiscales lt TITLE gt lt HEAD gt lt BODY gt l
102. lvoyants travaillent avec des r solutions tr s basses et donc la barre de d filement horizontal e ne doit pas appara tre des r solutions sup rieures 600 px de largeur e devrait appara tre de pr f rence des r solutions comprises entre 480 px et 600 px de EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 38 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION largeur e peut appara tre des r solutions inf rieures 480 px de largeur EN 5 Page 39 Pour cette raison comme cela est d ailleurs indiqu au paragraphe 11 10 a il convient de faire attention au graphisme par exemple les grandes images plac es dans les en t tes des pages qui emp che de modifier les dimensions de la page et entra ne l apparition des barres de d filement horizontal Il faut aussi faire attention aux pages qui doivent tre imprim es dans certaines situations il peut y avoir des coupures aux parties du contenu La largeur d une feuille A4 correspond en effet environ 525 px Exemple de la mani re de rendre un layout adaptable la r solution de l cran e Dans la page x HTML lt div id wrap gt lt div id main gt lt div gt lt div id sidebar gt lt div gt lt div gt e Dans le code CSS main float left width 60 sidebar float right w
103. matique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 46 47 51 c LONGDESC Pour les contenus complexes tels que graphiques applets l o le texte avec l attribut ALT peut appara tre insuffisante on peut fournir une description additionnelle en utilisant l attribut LONGDESC qui propose un lien un fichier HTML o une description plus d taill e de l objet peut EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 71 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION tre ins r e Cependant dans la mesure o LONGDESC n est pas encore support l heure actuelle par tous les navigateurs il doit tre accompagn d un lien explicite vers le fichier HTML qui comprend la Page 72 description de l objet En tous les cas compte tenu de la disponibilit d espace sur la page il est conseill de mettre les contenus du fichier descriptif directement sur la page sans renvoyer ceux ci travers un lien Exemple de la mani re de r gler LONGDESC lt p gt lt img src statistique gif alt statistique de la population longdesc statistique_population html gt lt p gt
104. ments qui v hiculent de l information ou qui requi rent des actions de la part de l utilisateur sont ind pendants du p riph rique d entr e utilis souris clavier etc Notes Mise jour automatique ou r acheminement de la page OUI NON N C 53 En cas de mise jour automatique ou de r acheminement refresh ou redirect de la page d fini dans la section lt HEAD gt de l XHTML ou r alis s en Javascript e les instructions relatives au code reprises dans les recommandations ont t bien suivies e en cas d actualisation l utilisateur est averti de mani re vidente et explicite Notes Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Page 94 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Page 95 ANNEXE 2 Les handicaps prendre en compte lors du d veloppement des sites web Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Version 1 0 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Il existe une grande litt rature sur la mani re dont les personnes saines interagissent avec les technologies informatiques Celle ci est rationalis e et d sormais consolid e en un ensemble de principes qui repr
105. nes 46 En t tes m ltiple Sessien e nateaenvianiteheini 46 107 Graphisme in nous 46 a Caract ristiques g n rales ssssssmasssannmensenrniendianeintaitei 46 b ALT rre e E E A A ER 46 LONCRESC nine E a A 46 d Couleurs et ONMITASIRS dune 46 T Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 3 11 C 4 2 a b C 3 D LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Plansee e A E E 46 Documents non him snbensie 46 AD E E E E E EAT EE EE DE 46 Flashi E E EEA E E 46 Fichiers AUDIO VID O en ee tte 46 v rification d accessibilit bas e sur la check list 46 Check list d accessibilit 46 Outils d aide l vallation ssssssss anima niiadisiii 46 D S USE M I 0 46 Outils d assistance t cAnolOGIQUe dasnsossannbintionpsenennsiesuiq 46 Outils d valuation automatique du code 46 Application de la check list 0osensnsssessssssrerersresesrsrsrsssssrsrenenerenrsrsrsrsrenrsrsrsrsns 46 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 4 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION _ Mode d emploi du pr sent guide technique Le pr sent document contient les lignes directrices non seulement
106. nes souffrant de troubles cognitifs utilisent des aides et des outils d assistance technologique qui permettent de proc der des actions tr s imm diates et instinctives comme l cran tactile ou des claviers simplifi s V Les personnes ayant un handicap culturel Font partie de cette cat gorie les personnes g es les personnes ayant de faibles comp tences informatiques les personnes ayant une scolarisation inad quate les trangers et les migrants qui ne connaissent pas bien la langue du pays d accueil On peut comparer leurs exigences par certains aspects ceux de certains types d handicap s et elles se concentrent sur e la simplification du langage A s Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Version 1 0 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION e la simplification et la consistance homog n it de la mise en page e a simplification de la s quence d interaction nombre d tapes pour accomplir une action nombre de clics pour arriver la page d sir e etc e l utilisation d ic nes et d images explicatives Page 103 e l absence de textes et d objets en mouvement e l ind pendance du p riph rique d entr e pe Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Version 1 0
107. nes zones du site jusqu au renouvellement de la conception du lay out de page Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 ANNEXE 1 Check list d accessibilit LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION l Introduction Ce document reprend les r sultats du contr le d accessibilit ou la correspondance du site de l application avec les recommandations reprises dans le chapitre 2 du Guide Technique Nom du site de l application Page 88 Adresse internet http Contr le effectu le Usage interne l administration Intranet externe l administration citoyens professionnels autres administrations etc Indiquer les instruments et les technologies utilis s pour effectuer le contr le Nom Version ll Contr les d accessibilit Code HTML ou XHTML et CSS OUI NON N C 1 Dans le cas de sites applications r alis s avec une DTD de type Strict de l HTML ou de l XHTML les pages sont valid es par le validateur du W3C T Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Version 1 0 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Dans le cas de sites applications r alis s avec une DTD de type Transitional de HTML ou de
108. nternet nouveaux et plus modernes feront leur apparition sur le march Lors de la r daction des recommandations il a t tenu compte des l gislations directives normes et lignes directrices suivantes e ISO 9241 Exigences ergonomiques pour travail de bureau avec terminaux crans de visualisation TEV e Web Accessibility Initiative WAI http www w3 org WAI e Web Content Accessibility Guidelines 1 0 et 2 0 http www w3 org TR WCAG10 LE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 7 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION http www w3 org TR WCAG20 e W3C Internationalization 118n Activity http www w3 org International e R f rentiel G n ral d Accessibilit pour les Administrations http www references modernisation gouv fr rgaa accessibilite e Guide Accessi Web http www accessiweb org fr guide_accessiweb index html e Guide BrailleNet l usage des webmestres http www braillenet org accessibilite guide e Section 508 des tats Unis http www section508 gov e D cret du Minist re de l innovation et des technologies du 8 juillet 2005 sur les conditions techniques et les diff rents niveaux d accessibilit aux outils informatiques http www pubbliaccesso gov it normative DM080705 htm e Jacob Nielsen s Usability Heuristics http
109. ntionnels en exploitant le style standard du tag lt A gt Les autres alternatives possibles du style pr sentent les probl mes suivants e la couleur perd son efficacit en cas de d fauts de la perception de la couleur e e gras ne peut pas tre utilis pour mettre en vidence des parties du texte normal car il pourrait y avoir ambigu t Le lien d j visit doit tre rendu vident en utilisant par exemple le violet soulign Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION conventionnel Il peut tre utile de sp cifier galement le hover du lien surtout si l effet est visible quand le focus se trouve sur le lien en utilisant le clavier et non uniquement au passage de la souris l int rieur d un m me site application les liens devraient tre pr sent s toujours dans le m me style graphique Jusqu trois styles diff rents au maximum sont tol r s par exemple un pour le menu principal un autre pour le menu de service et un pour les liens dans la partie du contenu du moment que leur caract re s lectionnable soit visible l il nu par rapport aux autres l ments de la page Pr f rer les liens textuels par rapport aux liens graphiques c est dire ceux r alis s au moyen d images car les malvoyants qui utilisent un agran
110. ntr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 3 2 2 et 3 2 4 selon la m thodologie indiqu e dans le paragraphe 3 3 Difficult du contr le moyen Objet de la check list d accessibilit 32 35 c FIELDSET et LEGEND OPTGROUP Il peut s av rer utile de regrouper les contr les l int rieur de cellules semblables au group box des interfaces client serveur Avec x HTML le m me effet est obtenu avec les tag lt FIELDSET gt et lt LEGEND gt En effectuant ce choix il est n cessaire de tenir compte du fait que dans certaines conditions les lecteurs d cran lisent le texte l int rieur de lt LEGEND gt avec l tiquette du champ Dans l exemple qui suit le lecteur d cran lit donn es personnelles nom dition donn es personnelles pr nom dition formation titre d tude case cocher formation mention dition Le lt FIELDSET gt doit donc tre utilis quand il est effectivement utile pour regrouper des champs et des contr les qui font partie d une m me cat gorie et qui lus s par ment peuvent appara tre ambigus Il ne faut pas utiliser le lt FIELDSET gt pour cr er des effets de formatage de la page car outre qu il Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page
111. o 18 est le nombre de lettres entre le i et le Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 15 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION n dans le mot anglais internationalization Les trois attributs de l x HTML qui permettent l internationalisation sont mas mn Page 16 e LANG language qui identifie la langue du texte e DIR direction pour la directionnalit du texte e CHARSET character set pour le codage des caract res Ces trois attributs sont particuli rement importants quand il faut d velopper un site multilingue En particulier l attribut DIR non utilis dans les sites qui utilisent des langues crites de gauche droite est par contre obligatoire pour les sites en langue arabe ou dans d autres langues crites de droite gauche c Attribut LANG Imm diatement apr s avoir d fini la DTD avec l l ment lt DOCTYPE gt il faut toujours sp cifier la langue principale de la page travers l attribut LANG de l l ment lt HTML gt Ceci permet aux lecteurs d cran les plus r cents de r gler automatiquement le synth tiseur vocal sur la langue dans laquelle est crit le document vitant l utilisateur de devoir effectuer la man uvre demand e Exemple de la mani re de sp cifier l attribut LANG au niveau de la page e
112. onner une vision d ensemble de la page web en d finissant la structure du document Si les textes des titres sont clairs et compr hensibles leur lecture sera ais e et rapide les non voyants pourront se d placer rapidement parmi les contenus de la page Le titre principal de la page doit tre codifi avec lt H1 gt lt H2 gt pour les titres de deuxi me niveau lt H3 gt pour les titres de troisi me niveau etc jusqu lt H6 gt Il ne faut jamais utiliser les tags lt H1 gt lt H6 gt dans un but purement d coratif par exemple uniquement pour agrandir la taille du texte La caract risation graphique de chaque type de titre format couleur grandeur ventuelle indentation espacement etc doit se faire via les CSS Pour un approfondissement sur la mani re de structurer les titres l int rieur d une page web nous renvoyons aux paragraphes IL 5 Il 6 a et 11 7 a Exemple de la mani re d organiser les titres lt H1 gt lt H6 gt lt head gt lt title gt Cooking lt title gt lt head gt lt body gt lt h1 gt Cooking techniques lt h1 gt Some text here lt h2 gt Cooking with oil lt h2 gt text of the section lt h3 gt Saut eing lt h3 gt lt h3 gt Deep frying lt h3 gt lt h2 gt Cooking with butter lt h2 gt text of the section lt body gt R f rence WCAG 2 0 1 3 1 2 4 1 2 4 6 2 4 10 Type de contr le LE Guide technique d accessibilit
113. pace ror next page Arrow keys Up and Down to move Right to follow a link Left to go back Help Options P rint Go Main screen Quit search delete l history list x xx xx xx x Figure 2 Page d accueil de www infocom tn visualis e avec Lynx Afin de contr ler l ordinateur les aveugles utilisent uniquement le clavier comme p riph rique d entr e ll Les personnes souffrant de troubles de l audition Les personnes souffrant de troubles partiels ou complets de l ou e n ont pas besoin des outils d assistance technologique et privil gient la souris Les difficult s que rencontrent ces personnes dans l utilisation de l ordinateur s articulent en premier lieu autour de deux aspects e les contenus de type audio qu ils ne peuvent pas compl tement percevoir e les contenus textuels qui dans certains cas peuvent tre difficilement compr hensibles En ce qui concerne le premier aspect l emploi grandissant de pr sentations multim dia les fichiers audio et vid o dont la partie audio est essentielle font que les personnes sourdes soient compl tement exclues du contenu informatif Afin d viter de telles exclusions il faut toujours fournir une alternative textuelle ou visuelle des contenus audio Dans le cas d une vid o dans laquelle un pr sentateur parle les alternatives possibles sont le texte ou les sous titres de la vid o dans le cas d une alarme sonore les alternatives sont un message
114. pages avant m me d y acc der Par exemple si le plan est celui de la ville de Tunis et les zones sensibles sont les quartiers e un ALT doit tre plac sur l image de Tunis comme par exemple Liste des arrondissements de Tunis et non cliquez sur un arrondissement qui est plus vague e toutes les zones sensibles doivent avoir un ALT comportant le nom des diff rents Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 73 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION arrondissements Il faut tenir compte du fait que lorsque les images sont d sactiv es par les utilisateurs comme le font souvent les malvoyants en raison de leur difficult lire les images dont ils ne peuvent r gler la taille le plan deviendrait totalement inaccessible Donc sur la m me page que le plan il faut fournir la liste textuelle des liens accessibles travers les zones sensibles concr tement les liens doivent tre d doubl s Si pour quelque motif que ce soit il est indispensable d utiliser un plan c t serveur il est cependant n cessaire de pr senter la liste textuelle des liens activables travers le plan Exemple de carte avec liens dupliqu s sur la m me page lt img src Librairie gif usemap map1 alt Secteurs de la librairie gt lt map id map1 name map1 gt lt area shap
115. pas possible ces m mes contenus et ces m mes fonctionnalit s sont fournis de mani re quivalente 10 Dans le cas o seules les CSS sont utilis es pour la mise en page en les d sactivant les contenus sont pr sent s dans le bon ordre et la page est compr hensible et fonctionnelle Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique B Version 1 0 Janvier 2010 Page 89 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION 11 Dans le cas o les tableaux sont utilis s m me en association avec les CSS pour la mise en page e les instructions relatives aux tableaux de mise en page reprises dans les recommandations ont t bien suivies e en excluant tant les CSS que les tableaux de mise en page les contenus sont pr sent s dans le bon ordre la page est compr hensible et fonctionnelle 12 Dans les diff rents navigateurs graphiques en variant la r solution la mise en page e est relative e ne comporte pas de superpositions de contenu e ne fait pas appara tre la barre de d filement horizontale en r solution 800x600 13 La taille des fontes par d faut e est exprim e de mani re relative et correspond aux instructions des recommandations e enla variant travers des commandes disponibles dans les diff rents navigateurs les contenus des pages ne se superposent pas
116. pas utiliser de meta pour le rafraichissement au bout de x secondes lt meta http equiv refresh content 300 gt e Ne pas utiliser de meta pour le redirection au bout de x secondes de la page test html lt meta http equiv refresh content 300 url test html gt R f rence WCAG 2 0 2 2 1 2 2 2 2 2 3 2 2 4 3 2 5 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe IIl 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 53 3 CSS Cascading Style Sheets Comme nous l avons d j indiqu dans le paragraphe ll 1 les CSS Cascading Style Sheets permettent de d finir la pr sentation graphique type de caract re couleur fond et espacement d un texte appliquer aux documents x HTML Les instructions de style doivent tre mises dans un fichier css ext rieur au fichier html et non m lang es aux contenus x HTML non seulement aux fins de l accessibilit mais aussi pour un entretien plus simple du site Les navigateurs laborent les CSS en ex cutant les instructions en s quence en cascade e User agent CSS feuille de style propri taire du navigateur EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1
117. pour HTML lt html lang fr gt e pour XHTML lt html xmlns http www w3 0rg 1999 xhtml xml lang fr lang fr R f rence WCAG 2 0 3 1 1 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe IIl 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 4 Si l int rieur de la page il y a des textes d une certaine longueur phrases de plusieurs lignes Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION crits dans une langue diff rente de la langue principale il peut tre utile de sp cifier la langue avec laquelle le lecteur d cran doit lire ce texte sp cifique L attribut utiliser LANG doit tre ins r dans le tag principal Il ne faut pas utiliser le changement de langue pour des mots individuels des mots trangers entr s dans la langue courante ou des acronymes parce que e e lecteur d cran interrompt la lecture pour charger le nouveau vocabulaire ce qui rend le texte peu compr hensible e certains mots peuvent ne pas tre reconnus s ils sont lus dans la langue originale par exemple HTML serait lu eytch tii
118. pr sent document est compos de deux parties e e chapitre 2 contient les recommandations techniques pour la r alisation d interfaces utilisables et accessibles e e chapitre 3 contient une m thodologie visant valuer le respect des recommandations indiqu es dans le chapitre 2 Les recommandations d accessibilit et d utilisabilit contenues au chapitre 2 se basent sur la l gislation et les directives internationales et nationales WCAG 1 0 WCAG 2 0 ISO 9241 R f rentiel G n ral d Accessibilit pour les Administrations tunisiennes les meilleures pratiques du secteur la litt rature sp cialis e et les nouvelles tendances dans le secteur web L laboration de ces recommandations a tenu compte de certains crit res importants D une part elles repr sentent la synth se des meilleures pratiques et recommandations indiqu es dans la litt rature et d rivant de l exp rience pratique elles englobent et d passent les sp cificit s des directives consid r es individuellement D autre part tout en garantissant l accessibilit technique ces recommandations visent de fa on explicite rendre r ellement accessibles les informations et services mis la disposition des citoyens ind pendamment de leurs sp cificit s physiques des pr f rences et des instruments utilis s pour interagir avec le web Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique
119. r alis au niveau du code pour qu un site service web soit e accessible et utilisable selon les d finitions du Cahier des Charges Type e ind pendant de l instrument sp cifique d interaction employ par l utilisateur et donc compatible avec toutes les technologies et notamment celles d assistance utilis es par les personnes handicap es comme indiqu au Cahier des Charges Type e conforme aux principes d utilisabilit et d accessibilit indiqu s par la litt rature sp cialis e Ces recommandations sont r dig es en suivant les diff rentes directives nationales et selon les meilleures pratiques existantes au niveau national et international Elles ont t r unies en consid rant certains aspects fondamentaux e elles d passent les sp cificit s individuelles de chaque directive en les englobant toutes e elles pr voient et garantissent l accessibilit technique et en m me temps ces recommandations visent de fa on explicite une exploitabilit r elle des informations et des services mis la disposition des citoyens ind pendamment de leurs particularit s physiques des pr f rences et des instruments utilis s pour interagir avec le web qu il s agisse d instruments communs ou d outils d assistance technologique e les sites et les services web d velopp s selon les pr sentes recommandations continueront fonctionner quand les navigateurs traditionnels volueront et que des dispositifs d acc s i
120. rger le plugin pour les utilisateurs qui ne le poss dent pas Exemple de lien vid o r alis avec Flash lt a href colloque swf gt Colloque l h tel Excelsior vid o au format flash lt a gt lt a href colloque html gt Compte rendu textuel du colloque l h tel Excelsior lt a gt R f rence WCAG 2 0 4 1 2 Type de contr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et IIl1 2 c selon la m thodologie indiqu e dans le paragraphe 11 3 Difficult du contr le difficile Objet de la check list d accessibilit 46 50 52 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 76 MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION LA REPUBLIQUE TUNISIENNE c Fichiers audio vid o Rendre accessibles de fa on compl te les contenus d un film ou d une pr sentation multim dia peut tre difficile partir du moment o la communication audio vid o fait appel des sens qui Page 77 sont d ficitaires chez les personnes handicap es de la vue et de l ou e La d cision sur le type d intervention afin de rendre ces contenus accessibles d pend e De la typologie du contenu d information e De l importance du contenu d information e Des difficult s de r alisation
121. ription ou aussi reproduire des dialogues du type interlocuteur phrase Exemple de la mani re de r gler les diff rents types de listes lt ol gt lt li gt Mix eggs and milk in a bowl lt li gt lt li gt Add salt and pepper lt li gt lt ol gt lt ul gt lt li gt Milk lt li gt lt li gt Eggs lt li gt lt li gt Butter lt li gt lt ul gt lt dl gt lt dt gt blink lt dt gt lt dd gt turn on and off between 5 and 3 times per second lt dd gt lt dl gt R f rence WCAG 2 0 1 3 1 Type de contr le Test automatique x valuation humaine paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 17 Proc dure de contr le utiliser les outils indiqu s dans le paragraphe IIl 2 c selon la m thodologie indiqu e dans le T Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Version 1 0 Juillet 2010 Page 23 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Citations Les citations doivent tre marqu es en utilisant les tags lt Q gt et lt BLOCKQUOTE gt qui ne doivent pas tre utilis s pour des effets esth tiques mais pour fournir au navigateur et aux outils d assistance technologique les informations n cessaires pour identifier le bloc de citation en laissant au CSS les ventuels effets d indentation des textes
122. rtantes difficult s de compr hension quand e les objets de la liste sont compos s de peu de mots e l objet est vis par d autres tags est aussi un lien e _ilya deslistes l int rieur d autres listes Comme indiqu au paragraphe Il 5 a il est utile de d crire avec un titre codifi en utilisant le lt H1 gt et la fonction des diff rents groupes de liens travers un texte ventuellement cach ou m me invisible sur la page gr ce aux instructions de style mais lisible par les lecteurs d cran viter l ouverture de pop up et de nouvelles fen tres du navigateur par rapport celle o le site l application est visualis Si ce n est pas possible voir les indications fournies au paragraphe Il 4 c Si un plan graphique est utilis pour la navigation ou la pr sentation des liens celui ci doit tre d fini c t client et non c t serveur Afin de garantir l accessibilit des plans se r f rer aux indications fournies au paragraphe Il 10 e b Reconnaissance du contexte Mettre absolument en vidence le contexte dans lequel se trouve l utilisateur la suite des s lections effectu es Il convient d s lors de toujours pr senter et rendre vidents e le tag lt TITLE gt du fichier x HTML et le titre lt H1 gt de la page e le lien s lectionn e si possible la position de la page par rapport la structure globale du site de application Pour ce dernier aspect on peut utili
123. s recommandations Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Page 92 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION 44 Dans les tableaux de donn es le lecteur d cran associe les contenus de chaque cellule de donn es de mani re compr hensible leurs ent tes respectives et en particulier e a premi re cellule de chaque colonne est codifi e avec le tag de titre lt TH gt e a premi re colonne du tableau renferme les donn es significatives pour la compr hensibilit des autres cellules e il n y a pas de colonnes ou de lignes vides d espacement 45 Pour les tableaux de donn es qui ont au moins deux niveaux logiques d ent tes tableaux complexes en plus de ce qui est pr vu dans les articles pr c dents il faut aussi utiliser les bons attributs afin d associer les cellules d ent te aux cellules de donn es comme indiqu dans les recommandations Notes Images et plans OUI NON N C 46 Tous les objets non textuels sont accompagn s d une alternative textuelle ALT ou LONGDESC selon la complexit de l image de mani re ce qu en les d sactivant il n y ait pas de pertes de contenu de fonctionnalit et de possibilit d utilisation 47 Toutes les images non significatives ont la valeur de l
124. sation d un document papier Ce type de contenus image provenant de la num risation doit tre absolument vit les outils d assistance technologique n arrivent en effet pas les lire Si l on doit partir obligatoirement d un original sur support papier avant de le convertir en PDF il faut utiliser un programme de reconnaissance des caract res OCR Il est par contre possible de rendre facilement accessible un PDF d rivant d un document lectronique Word ou Open Office en utilisant Acrobat Professional d Adobe selon les indications fournies par le producteur comme indiqu la page http www adobe com accessibility products acrobat training htmil Il faut indiquer clairement dans le texte du lien le type de document que l on est sur le point d ouvrir pdf Il peut galement tre utile de fournir le lien pour t l charger le plugin pour les utilisateurs qui ne le poss dent pas Exemple de lien vers document PDF lt a href novembre_202009 pdf gt R sultats du contr le automatis des d clarations format pdf lt a gt R f rence WCAG 2 0 4 1 2 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe IIl 2 b selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 50 Version
125. ser les breadcrumb ou miettes de pain ou le fil d Ariane commun ment repris dans les pages web sous la mention vous tes dans Le fil d Ariane met en vidence la position de la page l int rieur du site de l application en Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 48 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION montrant le parcours effectu partir de la page d accueil et il se pr sente comme un accessoire utile pour la navigation Il doit respecter la position de la page l int rieur du site de l application et non pas n cessairement les tapes de la navigation effectu e par exemple si un lien porte une zone interne du site diff rente de celle o l on se trouve le parcours doit mentionner la Page 49 nouvelle zone interne Pour s parer les mots dans le fil d Ariane il ne faut pas utiliser les signes sup rieur gt et inf rieur lt parce qu ils sont lus de mani re inappropri e par certains lecteurs d cran Par exemple la s rie Page d accueil gt page interm diaire gt page visualis e est lue de cette mani re par certains lecteurs Page d accueil fin de parenth se pointue page interm diaire fin de parenth se pointue page visualis e Il faut pr f rer un tiret ou les barrettes La solution conseill e pour le fil
126. sites Web de l administration publique Juillet 2010 Version 1 0 Page 82 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION tout le site web e Validatore del Web Design Group http www htmlhelp com tools validator value la conformit des pages aux sp cifications du W3C comme le valideur du W3C avec un maximum 100 pages la fois Page 83 e Multipage Validator http www validator ca value la conformit des pages aux sp cifications du W3C comme le valideur du W3C avec un maximum 100 pages la fois d Outils d valuation semi automatique Parmi les outils d valuation semi automatique particuli rement utiles on trouve e Web Accessibility Toolbar Cet outil est fourni par la Web Accessibility Tools Consortium et peut tre t l charg l adresse web http www wat c org tools index htmil C est un programme qui installe une s rie de boutons sous la barre de navigation d Internet Explorer Il a t cr dans le but de supporter la v rification d un grand nombre d aspects concernant l accessibilit d une page web dont le code x HTML et CSS de la page courante en utilisant les services en ligne de validation du code du W3C la structure s mantique des tags x HTML les tableaux simples et complexes permettant galement leurs lin arisation __ l activation d sactivation de CSS l activation d sactivation de JavaScript plug in
127. souffrant de troubles cognitifs trang res ou ayant un faible niveau de scolarisation peuvent avoir la n cessit de relire les contenus et dans tous les cas ils n ont pas tous la m me vitesse de lecture Enfin il faut aussi noter qu une partie des personnes sourdes communique travers de la langue des signes Il s agit de vraies langues diff rentes de pays en pays et parfois aussi au niveau r gional avec des r gles propres et un vocabulaire riche Donc en plus des textes simples de l utilisation d ic nes et d images explicatives au profit de tous les utilisateurs la pr sence de vid os de la traduction en langue des signes de quelques pages peut tre fort appr ci e par une bonne partie des personnes sourdes surtout s il y a de longs textes qui restent stables dans le temps Figure 3 Interpr te de la langue des signes lll Les handicap s moteurs Les handicap s moteurs dont il faut tenir compte au cours du d veloppement des produits software ont des difficult s contr ler leurs mains et donc utiliser la souris et le clavier Les personnes parapl giques c est dire les personnes qui sont paralys es uniquement de la partie inf rieure du corps ne rencontrent pas de difficult s avec l ordinateur sinon de positionnement et d ergonomie et par cons quent ils ne seront pas pris en compte dans ce contexte s FA o Guide technique d accessibilit pour la cr ation et la refonte des
128. stiques g n rales Les tableaux de donn es servent visualiser des informations de type tabellaire o des relations horizontales et verticales claires et sp cifiques sont tablies entre les contenus des cellules Il ne faut pas utiliser les tableaux pour pr senter des contenus dont la nature ne pr voit pas de comparaison entre lignes et colonnes c est dire pour pr senter en colonne des textes lire sur une ligne tant donn que les lecteurs d cran interpr tent toujours la premi re ligne comme le titre des colonnes situ es en dessous Chaque tableau contient e des cellules d di es aux en t tes tag lt TH gt Table Header qui permettent de qualifier et d identifier les donn es e des cellules contenant les donn es tag lt TD gt Table Date e Les tableaux peuvent tre e _ simples s ils ont un seul niveau d en t te e complexes s ils ont plusieurs niveaux d en t te en t tes multiples b Titre des tableaux et des colonnes Pour ins rer le titre d un tableau dans x HTML le tag utiliser est lt CAPTION car il positionne le titre en dehors du tableau lui m me La cellule d en t te d une colonne qui fournit le titre de la colonne elle m me doit tre codifi e avec le tag lt TH gt et non avec le tag lt TD gt qui identifie une cellule de donn es De cette mani re quand les lecteurs d cran liront la donn e contenue dans une cellule ils liront aussi la cellule
129. stration publique Juillet 2010 Page 32 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION L exemple qui suit illustre la mani re de g rer l ouverture d une nouvelle fen tre dans le cadre de la DTD Strict tant en pr sence qu en l absence de Javascript et en en avertissant pr alablement l utilisateur e Dans la page x HTML lt a href http www addresspage html class new_ windows onClick javascript this Page 33 onkeypress javascript this gt e Dans le code Javascript onload function if ldocument getElementsByTagName return I document getElementsByTagName a for i 0 i lt l length i if I i className indexOf new_window l 1 I il title ouvre une nouvelle fen tre Ilil onclick function window open this href return false noter le lien entre la classe new_ windows d finie dans le tag lt a gt et le script L avis d ouverture d une nouvelle fen tre est donn galement dans le titre du lien du script ouvre une nouvelle fen tre R f rence WCAG 2 0 2 1 2 1 1 2 1 2 2 1 3 2 4 6 Type de contr le Test automatique valuation humaine x Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Proc dure de contr le
130. t lt tr gt lt td id label_rossi gt Flan Ben Foulen lt td gt lt td headers label_int1 label_Flan label_cod gt RRRRRR66D541348B lt td gt lt td headers label_int2 label_Flan label_91 gt 220 lt td gt lt td headers label_int2 label_Flan label_92 gt 305 lt td gt lt td headers label_int2 label_Flan label_93 gt 250 lt td gt lt TR gt lt table gt EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION R f rence WCAG 2 0 1 3 1 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 b et II1 2 c selon la m thodologie indiqu e dans le paragraphe 111 3 Difficult du contr le moyen Objet de la check list d accessibilit 45 10 Graphisme a Caract ristiques g n rales viter de pr senter des textes sous forme d image parce que les images ne peuvent pas tre agrandies de fa on ad quate les malvoyants ne les voient pas de fa on ad quate et ils sont contraints de les d sactiver De plus un texte en format image requiert n cessairement de le sp cifier au moyen de l attribut ALT du tag lt IMG gt S il n est pas possible de se passer des textes au format image les images doivent tre r alis es avec
131. t p gt lt a HREF gt Entr e de menu 1 lt a gt lt p gt lt p gt lt a HREF gt Entr e de menu 2 lt a gt lt p gt lt BODY gt lt HTML gt e File frame02b htm lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN http www w3 org TR html4 strict dtd gt lt HTML gt lt HEAD gt lt TITLE gt Page des nouveaut s du site du D partement des politiques fiscales lt TITLE gt lt HEAD gt lt BODY gt lt H1 gt Nouveaut s du site du D partement des politiques fiscales lt H1 gt lt p gt Philosophiae artibus ipse lt p gt lt BODY gt lt HTML gt Exemple de iframe accessible lt iframe src news html id testiframe name testiframe title news gt lt a href news html gt News lt a gt lt iframe gt R f rence WCAG 2 0 2 4 1 Type de contr le x Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe III 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 3 b Internationalisation Par le mot internationalisation le W3C Internationalization 118n Activity d signe les technologies qui permettent un d veloppement correct d un site application en rapport avec les caract ristiques culturelles et linguistiques d une cible d utilisateurs Internationalisation est souvent crit i18n
132. t toujours tre align gauche ou droite selon le sens de lecture de la langue Ne pas utiliser sauf pour des cas particuliers par exemple le titre de la page le texte centr justifi ou align du c t oppos celui de la direction de lecture Comme indiqu au paragraphe I1 10 e ne pas utiliser la couleur comme forme unique de communication e utiliser toujours un contraste fort en termes de luminosit et de couleur entre le fond et le texte de mani re rendre facile la distinction par des personnes ayant des probl mes de perception de la couleur e viter de pr senter des textes sous forme d images parce que les images ne peuvent pas tre agrandies de fa on ad quate Exemple d information codifi e NON UNIQUEMENT avec la couleur L exemple qui suit illustre comment rendre explicite au moyen de l ast risque l information fournie par la couleur e Dans la page x HTML lt label for email class required gt E mail lt label gt lt input id email type text size 25 value gt lt label for lastname gt Last name lt label gt lt input id lastname type text size 25 value gt e Dans le code CSS required color red Exemple de la mani re de rendre le texte relatif travers le CSS body font size 100 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0
133. textuel ou un changement de couleur Mais cela ne suffit pas Les textes doivent aussi tre crits de mani re simple car les sourds peuvent avoir d importantes difficult s dans la compr hension de la langue En fait cela vaut surtout pour les sourds de naissance si le d faut n est pas vite diagnostiqu et que des proth ses ne sont pas implant es du fait du manque de retour auditif ils peuvent se sentir i P Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Janvier 2010 Version 1 0 LA REPULIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION exclus du processus normal d acquisition de la langue parl e et crite avec comme cons quences des limitations dans la connaissance de la langue maternelle Le fait de conna tre un nombre limit de mots de structures verbales et de structures morpho syntaxiques exclut ces personnes de la compr hension de ces textes qui s expriment avec des phrases structurellement complexes La simplification du langage m me accompagn e d une approche par ic ne et par images explicatives est de toute mani re une qualit requise essentielle aussi pour d autres types d utilisateurs comme les personnes souffrant de troubles cognitifs les trangers et les personnes avec un handicap culturel En ce qui concerne le deuxi me aspect il faut viter pour les m mes raisons les textes en mouvement Les personnes sourdes
134. thodologie indiqu e dans le paragraphe 111 3 Difficult du contr le moyen Objet de la check list d accessibilit 34 37 38 39 e Messages Comme nous l avons d j indiqu au paragraphe Il 4 a si des scripts de validation c t client sont pr vus ces contr les doivent tre dupliqu s c t serveurs dans la mesure o certains navigateurs ne supportent pas JavaScript Les messages d erreur doivent tre fournis de mani re claire et pr cise en indiquant le probl me et les actions n cessaires pour r parer l erreur par exemple Le code fiscal n a pas t introduit plut t que II manque une donn e obligatoire ou Le champ Code fiscal n a pas t valoris Il faut maintenir les donn es d j introduites en cas de signalement d erreur et ou de retour la page du formulaire R f rence WCAG 2 0 2 2 5 3 3 3 3 3 4 3 3 6 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 40 42 f Dur e des sessions Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Page 63 LA REPUBLIQUE TUNISIENNE MINISTER
135. tion l utilisateur pour l ouverture de la nouvelle fen tre doit tre donn e directement dans le texte du lien ou travers un texte cach Si la DTD stricte a t adopt e dans le d veloppement de la page l ouverture de nouvelles fen tres n est de toute fa on pas consentie parce que cette DTD ne pr voit pas l attribut TARGET du lien Si l on ne peut renoncer l ouverture de nouvelles fen tres et qu on utilise la DTD stricte il est possible d ouvrir de nouvelles fen tres en utilisant JavaScript Dans ce cas il est alors n cessaire de fournir quand m me le lien r el vers la page et d avertir l utilisateur de l ouverture de la nouvelle fen tre Cette m thode offre une alternative pour les technologies qui ne supportent pas JavaScript e Dans le cas o JavaScript est activ ou support une fen tre ou un pop up s ouvrira e Dans le cas o il est d sactiv ou n est pas support les contenus seront visualis s dans la m me fen tre L avis pour l ouverture d une nouvelle fen tre est ouvre une nouvelle fen tre sans utiliser de parenth ses afin d all ger le plus possible l coute du texte des liens Pour les pr cautions appliquer pour les textes cach s voir le paragraphe 11 3 Exemple de la mani re de r gler l ouverture de nouvelles fen tres Version 1 0 Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l admini
136. tr le Test automatique x valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le facile Objet de la check list d accessibilit 17 g Actualisation et redirection Dans la section lt HEAD gt de l x HTML le m ta tag lt META HTTP EQUIV REFRESH gt permet en variant les attributs du tag aussi bien la mise jour automatique refresh d une page web que la EE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 Page 24 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION possibilit de r adresser redirect la page vers une autre Il faut viter les actualisations p riodiques de page travers le m ta tag lt HTTP EQUIV REFRESH gt un utilisateur particuli rement lent dans la lecture pourrait ne pas avoir le temps de lire les contenus Il est possible de cr er des pages qui s actualisent automatiquement mais il faut pr voir un m canisme de blocage De m me il faut viter l utilisation du m me m ta tag pour forcer le chargement d une autre page Pr f rer des m canismes de r adressage c t serveur ou bien pr voir une page statique avec le lien permettant de passer la nouvelle page Exemple de code viter e Ne
137. tration publique Juillet 2010 Version 1 0 Page 11 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION DOCTYPE La premi re tape pour arriver un code x HTML de qualit consiste crire le code des pages de mani re conforme aux standards web officiels comme indiqu par les recommandations du W3C Le DOCTYPE doit tre le premier l ment ouvrir le document x HTML et il doit comporter l indication de la DTD Document Type Declaration laquelle la page est conforme Il existe 3 types de DTD et autant pour le code HTML et XTML e Strict c est la DTD la plus rigoureuse dans l criture du code parce qu elle pr voit une nette s paration entre la structure et la pr sentation avec par cons quent l utilisation de PHTML ou XHTML s mantiques pour la structure et des CSS pour la pr sentation graphique e Transitional c est la DTD la plus utilis e elle comprend des tags et des attributs ind sirables c est dire utilis s dans des anciennes versions de HTML et caract re de pr sentation e Frameset elle est identique la DTD Transitional mais elle est utilis e quand une page est subdivis e en cadres Les outils d assistance technologique travaillent mieux si les pages web sont r alis es avec la s paration structure pr sentation action les DTD les plus indiqu es pour obtenir des pages accessibles sont les plus rigoureuses puisqu elles imposent
138. ue correcte Naviguer avec un lecteur d cran par exemple Jaws pour contr ler si il est possible de lire ais ment la page une hi rarchie claire des titres est possible la page est op rationnelle en se d pla ant entre les liens les formulaires et les tableaux la page est op rationnelle avec JavaScript o d autres programmes non HTML comme Flash contr ler si les textes alternatifs des images sont correctement contextualis s lire des documents ou des programmes non HTML comme les PDF Remplir chaque item de la check list de l annexe 1 en indiquant s il est conforme Oui s il n est pas conforme Non ou s il n est pas applicable N C apr s avoir effectu le contr le aff rent Comme cela a t dit l valuation sera positive seulement dans le cas o tous les items auront une r ponse positive ou N C Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Version 1 0 Juillet 2010 Page 85 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION Cet examen permettra de d finir les ventuelles interventions de correction r aliser Celles ci peuvent tre e Des interventions simples et d am lioration qui peuvent aller de la modification du code Page 86 une intervention sur le graphisme du site e Des interventions complexes comme la r laboration graphique de certai
139. ur textuel qui visualise seulement les contenus textuels des pages ne supporte pas la souris les images montrant donc le texte alternatif les enregistrements vid o et audio les animations les plug ins Java et JavaScript Il est typiquement utilis par les aveugles avec l aide d un lecteur d cran LE Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION R f rence WCAG 2 0 1 3 1 4 1 1 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans le paragraphe II1 2 c selon la m thodologie indiqu e dans le paragraphe III 3 Difficult du contr le moyen Objet de la check list d accessibilit 7 8 14 6 Pr sentation des contenus a Organisation des titres Utiliser les tags x HTML ad quats indiqu s au paragraphell 2 d pour structurer le texte l int rieur de la page lt H1 gt pour le titre principal lt H2 gt pour les titres de deuxi me niveau lt H3 gt pour les titres de troisi me niveau et ainsi de suite jusqu lt H6 gt Ne pas utiliser ces tags pour obtenir des effets de formatage Ne pas utiliser trop de niveaux d indentation l int rieur d une seule page Le titre principal lt H1 gt doit tre significatif de mani
140. ure o ces tests sont projet s sp cifiquement pour ne pas tre lisibles par des instruments automatiques les outils d assistance technologiques normaux utilis s par les utilisateurs aveugles ou malvoyants ne sont pas capables de les interpr ter Dans certains cas les images sont ce point distordues qu elles sont quasi impossibles lire m me pour des personnes jouissant d une capacit de vision parfaite Afin de favoriser laccessibilit le W3C a mis disposition une tude http www w3 org TR turingtest qui illustre une approche diff rente de la r alisation des CAPTCHA on n utilise pas d images graphiques d form es mais des tests logiques bas s sur des jeux de mots des quiz math matiques ou des demandes simples qui peuvent emp cher l acc s aux robots Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION R f rence WCAG 2 0 1 1 1 Type de contr le Test automatique Xx valuation humaine Proc dure de contr le utiliser les outils indiqu s dans les paragraphes 111 2 a et 1I1 2 b selon la m thodologie indiqu e dans le paragraphe 111 3 Difficult du contr le moyen Objet de la check list d accessibilit chapitre Observations additionnelles 9 Tableaux de donn es a Caract ri
141. useOut n ont pas d quivalent avec le clavier et doivent donc tre associ s respectivement avec OnFocus et OnBlur ne pas activer des v nements avec Onchange et OnSelect mais ins rer toujours un bouton explicite de confirmation Exemple sur OnSelect e Code viter lt script type text javascript gt lt l Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION function goto_URL object window location href object options object selectedindex value I lt script gt lt form action page htm onsubmit return false gt lt p gt lt label for selectPage gt Go to lt label gt lt select name selectName onchange goto_ URL this form selectName gt lt option value gt Select a page lt option gt lt option value page htm gt Page 1 lt option gt lt option value page htm gt Page 2 lt option gt lt option value page htm gt Page 3 lt option gt lt select gt lt p gt lt form gt e Code correct lt form action page htm onsubmit return false gt lt p gt lt label for selectPage2 gt Go to lt label gt lt select name selectPage2 id selectPage2 gt nn lt option value gt Select a page lt option gt lt option value page htm gt Page 1 lt option gt lt option value page htm gt Page
142. www useit com papers heuristic heuristic_list html e Web Style Guide by Patrick J Lynch and Sarah Horton http www webstyleguide com e Research based Web Design and Usability Guidelines by U S Department of Health and Human Services http www usability gov pdfs guidelines html e IBM Accessibility Developer Guidelines http www 03 ibm com able guidelines index html Les pr sentes recommandations sont destin es un personnel technique disposant de connaissances minimales de HTML XHTML CSS et JavaScript ainsi que les web designers et les d veloppeurs web 1 Structure Pr sentation Action Pour garantir une meilleure accessibilit c est dire une meilleure interpr tation des contenus par les outils d assistance technologique il est important d adopter des techniques particuli res de r alisation des pages web comme le W3C le recommande dans la Web Accessibility Initiative WAI Selon les indications du W3C WAI chaque page est compos e de trois l ments distincts comme e Guide technique d accessibilit pour la cr ation et la refonte des sites Web de l administration publique Juillet 2010 Version 1 0 LA REPUBLIQUE TUNISIENNE MINISTERE DES TECHNOLOGIES DE LA COMMUNICATION le montre l illustration suivante Structure Contenus HTML XHTML s mantique Action JavaScript ECMA Script DOM Figure 1 El ments d une page web La structure est form e des parties in

Guide technique d`accessibilité pour la création et la refonte des

Contents

Download Pdf Manuals

Related Search

Related Contents

Guide technique d`accessibilit&eacute; pour la cr&eacute;ation et la refonte des

Contents

Download Pdf Manuals

Related Search

Related Contents

Guide technique d`accessibilité pour la création et la refonte des