Charte d accessibilité

Charte d accessibilité La présente charte explique comment rendre accessible les contenus web aux personnes handicapées. Cependant, en suivant ces directives, le contenu sera plus accessible à tous les utilisateurs, indépendamment de leur moyen pour accéder au web. 6, rue de l Etang, L-5326 Contern Tél. : +352 35 00 99-1 contact@sigi.lu BP 63, L-5201 Sandweiler TVA : LU 13753429 www.sigi.lu

Historique Nom de fichier : Charte d accessibilité v1.4.pdf Date Version Auteur Description 06.06.2012 1.0 G.B Version initiale 08.06.2012 1.1 G.B 12.06.2012 1.2 G.B 10.10.2012 1.3 G.B 23.04.2013 1.4 G.B Corrections Validation Nom Date Version P. C. 21.04.2014 1.4 Charte d accessibilité V1.4.pdf 2 1 5 20..4.2015

Sommaire Historique... 2 Validation... 2 Sommaire... 3 1 Fournir des alternatives au contenu visuel et auditif... 5 1.1 Images... 5 1.2 Diagrammes... 6 1.3 Contenu audio préenregistré... 6 1.4 Contenu vidéo préenregistré... 6 2 Ne pas s'en remettre exclusivement aux couleurs... 7 2.1 Ne pas combiner une couleur avec une autre s'ils sont facilement à confondre.... 7 2.2 Ne pas utiliser la couleur comme seule façon de communiquer une information.... 7 3 Utiliser le balisage et les feuilles de style, et cela de façon appropriée... 8 3.1 Quand un langage de balisage approprié existe pour le contenu en question, utiliser des balises plutôt que d'autres formats pour convoyer l'information.... 8 3.2 Le code HTML doit être sémantique et conforme au standard W3C utilisé.... 8 3.3 Le code CSS ne doit pas obligatoirement être valide au standard utilisé.... 8 3.4 Toutes les unités disponibles sont acceptables dans les valeurs d'attributs ou de propriétés des feuilles de style.... 8 4 Clarifier l'utilisation du langage naturel... 9 4.1 Identifier le langage principal du document.. 9 4.2 Ne pas spécifier de langage principal si une page contient plusieurs langages avec la même préséance.... 9 4.3 Spécifier le langage du document de destination s'il est différent et connu.... 9 4.4 Spécifier la forme complète de toutes abréviations employés dans le document lors de la première utilisation.... 9 5 Créer des tableaux qui se transforment de façon élégante 10 5.1 Ne pas utiliser des tableaux pour la mise en page.... 10 5.2 Les tableaux de données doivent être sémantiques et valides au standard W3C utilisé.10 6 S'assurer que les pages qui contiennent de nouvelles technologies se transforment de façon élégante... 11 6.1 Les documents doivent être lisibles sans feuilles de style.... 11 6.2 Ne pas fournir des pages alternatives, mais rendre le contenu original accessible.... 11 6.3 Ne pas utiliser l'élément <noscript>... 11 7 Assurer à l'utilisateur le contrôle des changements du contenu lorsque ce dernier varie dans le temps... 12 7.1 Ne pas causer du clignotement ou du scintillement.... 12 7.2 Ne pas déplacer ou défiler du contenu sans activation par un utilisateur, par exemple après l'ouverture de la page.... 12 7.3 Rendre possible la désactivation ou la mise en pause de tout contenu mis à jour automatiquement ou en mouvement.... 12 7.4 Ne pas mettre à jour une page automatiquement.... 12 8 Conception respectant l'indépendance par rapport au périphérique... 13 8.1 Ne pas utiliser des cartes cliquables côté serveur.... 13 8.2 Ne pas utiliser les attributs tabindex et accesskey.... 13 9 Fourniture d'informations de contexte et d'orientation... 14 9.1 Ne pas ouvrir de fenêtres ou de pop-ups, et ne pas modifier la fenêtre active sans prévenir l'utilisateur.... 14 9.2 Ne pas utiliser de cadres pour la mise en page.... 14 9.3 Fournir une navigation principale compréhensible au lieu d'un plan du site web (site map).... 14 9.4 Diviser les grands blocs d'information en groupes plus petits et plus facilement manipulables.... 14 9.5 Associer les étiquettes avec leurs éléments de contrôle de manière explicite.... 14 Charte d accessibilité V1.4.pdf 3 1 5 20..4.2015

10 Utiliser les technologies et directives du W3C... 15 10.1 Utiliser HTML pour les documents qui consistent essentiellement en texte.... 15 10.2 Utiliser CSS comme moyen principal pour contrôler la présentation.... 15 10.3 Eviter la dépendance de logiciels de visualisation séparés (Adobe Reader, Microsoft Word, etc.).... 15 10.4 Les documents PDF doivent être accessibles... 15 10.5 Eviter toute technologie nécessitant un plugin (Flash, Silverlight, Java, etc.).... 15 Charte d accessibilité V1.4.pdf 4 1 5 20..4.2015

Cette charte est basée sur la version française des Directives pour l'accessibilité aux contenus Web (version 1.0) 1, recommandation W3C du 5 mai 1999 mais adaptée aux réalités de l an 2013 et aux besoins du SIGI. 1 Fournir des alternatives au contenu visuel et auditif Tout contenu non-textuel doit avoir une alternative textuelle pas nécessairement équivalente. Ceci peuvent être des attributs alt pour les images, des versions audio de CAPTCHAs ou des versions HTML de documents PDF. Il n'est pas toujours désirable ou possible que l'alternative soit équivalente au contenu non-textuel. Exemple : Jackson Pollock (1912-1956) : Convergence, 1952. Huile sur toile. 1.1 Images Fournir un remplacement textuel pour les images selon l'arbre de décision suivant 1 : L'image est-elle utilisée à des fins strictement décoratives? Oui : L'image peut-elle être affichée en utilisant une propriété CSS? Oui : attribut alt non requis, utiliser une propriété CSS Non : utiliser un attribut alt vide (alt="") Non : L'image est-elle utilisée comme lien ou comme bouton? Oui : identifier la destination du lien ou la fonction du bouton dans l'attribut alt Non : la signification de l'image peut-elle être décrite en 150 caractères ou moins? Oui : décrire la signification de l'image en 150 caractères ou moins Non : inclure un résumé de la signification de l'image en 150 caractères ou moins, puis inclure la description complète dans un fichier HTML séparé un utilisant longdesc 1 Vincent Young : Alt decision tree (http://webhipster.com/testing/accessibility/alt/) Charte d accessibilité V1.4.pdf 5 1 5 20..4.2015

1.2 Diagrammes 1.2.1 L'alternative textuelle doit expliquer les particularités du diagramme nécessaires à la compréhension du document. Utiliser l'attribut longdesc pour les diagrammes complexes ou très détaillés. 1.2.2 Ne pas utiliser les données brutes qui sont à la base du diagramme comme alternative textuelle. 1.3 Contenu audio préenregistré 1.3.1 Ne pas démarrer du contenu audio automatiquement sans activation par un utilisateur, par exemple après l'ouverture de la page. 1.3.2 Fournir une transcription textuelle pour tout contenu audio, sauf si le contenu est majoritairement musical. Dans ce cas, fournir une liste des titres des chansons. 1.4 Contenu vidéo préenregistré 1.4.1 Ne pas démarrer des vidéos automatiquement, sans activation par un utilisateur, par exemple après l'ouverture de la page. 1.4.2 Fournir un sous-titrage 2 et/ou une interprétation en langue de signes 3 pour sourds et malentendants, synchronisé aux images pour tout contenu vidéo. Indiquer le fait qu'une vidéo n'a pas de son. 1.4.3 Fournir une audiodescription 4 pour personnes aveugles ou malvoyantes pour toute vidéo dont le sens ne se révèle pas avec seulement la piste sonore. 1.4.4 Une transcription n'est pas un substitut pour un sous-titrage ou une audiodescription. 2 http://fr.wikipedia.org/wiki/sous-titrage_pour_sourds_et_malentendants 3 http://fr.wikipedia.org/wiki/langue_des_signes 4 http://fr.wikipedia.org/wiki/audiodescription Charte d accessibilité V1.4.pdf 6 1 5 20..4.2015

2 Ne pas s'en remettre exclusivement aux couleurs Certaines couleurs sont difficiles ou impossibles à distinguer par des personnes atteintes d'une forme de dyschromatopsie (daltonisme), dont l'incapacité de distinguer le rouge du vert est la plus répandue. Pour des applications critiques, l'utilisation des palettes «Brewer» est recommandée. 5 2.1 Ne pas combiner une couleur avec une autre s'ils sont facilement à confondre. Par exemple, ne pas afficher du texte vert sur un fond rouge. L'affichage d'une zone dans une couleur qui peut être confondue avec la couleur d'une zone voisine (par exemple un texte vert sur fond blanc à côté d'un rectangle rouge) est permis. L'utilisation de couleurs facilement à confondre dans des éléments décoratifs (sans contenu) est permis. 2.2 Ne pas utiliser la couleur comme seule façon de communiquer une information. Par exemple, deux icônes qui communiquent un de deux états possibles (par exemple «accepté» et «refusé») doivent se distinguer non seulement par la couleur (vert ou rouge), mais avant tout par leur forme (coche ou croix). 5 Martin Krzywinski : Brewer Palettes (http://mkweb.bcgsc.ca/brewer/) Charte d accessibilité V1.4.pdf 7 1 5 20..4.2015

3 Utiliser le balisage et les feuilles de style, et cela de façon appropriée L utilisation inappropriée du balisage restreint l accessibilité. Le fait de détourner une balise pour créer un effet de présentation complique la tâche des utilisateurs utilisant des logiciels spécialisés quand ils essayent de naviguer ou de comprendre l organisation d'une page. 3.1 Quand un langage de balisage approprié existe pour le contenu en question, utiliser des balises plutôt que d'autres formats pour convoyer l'information. Dans la grande majorité des cas, utiliser HTML pour la structure et CSS pour la mise en page. Un document PDF, Flash ou Word n'est pas un substitut pour une page web. 3.2 Le code HTML doit être sémantique et conforme au standard W3C utilisé. Les éléments et attributs les plus appropriés pour le contenu en question doivent être utilisés. Ne pas utiliser <table> pour contrôler la mise en page; ne pas utiliser <b> pour formater un titre, mais utiliser les éléments <h1> à <h6> ; ne pas utiliser <blockquote> pour un alinéa; etc. Exceptions autorisées : Des attributs nécessaires au bon fonctionnement d'un moteur d'une template engine (par exemple un attribut id dans l'élément <head> ou «_» comme premier caractère de la valeur d'un attribut id) Il n'est pas nécessaire d'utiliser l'élément <q>. L'utilisation de guillemets est suffisante. 3.3 Le code CSS ne doit pas obligatoirement être valide au standard utilisé. Les préfixes propriétaires de certaines propriétés CSS (-moz-*, -webkit-*, etc.) causent un échec de la validation, mais ceci sans interférer dans l'accessibilité de la page HTML. 3.4 Toutes les unités disponibles sont acceptables dans les valeurs d'attributs ou de propriétés des feuilles de style. Cela dit, chaque unité a ses domaines d'application. Spécifier les marges d'une page imprimée en px n'a pas de sens. La différence entre relatif et absolu est insignifiant. Charte d accessibilité V1.4.pdf 8 1 5 20..4.2015

4 Clarifier l'utilisation du langage naturel Un langage naturel est utilisé par des êtres humains comme moyen de communication. Les langages de programmation de n'importe quel type, même s'ils ressemblent à un langage naturel ou en sont dérivés, ne sont pas des langages naturels. 4.1 Identifier le langage principal du document Par exemple, <html lang="code"> ou <html xml:lang="code">, ou «code» est à remplacer par un code ISO 639.1. 6 4.2 Ne pas spécifier de langage principal si une page contient plusieurs langages avec la même préséance. S'il n'y a pas de langage principal, utiliser des éléments <div> ou <span> avec l'attribut lang pour désigner des zones pour l'un ou l'autre langage. 4.3 Spécifier le langage du document de destination s'il est différent et connu. En HTML, utiliser l'attribut hreflang. 4.4 Spécifier la forme complète de toutes abréviations employés dans le document lors de la première utilisation. En HTML, utiliser l'élément <abbr> avec l'attribut title. Ne pas utiliser l'élément <acronym>. 6 http://www.loc.gov/standards/iso639-2/php/english_list.php Charte d accessibilité V1.4.pdf 9 1 5 20..4.2015

5 Créer des tableaux qui se transforment de façon élégante Les tableaux (<table>) sont utilisés pour présenter des données existant à l'origine sous forme de tableau. 5.1 Ne pas utiliser des tableaux pour la mise en page. 5.2 Les tableaux de données doivent être sémantiques et valides au standard W3C utilisé. Créer les tableaux selon les règles de l'art : Identifier les en-têtes de lignes et de colonnes L'utilisation de l'attribut <summary> n'est pas obligatoire Charte d accessibilité V1.4.pdf 10 1 5 20..4.2015

6 S'assurer que les pages qui contiennent de nouvelles technologies se transforment de façon élégante L'utilisation des dernières technologies pour résoudre les problèmes causés par les technologies actuelles est encouragée. Ceci dit, ces pages doivent rester visibles, même en forme réduite, par des anciens navigateurs ou par des navigateurs récents ayant désactivés certaines options. 6.1 Les documents doivent être lisibles sans feuilles de style. Lorsque le contenu est organisé de manière logique, il sera restitué de manière compréhensible lorsque les feuilles de style sont désactivées ou non supportées. 6.2 Ne pas fournir des pages alternatives, mais rendre le contenu original accessible. S'assurer que le contenu dynamique reste accessible. Tout type de script doit être intrinsèquement accessible. 6.3 Ne pas utiliser l'élément <noscript> Charte d accessibilité V1.4.pdf 11 1 5 20..4.2015

7 Assurer à l'utilisateur le contrôle des changements du contenu lorsque ce dernier varie dans le temps Certaines personnes souffrant d'un handicap cognitif ne peuvent pas lire un texte lorsqu'il bouge. Les mouvements peuvent causer une telle distraction que le reste d'une page peut devenir illisible. Les dispositifs vocaux de lecture d'écran ne peuvent lire un texte en mouvement. Certaines personnes souffrant de handicap physique pourraient ne pas être en mesure de bouger suffisamment vite ou précisément pour interagir avec des objets en mouvement. 7.1 Ne pas causer du clignotement ou du scintillement. Ne pas causer de changements brusques de luminosité. 7.2 Ne pas déplacer ou défiler du contenu sans activation par un utilisateur, par exemple après l'ouverture de la page. Exceptions : Indicateurs de progrès, par exemple lors du chargement de contenu Des éléments graphiques qui doivent attirer l'attention de l'utilisateur Des animations qui visualisent le résultat d'une action dans une interface utilisateur (par exemple la fermeture du menu des démarches dans macommune.lu 3.0) 7.3 Rendre possible la désactivation ou la mise en pause de tout contenu mis à jour automatiquement ou en mouvement. Implémenter soit comme préférence globale, soit comme mécanisme local. 7.4 Ne pas mettre à jour une page automatiquement. Charte d accessibilité V1.4.pdf 12 1 5 20..4.2015

8 Conception respectant l'indépendance par rapport au périphérique Un accès indépendant de l'interface signifie que l'utilisateur peut interagir avec le document ou l'agentutilisateur via une interface d'entrée (ou de sortie) de prédilection la souris, le clavier, la voix ou autres. 8.1 Ne pas utiliser des cartes cliquables côté serveur. Utiliser des cartes cliquables côté client, selon les règles de l'art. 8.2 Ne pas utiliser les attributs tabindex et accesskey. 8.3 Ne pas s'appuyer sur le gestionnaire d'événement (event handler) onmouseover. Utiliser uniquement à des fins purement décoratives, comme l'existence de l'état hover est limité aux systèmes avec une souris comme support d'entrée principal. Charte d accessibilité V1.4.pdf 13 1 5 20..4.2015

9 Fourniture d'informations de contexte et d'orientation Changements majeurs dans le contenu d'une page Web qui, s'ils sont faits sans que l'utilisateur en soit conscient, peuvent désorienter l'utilisateur qui ne peut voir l'ensemble de la page en même temps 9.1 Ne pas ouvrir de fenêtres ou de pop-ups, et ne pas modifier la fenêtre active sans prévenir l'utilisateur. L'ouverture d'un lien dans une nouvelle fenêtre provoque un changement de contexte de navigation qui peut désorienter l'utilisateur. Ainsi, par exemple, l'ouverture de cette nouvelle fenêtre et l'impossibilité de revenir à la page précédente via l'historique du navigateur pourront être difficilement perceptibles pour l'utilisateur d'un lecteur d'écran. 7 9.2 Ne pas utiliser de cadres pour la mise en page. Ne pas utiliser <frameset>. L'utilisation de la balise <iframe> est autorisée. 9.3 Fournir une navigation principale compréhensible au lieu d'un plan du site web (site map). Fournir une table de matières si le site ne peut pas être navigué autrement. 9.4 Diviser les grands blocs d'information en groupes plus petits et plus facilement manipulables. Par exemple : Utiliser <optgroup> pour regrouper les éléments <option> d'un champ <select> Regrouper les contrôles de formulaires avec <fieldset> et <legend> Utiliser des listes imbriquées lorsque c'est nécessaire Utiliser des titres et des sous-titres pour structurer une page 9.5 Associer les étiquettes avec leurs éléments de contrôle de manière explicite. Par exemple, en HTML, utiliser l'élément <label> et son attribut for. 7 http://fr.wikipedia.org/wiki/pop-up Charte d accessibilité V1.4.pdf 14 1 5 20..4.2015

10 Utiliser les technologies et directives du W3C Les normes du W3C (notamment les normes HTML, CSS, etc.) intègrent des considérations par rapport à l'accès par des personnes atteintes d'un handicap physique, moteur ou neurophysiologique dans les standards et facilitent grandement la création de sites web universellement accessibles. 8 10.1 Utiliser HTML pour les documents qui consistent essentiellement en texte. Utiliser la version appropriée. Il n'est pas nécessaire d'utiliser la version la plus récente d'html ou de XHTML. 10.2 Utiliser CSS comme moyen principal pour contrôler la présentation. 10.3 Eviter la dépendance de logiciels de visualisation séparés (Adobe Reader, Microsoft Word, etc.). La conversion en HTML de documents PDF rend leur contenu accessible et indexable, non seulement par des moteurs de recherche externes, mais aussi par celui du site. 9 Recourir au format PDF dans le cas de documents : qui contiennent un grand nombre de notes de bas de page difficiles à recréer en HTML créés uniquement pour impression complexes, dans des formats difficiles à recréer en HTML ou avec des images (p. ex. des documents Photoshop avec des calques, des dessins CAD en haute résolution, des chartes graphiques, etc.) des documents orphelins, pour lesquels les logiciels d'origine ne sont pas disponibles 10.4 Les documents PDF doivent être accessibles Les documents au format PDF doivent être balisés correctement, c'est-à-dire : indiquer le sens de lecture du texte légendes pour les photos (et autres visuels) balisage des tableaux (titres de colonnes et sens de lecture) indication de la, ou des, langues du document 10 10.5 Eviter toute technologie nécessitant un plug-in (Flash, Silverlight, Java, etc.). Si l'utilisation d'un plug-in est inévitable, présenter des informations (ou fonctionnalités) accessibles équivalentes, qui utilisent les technologies du W3C. Ne pas créer des pages alternatives. 8 Tristan Nitot : Pourquoi les standards du W3C? (http://openweb.eu.org/articles/pourquoi_standards/) 9 jr_briarbird : Unlock valuable content trapped in PDFs (http://briarbird.com/archives/564/) 10 L'accessibilité PDF (http://www.ipedis.com/accessibilite-pdf-accessible/) Charte d accessibilité V1.4.pdf 15 1 5 20..4.2015