====== Accessibility guidelines for HTML and CSS (to ensure WCAG 2.0 compliance) ====== ===== Download manual ===== ===== Introduction ==== * [[notices:html-css:contexte-et-objectifs]] * [[notices:html-css:comment-utiliser-cette-notice]] * [[notices:html-css:remerciements]] * [[notices:html-css:licence-d-utilisation]] * [[notices:html-css:contacts]] * [[notices:html-css:credits]] ===== Accessibility guidelines for HTML and CSS ===== ==== 1. General structure ==== === 1.1. Regions, headings and navigation menus === * [[notices:html-css:identifier-les-principales-zones-de-la-page-avec-l-attribut-role]] * [[notices:html-css:mettre-en-place-une-hierarchie-de-titres-logique-et-exhaustive-avec-les-balises-h1-a-h6]] * [[notices:html-css:structurer-les-menus-de-navigation-avec-des-listes]] === 1.2. Order of content in the HTML source code === * [[notices:html-css:ecrire-le-code-de-la-page-en-suivant-la-logique-de-l-ordre-de-lecture]] * [[notices:html-css:veiller-a-la-coherence-de-l-ordre-du-flux-html-d-une-page-a-l-autre]] ==== 2. Metadata ==== === 2.1. Page title === * [[notices:html-css:enseigner-un-title-precis-sur-chaque-page]] === 2.2. Character encoding === * [[notices:html-css:veiller-au-bon-encodage-de-tous-les-caracteres]] ==== 3. Languages ==== === 3.1. Page language === * [[notices:html-css:renseigner-la-langue-principale-de-la-page-avec-l-attribut-lang-sur-la-balise-html]] === 3.2. Change of language === * [[notices:html-css:utiliser-l-attribut-lang-pour-signaler-les-changements-de-langue-dans-le-corps-de-la-page]] ==== 4. HTML grammar and semantics ==== === 4.1. Conformity === * [[notices:html-css:ecrire-un-code-html-valide-selon-les-regles-de-grammaire-du-doctype-utilise]] === 4.2. Usage of HTML tags and attributes === * [[notices:html-css:ne-pas-utiliser-d-attributs-ou-de-balises-html-destines-exclusivement-a-la-mise-en-forme]] * [[notices:html-css:employer-les-balises-html-pour-leur-valeur-semantique]] ==== 5. Images ==== === 5.1. Illustrative and decorative images === * [[notices:html-css:utiliser-une-alternative-vide-alt-sur-les-images-decoratives-et-illustratives]] === 5.2. Informative images === * [[notices:html-css:ne-pas-utiliser-css-pour-afficher-les-images-porteuses-d-information]] * [[notices:html-css:renseigner-l-attribut-alt-sur-les-images-porteuses-d-information]] === 5.3. Image maps === * [[notices:html-css:renseigner-l-attribut-alt-de-chaque-image-mappee-et-de-ses-balises-area]] * [[notices:html-css:integrer-les-balises-map-et-area-juste-apres-chaque-image-mappee-dans-le-flux-html]] ==== 6. Links and buttons ==== === 6.1. Link and button headings === * [[notices:html-css:privilegier-au-maximum-les-intitules-explicites-pour-les-liens-et-les-boutons]] * [[notices:html-css:utiliser-l-attribut-title-pour-expliciter-les-intitules-de-liens-et-de-boutons-qui-ne-peuvent-pas-etre-rendus-explicites]] === 6.2. Download documents === * [[notices:html-css:indiquer-le-poids-et-le-format-de-chaque-document-en-telechargement]] === 6.3. New windows === * [[notices:html-css:signaler-l-ouverture-des-nouvelles-fenetres]] ==== 7. Forms ==== === 7.1. Labels and form controls === * [[notices:html-css:utiliser-la-balise-label-ainsi-que-les-attributs-for-et-id-pour-associer-les-champs-a-leurs-intitules]] * [[notices:html-css:integrer-les-informations-utiles-a-la-saisie-directement-dans-les-balises-label]] === 7.2. Grouping and sorting information === * [[notices:html-css:regrouper-et-titrer-les-champs-de-meme-nature-avec-fieldset-et-legend]] * [[notices:html-css:ordonner-les-options-de-maniere-logique-dans-les-listes-deroulantes]] === 7.3. Page title === * [[notices:html-css:mettre-a-jour-le-title-de-la-page-quand-un-formulaire-renvoie-une-erreur-ou-un-message-de-confirmation]] === 7.4. CAPTCHA (anti-spam system) === * [[notices:html-css:indiquer-dans-l-alternative-des-captcha-graphiques-ou-trouver-la-version-non-graphique-du-captcha]] ==== 8. Lists and quotations ==== === 8.1. Lists === * [[notices:html-css:baliser-les-listes-non-ordonnees-avec-ul-et-li]] * [[notices:html-css:baliser-les-listes-ordonnees-avec-ol-et-li]] * [[notices:html-css:baliser-les-listes-de-definitions-avec-dl-dt-et-dd]] === 8.2. Quotations === * [[notices:html-css:baliser-les-blocs-de-citations-avec-blockquote]] ==== 9. Tables ==== === 9.1. Formatting tables === * [[notices:html-css:veiller-a-l-ordre-de-lecture-des-tableaux-de-mise-en-forme]] * [[notices:html-css:ne-pas-utiliser-de-balises-ou-d-attributs-propres-aux-tableaux-de-donnees-dans-les-tableaux-de-presentation]] === 9.2. data tables === * [[notices:html-css:donner-un-titre-a-chaque-tableau-de-donnees-avec-la-balise-caption]] * [[notices:html-css:baliser-chaque-cellule-d-entete-de-ligne-et-de-colonne-avec-th]] * [[notices:html-css:utiliser-l-attribut-scope-pour-associer-les-cellules-aux-entetes-des-tableaux-de-donnees-simples]] * [[notices:html-css:utiliser-l-attribut-headers-et-id-pour-associer-les-cellules-aux-entetes-des-tableaux-de-donnees-complexes]] ==== 10. CSS usage ==== === 10.1. hidden content === * [[notices:html-css:ne-pas-utiliser-les-proprietes-css-display-ou-visibility-pour-masquer-un-contenu-qui-ne-peut-pas-etre-affiche-par-l-utilisateur]] === 10.2. Changing the appearance and size of text === * [[notices:html-css:utiliser-css-pour-mettre-en-forme-les-textes]] * [[notices:html-css:utiliser-uniquement-des-tailles-de-polices-relatives-em-rem-small-etc]] * [[notices:html-css:garantir-la-lisibilite-des-contenus-jusqu-a-200-de-grossissement]] === 10.3. Access to information === * [[notices:html-css:garantir-la-lisibilite-des-contenus-lorsque-les-images-ne-sont-pas-affichees]] * [[notices:html-css:garantir-la-comprehension-de-l-information-meme-lorsque-css-est-desactive]] ==== 11. Navigating with the keyboard ==== === 11.1. Tab order === * [[notices:html-css:veiller-a-ce-que-l-ordre-de-tabulation-suive-la-logique-de-l-ordre-de-lecture]] * [[notices:html-css:mettre-en-place-des-liens-d-evitement]] === 11.2. Visibility of the focus position === * [[notices:html-css:garantir-la-visibilite-de-la-prise-de-focus-au-clavier]] ==== 12. Embedded content ==== === 12.1. Multimedia content === * [[notices:html-css:prevoir-une-alternative-a-chaque-contenu-multimedia-embarque-video-audio-object-etc]] * [[notices:html-css:ne-pas-utiliser-le-parametre-wmode-avec-les-valeurs-transparent-ou-opaque]] ===== Appendixes ===== * [[notices:html-css:recommandations-additionnelles]] * [[notices:html-css:grille-de-correspondances-wcag-accessiweb-rgaa]]