Aller au contenu
English version
Wiki AcceDe Web
Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur
www.accede-web.com/notices/
!
Vous êtes ici:
Accueil
»
Notices
»
Notice d'accessibilité HTML et CSS
Table des matières
Notice d'accessibilité HTML et CSS
Notice en téléchargement
Introduction
Recommandations HTML et CSS
1. Structure générale
2. Métadonnées
3. Langues
4. Grammaire HTML et sémantique
5. Images
6. Liens et boutons
7. Formulaires
8. Listes et citations
9. Tableaux
10. Usage des CSS
11. Navigation au clavier
12. Contenus embarqués
Annexes
Évolutions futures de la notice
Discussion
Notice d'accessibilité HTML et CSS
Notice en téléchargement
Notice d’accessibilité HTML et CSS - Version 1.5 (PDF, 1,00 Mo)
.
Notice d’accessibilité HTML et CSS - Version 1.5 (DOC, 1,00 Mo)
.
Introduction
Contexte et objectifs
À qui s’adresse cette notice, comment l’utiliser ?
Remerciements
Licence d'utilisation
Contacts
Crédits
Recommandations HTML et CSS
1. Structure générale
1.1. Régions, titres et menus de navigation
1.1.1. Identifier les principales zones de la page avec l'attribut role
1.1.2. Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>
1.1.3. Structurer les menus de navigation avec des listes
1.2. Ordre du flux HTML
1.2.1 Écrire le code HTML en suivant la logique de l'ordre de lecture
1.2.2. Veiller à la cohérence de l'ordre du flux HTML d'une page à l'autre
2. Métadonnées
2.1. Titre de la page
2.1.1. Renseigner un <title> précis sur chaque page
2.2. Encodage
2.2.1. Veiller au bon codage de tous les caractères
3. Langues
3.1. Langue de la page
3.1.1. Renseigner la langue principale de la page avec l'attribut lang sur la balise <html>
3.2. Changements de langue
3.2.1. Utiliser l'attribut lang pour signaler les changements de langue
4. Grammaire HTML et sémantique
4.1. Conformité
4.1.1. Écrire un code HTML valide selon les règles de grammaire du DOCTYPE utilisé
4.2. Usage des attributs et balises HTML
4.2.1. Ne pas utiliser d'attributs ou de balises HTML destinés exclusivement à la mise en forme
4.2.2. Employer les balises HTML pour leur valeur sémantique
5. Images
5.1. Images décoratives et illustratives
5.1.1. Utiliser une alternative vide (alt="") sur les images décoratives et illustratives
5.2. Images informatives
5.2.1. Ne pas utiliser CSS pour afficher les images porteuses d'informations
5.2.2. Renseigner l'attribut alt sur les images informatives
5.3. Images mappées
5.3.1. Renseigner l’attribut alt de chaque image mappée et de ses balises <area />
5.3.2. Intégrer les balises <map> et <area /> juste après chaque image mappée dans le flux HTML
6. Liens et boutons
6.1. Intitulés des liens et des boutons
6.1.1. Rédiger des intitulés explicites pour les liens et les boutons
6.1.2. Utiliser en dernier recours l’attribut title pour expliciter les intitulés de liens et de boutons qui ne peuvent pas être rendus explicites
6.2. Documents en téléchargement
6.2.1. Intégrer le poids et le format des fichiers dans chaque lien et bouton permettant de les télécharger
6.3. Nouvelles fenêtres
6.3.1. Signaler l'ouverture des nouvelles fenêtres
7. Formulaires
7.1. Intitulés et champs
7.1.1. Utiliser la balise <label> ainsi que les attributs for et id pour associer les champs à leurs intitulés
7.1.2. Intégrer les informations utiles à la saisie directement dans les balises <label>
7.2. Regroupement et tri des informations
7.2.1. Regrouper et titrer les champs de même nature avec <fieldset> et <legend>
7.2.2. Ordonner les options de manière logique dans les listes déroulantes
7.3. Titre de la page
7.3.1. Mettre à jour le <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation
7.4. CAPTCHA (systèmes anti-spam)
7.4.1. Indiquer dans l'alternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA
8. Listes et citations
8.1. Listes
8.1.1. Baliser les listes non ordonnées avec <ul> et <li>
8.1.2. Baliser les listes ordonnées avec <ol> et <li>
8.1.3. Baliser les listes de définitions avec <dl>, <dt> et <dd>
8.2. Citations
8.2.1. Baliser les blocs de citations avec <blockquote>
9. Tableaux
9.1. Tableaux de mise en forme
9.1.1. Veiller à l'ordre de lecture des tableaux de mise en forme
9.1.2. Ne pas utiliser de balises ou d'attributs propres aux tableaux de données dans les tableaux de mise en forme
9.2. Tableaux de données
9.2.1. Donner un titre à chaque tableau de données avec la balise <caption>
9.2.2. Baliser chaque cellule d'entête de ligne et de colonne avec <th>
9.2.3. Utiliser l'attribut scope pour associer les cellules aux entêtes des tableaux de données simples
9.2.4. Utiliser les attributs headers et id pour associer les cellules aux entêtes des tableaux de données complexes
10. Usage des CSS
10.1. Contenus masqués
10.1.1. Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l'utilisateur
10.2. Modification de l'apparence et de la taille du texte
10.2.1. Utiliser CSS pour mettre en forme les textes
10.2.2. Utiliser uniquement des tailles relatives (em, %, small, etc.) pour les polices de caractères
10.2.3. Garantir la lisibilité des contenus même lorsque la taille du texte est doublée
10.3. Accès à l'information
10.3.1. Garantir la lisibilité des contenus lorsque les images ne sont pas affichées
10.3.2. Garantir la compréhension de l'information même lorsque CSS est désactivé
11. Navigation au clavier
11.1. Ordre de tabulation
11.1.1. Veiller à ce que l'ordre de tabulation suive la logique de l'ordre de lecture
11.1.2. Mettre en place des liens d'évitement
11.2. Visibilité de la prise de focus
11.2.1. Garantir la visibilité de la prise de focus au clavier
12. Contenus embarqués
12.1. Contenus multimédia
12.1.1. Prévoir une alternative à chaque contenu multimédia (<video>, <audio>, <object>, etc.)
12.1.2. Ne pas utiliser le paramètre wmode avec les valeurs transparent ou opaque
Annexes
Recommandations HTML et CSS additionnelles
Grille de correspondances entre les recommandations HTML et CSS et WCAG/AccessiWeb/RGAA
Évolutions futures de la notice
boite-a-idees
notices/html-css.txt · Dernière modification: Le 11/06/2013 à 19:14 par Sébastien Delorme (Atalan)