====== Accessibility guidelines for graphic design (to ensure WCAG 2.0 compliance) ====== ===== Download manual ===== ===== Introduction ==== * [[notices:graphique-ergonomique:contexte-et-objectifs]] * [[notices:graphique-ergonomique:comment-utiliser-cette-notice]] * [[notices:graphique-ergonomique:remerciements]] * [[notices:graphique-ergonomique:licence-d-utilisation]] * [[notices:graphique-ergonomique:contacts]] * [[notices:graphique-ergonomique:credits]] ===== Accessibility guidelines for graphic design ===== ==== 1. Navigation ==== === 1.1. General navigation === * [[notices:graphique-ergonomique:prevoir-un-fil-d-ariane]] * [[notices:graphique-ergonomique:prevoir-au-moins-deux-moyens-de-navigation-parmi-un-menu-principal-un-plan-du-site-et-un-moteur-de-recherche]] * [[notices:graphique-ergonomique:differencier-visuellement-la-position-courante-dans-les-menus]] * [[notices:graphique-ergonomique:assurer-la-coherence-visuelle-de-la-navigation]] === 1.2. Navigation aids === * [[notices:graphique-ergonomique:prevoir-une-page-d-aide]] * [[notices:graphique-ergonomique:prevoir-des-liens-d-evitement]] ==== 2. Text and symbols === === 2.1. Text === * [[notices:graphique-ergonomique:conserver-les-accents-sur-les-lettres-capitales]] * [[notices:graphique-ergonomique:ne-pas-justifier-le-texte]] * [[notices:graphique-ergonomique:veiller-a-ce-que-les-polices-puissent-etre-integrees-sous-forme-de-texte]] === 2.2. Symbols === * [[notices:graphique-ergonomique:associer-un-texte-a-chaque-symbole-ambigu]] ==== 3. Colours === === 3.1. Contrast === * [[notices:graphique-ergonomique:assurer-un-contraste-suffisant-entre-les-contenus-et-l-arriere-plan-ou-proposer-une-alternative-contrastee]] === 3.2. Meaning conveyed by colour === * [[notices:graphique-ergonomique:assurer-la-comprehension-de-l-information-meme-en-l-absence-de-couleurs]] ==== 4. Links ==== === 4.1. Link texts === * [[notices:graphique-ergonomique:prevoir-un-intitule-explicite-pour-chaque-lien]] * [[notices:graphique-ergonomique:signaler-chaque-lien-qui-declenche-l-ouverture-d-une-nouvelle-fenetre]] === 4.2. Identifying links === * [[notices:graphique-ergonomique:differencier-visuellement-les-liens-du-texte-environnant]] ==== 5. Documents === === 5.1. Documents available for download === * [[notices:graphique-ergonomique:indiquer-le-poids-et-le-format-de-chaque-document-en-telechargement]] * [[notices:graphique-ergonomique:indiquer-la-langue-de-chaque-document-en-telechargement-si-necessaire]] ==== 6. Tables === === 6.1. Table headings === * [[notices:graphique-ergonomique:prevoir-un-titre-pour-chaque-tableau-de-donnees]] ==== 7. Forms ==== === 7.1. Labels and fields === * [[notices:graphique-ergonomique:prevoir-un-intitule-explicite-pour-chaque-champ-de-formulaire]] * [[notices:graphique-ergonomique:prevoir-des-intitules-identiques-pour-les-champs-dont-la-fonction-est-identique]] * [[notices:graphique-ergonomique:positionner-chaque-intitule-a-proximite-de-son-champ]] * [[notices:graphique-ergonomique:regrouper-et-titrer-les-champs-de-meme-nature-dans-les-formulaires-longs]] === 7.2. Buttons === * [[notices:graphique-ergonomique:positionner-un-bouton-de-soumission-a-la-fin-de-chaque-formulaire]] * [[notices:graphique-ergonomique:prevoir-un-intitule-explicite-pour-chaque-bouton-de-formulaire]] === 7.3. Information messages === * [[notices:graphique-ergonomique:indiquer-clairement-les-champs-obligatoires]] * [[notices:graphique-ergonomique:prevoir-des-aides-a-la-saisie-si-necessaire]] * [[notices:graphique-ergonomique:prevoir-des-messages-d-erreurs-explicites-et-des-suggestions-de-correction-si-necessaire]] * [[notices:graphique-ergonomique:prevoir-un-message-de-confirmation-si-necessaire]] === 7.4. Forms with multiple steps === * [[notices:graphique-ergonomique:indiquer-clairement-le-nombre-total-d-etapes-ainsi-que-l-etape-en-cours]] * [[notices:graphique-ergonomique:prevoir-un-moyen-pour-revenir-aux-etapes-precedentes]] * [[notices:graphique-ergonomique:prevoir-un-recapitulatif-des-donnees-renseignees-avant-la-soumission-finale-du-formulaire]] === 7.5. CAPTCHA (anti-spam systems) === * [[notices:graphique-ergonomique:prevoir-pour-chaque-captcha-une-alternative-si-necessaire]] * [[notices:graphique-ergonomique:prevoir-pour-chaque-captcha-une-solution-de-rafraichissement]] ==== 8. Multimedia === === 8.1. Videos === * [[notices:graphique-ergonomique:prevoir-un-titre-ou-un-resume-pour-chaque-video]] * [[notices:graphique-ergonomique:prevoir-un-moyen-d-acces-a-la-transcription-textuelle-de-chaque-video]] * [[notices:graphique-ergonomique:prevoir-des-moyens-pour-controler-l-avancement-et-le-volume-sonore-de-chaque-video]] * [[notices:graphique-ergonomique:prevoir-un-moyen-d-afficher-les-sous-titres]] * [[notices:graphique-ergonomique:prevoir-une-mise-en-forme-des-sous-titres-qui-permet-de-garantir-leur-lisibilite]] * [[notices:graphique-ergonomique:prevoir-un-moyen-d-activer-l-audiodescription]] === 8.2. Audio content === * [[notices:graphique-ergonomique:prevoir-un-titre-ou-un-resume-pour-chaque-contenu-audio]] * [[notices:graphique-ergonomique:prevoir-un-moyen-d-acces-a-la-transcription-textuelle-de-chaque-contenu-audio]] * [[notices:graphique-ergonomique:prevoir-des-moyens-pour-controler-l-avancement-et-le-volume-sonore-de-chaque-contenu-audio]] === 8.3. Animations and sounds (banners, scrolling content, background music, etc.) === * [[notices:graphique-ergonomique:prevoir-un-moyen-pour-stopper-chaque-contenu-anime]] * [[notices:graphique-ergonomique:prevoir-un-moyen-pour-stopper-chaque-son-lance-automatiquement]] ===== Appendixes ===== * [[notices:graphique-ergonomique:recommandations-graphiques-et-ergonomiques-additionnelles]] * [[notices:graphique-ergonomique:grille-de-correspondances-wcag-accessiweb-rgaa]]