Notice d'accessibilité HTML et CSS

Recommandations HTML et CSS additionnelles▲

Dans un objectif d'être pragmatiques et directement opérationnels, plusieurs critères d'accessibilité présents dans les référentiels d'accessibilité n'ont pas été conservés dans les recommandations de cette notice. Il s'agit de critères rarement applicables dans un projet web ou de critères moins prioritaires. Ils sont cependant listés ci-dessous et seront détaillés ultérieurement sur ce wiki.

Recommandations additionnelles pour l'atteinte du niveau A (WCAG) ou Bronze (AccessiWeb)▲

Baliser les citations en ligne avec <q>.
Résumer le contenu et la structure de chaque tableau de données avec l'attribut summary.
Renseigner l'attribut title sur chaque <iframe>.
Renseigner l'attribut title sur chaque <frame>.
Regrouper les options de même nature avec <optgroup> dans les <select>.
Indiquer la langue de chaque document en téléchargement rédigé dans une langue étrangère.
Doubler les images dotées d'un attribut ismap avec des liens alternatifs.
Renseigner le sens de lecture principal de la page avec l'attribut dir="ltr" (gauche à droite) ou dir="rtl" (droite à gauche) sur la balise <html>.
Utiliser l'attribut dir pour signaler les changements de sens de lecture dans le corps de la page.
Identifier les principales zones de la page avec l'attribut id ou une ancre nommée.

Recommandations additionnelles pour l'atteinte du niveau AA (WCAG) ou Argent (AccessiWeb)▲

Aucune recommandation additionnelle au niveau AA (WCAG) ou Argent (AccessiWeb).

Recommandations additionnelles pour l'atteinte du niveau AAA (WCAG) ou Or (AccessiWeb)▲

Prévoir des intitulés de liens explicites hors contexte et sans l'utilisation de l'attribut title.
Baliser les définitions avec <dfn>.
Baliser les abréviations avec <abbr>.
Baliser les acronymes avec <acronym>.
Limiter la largeur des textes à 80 caractères, quelle que soit la taille du texte.
Prévoir un interligne d'au moins 1,5 fois la taille du texte, quelle que soit la taille du texte.
Prévoir une marge entre les paragraphes d'au moins 1,5 fois la valeur de l'interligne, quelle que soit la taille du texte.
Garantir l'absence de barre de défilement horizontale même lorsque la taille du texte est doublée par l'utilisateur.
Garantir des longueurs de lignes inférieures à 80 caractères lorsque l'utilisateur réduit la largeur de la fenêtre du navigateur.

Grille de correspondances entre les recommandations HTML et CSS et WCAG/AccessiWeb/RGAA▲

L'ensemble des recommandations présentées dans ce document est tiré des référentiels d'accessibilité WCAG, AccessiWeb et RGAA.

Afin d'obtenir un niveau de lecture selon les niveaux de ces référentiels (A, AA, AAA ou Bronze, Argent, Or) une grille de correspondance entre les recommandations HTMLHyperText Markup Langage et CSSCascading Style Sheets d'AcceDe Web et les critères de ces référentiels est maintenue sur ce wiki.

Recommandations AcceDe Web	WCAG			AccessiWeb		RGAA
	Critère	Technique	Niveau	Critère	Technique	Critère	Technique
Structure générale
Régions, titres et menus de navigation
Identifier les principales zones de la page avec l'attribut role	2.4.1		A
Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>	1.3.1, 2.4.1, 2.4.6, 2.4.10	H69, G130, H42, G141	A, AA, AAA	9.1	Bronze	10.1, 10.2, 10.3, 10.4	A
Structurer les menus de navigation avec des listes	1.3.1	H48	A	9.2	Bronze
Ordre du flux HTML
Écrire le code HTML en suivant la logique de l'ordre de lecture	1.3.2, 2.4.3	G59, F1	A	10.3	Bronze	7.2	A
Veiller à la cohérence de l'ordre du flux HTML d'une page à l'autre	3.2.3	G61, F66	AA	12.2	Argent	6.22	AA
Métadonnées
Titre de la page
Renseigner un <title> précis sur chaque page	2.4.2	G88, H25, F25	A	8.5, 8.6	Bronze	9.6, 9.7	A
Encodage
Veiller au bon codage de tous les caractères
Langues
Langue de la page
Renseigner la langue principale de la page avec l'attribut lang sur la balise <html>	3.1.1	H57	A	8.3, 8.4	Bronze	9.8	A
Changements de langue
Utiliser l'attribut lang pour signaler les changements de langue	3.1.2	H58	AA	8.7, 8.8	Argent	12.1, 12.2	AA
Grammaire HTML et sémantique
Conformité
Écrire un code HTML valide selon les règles de grammaire du DOCTYPE utilisé	4.1.1, 4.1.2	G134, G192, H74, H75, H88, F70, F77	A	8.1, 8.2	Bronze	9.1, 9.2, 9.3, 9.4, 9.5	A
Usage des attributs et balises HTML
Ne pas utiliser d'attributs ou de balises HTML destinés exclusivement à la mise en forme	1.3.1	G140, C22	A	10.1	Bronze	7.8	A
Employer les balises HTML pour leur valeur sémantique	1.3.1	G115, F43	A	8.9	Bronze	7.9	A
Images
Images décoratives et illustratives
Utiliser une alternative vide (alt="") sur les images décoratives et illustratives	1.1.1	H37, H67, F38, F39, F65	A	1.1, 1.2	Bronze	4.1, 4.5	A
Images informatives
Ne pas utiliser CSS pour afficher les images porteuses d'informations	1.1.1, 1.3.1	F3, F87	A	10.2	Bronze	7.1	A
Renseigner l'attribut alt sur les images informatives	1.1.1	G73, G74, G92, G94, G95, G196, H37, F30, F38, F65, F67	A	1.1, 1.2	Bronze	4.1, 4.3, 4.4, 4.7, 4.8	A
Images mappées
Renseigner l'attribut alt de chaque image mappée et de ses balises <area />	1.1.1	G94, G95, H24, H37, F30, F38, F65	A	1.3, 6.1, 6.4, 6.6, 11.9	Bronze	4.2, 4.3, 6.13, 6.15, 6.16	A
Renseigner l'attribut alt de chaque image mappée et de ses balises <area />
Liens et boutons
Intitulés des liens et des boutons
Rédiger des intitulés explicites pour les liens et les boutons	1.1.1, 2.4.4, 4.1.2	G91, G94, G197, H30, F30, F89	A	1.3, 6.1, 6.4, 6.6, 11.9	Bronze	4.2, 4.3, 6.13, 6.15, 6.16	A
Utiliser en dernier recours l'attribut title pour expliciter les intitulés de liens et de boutons qui ne peuvent pas être rendus explicites	2.4.4, 4.1.2	H33	A	6.2, 6.4, 11.9	Bronze	6.13, 6.15	A
Documents en téléchargement
Indiquer le poids et le format de chaque document en téléchargement	2.4.4	H33	A	13.6	Bronze	6.26, 6.27, 6.28	A
Nouvelles fenêtres
Signaler l'ouverture des nouvelles fenêtres	2.4.4	H33, H83	A	13.2	Bronze	6.2, 6.3	A
Formulaires
Intitulés et champs
Utiliser la balise <label> ainsi que les attributs for et id pour associer les champs à leurs intitulés	1.1.1, 1.3.1, 2.4.6, 3.2.4, 3.3.2, 4.1.2	G131, H44, H65, F17, F31, F82, F86	A, AA	11.1, 11.2, 11.3	Bronze, Argent	3.10, 3.11, 3.12, 4.11	A, AA
Intégrer les informations utiles à la saisie directement dans les balises <label>
Regroupement et tri des informations
Regrouper et titrer les champs de même nature avec <fieldset> et <legend>	1.3.1, 3.3.2	H71	A	11.5, 11.6, 11.7	Bronze	3.4, 3.5, 3.6	A
Ordonner les options de manière logique dans les listes déroulantes
Titre de la page
Mettre à jour le <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation	2.4.2	G88, H25, F25	A	8.5, 8.6, 11.10	Bronze	9.6, 9.7	A
CAPTCHA (systèmes anti-spam)
Indiquer dans l'alternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA	1.1.1	G100, G143	A	1.4	Bronze	4.10	A
Listes et citations
Listes
Baliser les listes non ordonnées avec <ul> et <li>	1.3.1	H48	A	9.2	Bronze	10.5	A
Baliser les listes ordonnées avec <ol> et <li>	1.3.1	H48	A	9.2	Bronze	10.6	A
Baliser les listes de définitions avec <dl>, <dt> et <dd>	1.3.1	H40, H48	A	9.2	Bronze	10.7	A
Citations
Baliser les blocs de citations avec <blockquote>	1.3.1	H49	A	9.5	Bronze	10.8	A
Tableaux
Tableaux de mise en forme
Veiller à l'ordre de lecture des tableaux de mise en forme	1.3.2	F49	A	5.3	Bronze	11.6	A
Ne pas utiliser de balises ou d'attributs propres aux tableaux de données dans les tableaux de mise en forme	1.3.1	F46	A	5.8	Bronze	11.4	A
Tableaux de données
Donner un titre à chaque tableau de données avec la balise <caption>	1.3.1	H39	A	5.4, 5.5	Bronze	11.7, 11.9	A
Baliser chaque cellule d'entête de ligne et de colonne avec <th>	1.3.1	H51	A	5.6	Bronze	11.1	A
Utiliser l'attribut scope pour associer les cellules aux entêtes des tableaux de données simples	1.3.1	H63	A	5.7	Bronze	11.2	A
Utiliser les attributs headers et id pour associer les cellules aux entêtes des tableaux de données complexes	1.3.1	H43	A	5.7	Bronze	11.2, 11.3	A
Usage des CSS
Contenus masqués
Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l'utilisateur	4.1.2		A	10.13	Bronze	7.18	A
Modification de l'apparence et de la taille du texte
Utiliser CSS pour mettre en forme les textes	1.4.5, 1.4.9	G140, C22, C30	AA	1.8, 1.9	Argent, Or	7.6, 7.7	AA, AAA
Utiliser uniquement des tailles relatives (em, %, small, etc.) pour les polices de caractères	1.4.4	C14, F80	AA	10.4	Argent	7.14	AA
Garantir la lisibilité des contenus même lorsque la taille du texte est doublée	1.4.4	F69, F80, G179	AA	10.4	Argent	7.13	AA
Accès à l'information
Garantir la lisibilité des contenus lorsque les images ne sont pas affichées	1.1.1, 1.3.1		A	10.2	Bronze	7.3	A
Garantir la compréhension de l'information même lorsque CSS est désactivé	1.3.1	G59, F1, F87	A	10.2, 10.3	Bronze	7.1, 7.2, 7.3	A
Navigation au clavier
Ordre de tabulation
Veiller à ce que l'ordre de tabulation suive la logique de l'ordre de lecture	2.4.3	G59, H4, C27, F44	A	12.13	Bronze	6.24, 8.6	A
Mettre en place des liens d'évitement	2.4.1	G1, G123, G124	A	12.11	Bronze	6.31, 6.32, 6.33	A, AA
Visibilité de la prise de focus
Garantir la visibilité de la prise de focus au clavier	1.4.1, 2.4.7	G165, G183, G195, C15, F78	A, AA	10.7	Bronze	7.10, 7.11	A
Contenus embarqués
Contenus multimédia
Prévoir une alternative à chaque contenu multimédia (<video>, <audio>, <object>, etc.)	1.1.1, 1.2.1, 1.2.3, 1.2.8, 1.2.9	G58, G69, G150, G151, G158, G159, H27, H35, H46, H53, F67, F74	A, AAA	4.1, 4.2, 4.5, 4.6, 4.13, 4.14, 4.16, 4.17	Bronze, Argent, Or	5.2, 5.3, 5.4, 5.11, 5.12, 12.3	A
Ne pas utiliser le paramètre wmode avec les valeurs transparent ou opaque	4.1.2		A	4.22	Bronze	5.16	A
Recommandations additionnelles
Niveau A (WCAG) ou Bronze (AccessiWeb)
Baliser les citations en ligne avec <q>	1.3.1	H49	A	9.5	Bronze	10.8	A
Résumer le contenu et la structure de chaque tableau de données avec l'attribut summary	1.3.1	H73	A	5.1, 5.2	Bronze	11.8, 11.10	A
Renseigner l'attribut title sur chaque <iframe>	4.1.2	H64	A	2.1, 2.2	Bronze	1.1, 1.2	A
Renseigner l'attribut title sur chaque <frame>	4.1.2	H64	A	2.1, 2.2	Bronze	1.1, 1.2	A
Regrouper les options de même nature avec <optgroup> dans les <select>	1.3.1	H85	A	11.8	Bronze	3.7, 3.8, 3.9	A
Indiquer la langue de chaque document en téléchargement rédigé dans une langue étrangère				13.6	Bronze	6.28	A
Doubler les images dotées d'un attribut ismap avec des liens alternatifs	2.1.1, 2.1.3	F54	A	6.5	Bronze	6.1	A
Utiliser l'attribut dir pour signaler les changements de sens de lecture dans le corps de la page	1.3.2	H56	A	8.10	Bronze
Renseigner le sens de lecture principal de la page avec l'attribut dir="ltr" (gauche à droite) ou dir="rtl" (droite à gauche) sur la balise <html>	1.3.2	H56	A	8.10	Bronze
Identifier les principales zones de la page avec l'attribut id ou une ancre nommée				12.10	Bronze	6.30	A
Niveau AA (WCAG) ou Argent (AccessiWeb)
Aucune recommandation additionnelle au niveau AA (WCAG) ou Argent (AccessiWeb).
Niveau AAA (WCAG) ou Or (AccessiWeb)
Prévoir des intitulés de liens et de boutons explicites hors contexte et sans l'utilisation de l'attribut title	2.4.9	G91	AAA	6.3	Or	6.14	AAA
Baliser les définitions avec <dfn>	3.1.3	H54	AAA	13.9, 13.10	Or	12.4	AAA
Baliser les abbréviations avec <abbr>	3.1.4	H28	AAA	9.3, 9.4	Or	10.9, 10.11	AAA
Baliser les abbréviations avec <acronym>	3.1.4	H28	AAA	9.3, 9.4	Or	10.10, 10.12	AAA
Limiter la largeur des textes à 80 caractères, quelle que soit la taille du texte	1.4.8	H87, C20	AAA	10.11	Or	7.16	AAA
Prévoir un interligne d'au moins 1,5 fois la taille du texte, quelle que soit la taille du texte	1.4.8	C21	AAA	10.12	Or	7.17	AAA
Prévoir une marge entre les paragraphes d'au moins 1,5 fois la valeur de l'interligne, quelle que soit la taille du texte	1.4.8	C21	AAA	10.12	Or	7.17	AAA
Garantir l'absence de barre de défilement horizontale même lorsque la taille du texte est doublée par l'utilisateur	1.4.8	C26, C24	AAA	10.10	Or	7.15	AAA
Garantir des longueurs de lignes inférieures à 80 caractères lorsque l'utilisateur réduit la largeur de la fenêtre du navigateur	1.4.8	C26, C24	AAA	10.11	Or	7.16	AAA

Le contenu de cet article est rédigé par AcceDe Web et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.