HTML et CSS

Table des matières

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 header
  - 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
- 1.3 Permettre la redimension de la page
2. Métadonnées
- 2.1 Titre de la page
  - 2.1.1 Fournir un titre précis sur chaque page
- 2.2 Encodage
  - 2.2.1 Veiller au bon encodage de tous les caractères
- 2.3 Renseigner sur le sens de lecture
3. Langues
- 3.1 Langue de la page
  - 3.1.1 Renseigner sur la langue principale de la page avec l'attribut « lang » sur la balise
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 et icônes
- 5.1 Images décoratives et illustratives
  - 5.1.1 Utiliser une alternative vide sur les images décoratives et illustratives
- 5.2 Images informatives
  - 5.2.1 Ne pas utiliser les CSS pour afficher les images informatives
  - 5.2.2 Préciser un text alternatif sur les images informatives
- 5.3 Images mappées
  - 5.3.1 Préciser l’attribut « alt » de chaque image mappée et de ses balises
  - 5.3.2 Intégrer les balises <map> et <area /> immédiatement 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 Compléter les liens et les boutons non explicites
- 6.2 Documents en téléchargement
  - 6.2.1 Indiquer le poids et le format de chaque document en téléchargement
- 6.3 Nouvelles fenêtres
  - 6.3.1 Signaler l'ouverture des nouvelles fenêtres
- 6.4 Différencier les boutons des liens
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 à leur intitulé
  - 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 les balises <fieldset> et <legend>
  - 7.2.2 Ordonner les options de manière logique dans les listes déroulantes
  - CAPTURES D'ÉCRAN
- 7.3 Titre de la page
  - 7.3.1 Mettre à jour la balise <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation
- 7.4 CAPTCHA (systèmes antispam)
  - 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 à puces avec les balises <ul> et <li>
  - 8.1.3 Baliser les listes de définitions avec les balises <dl>, <dt> et <dd>
  - 8.2.2 Baliser les courtes citations avec la balise <q>
9. Tableaux
- 9.1 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'en-tête de ligne et de colonne avec la balise <th>
  - 9.2.3 Utiliser l'attribut « scope » pour associer les cellules aux en-têtes des tableaux de données simples
  - 9.2.4 Utiliser les attributs « headers » et « id » pour associer les cellules aux en-tê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 les 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 les CSS sont désactivés
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.2 Contenus intégrés dans une balise <iframe>

Contexte et objectifs

Cette notice regroupe l’ensemble des spécifications à prendre en compte lors de l’intégration HTML/CSS d’un site ou d’une application web (gabarits HTML, dynamisation des gabarits, etc.), quel que soit le périphérique d’affichage ciblé (ordinateur, mobile, etc.).

À qui s’adresse cette notice, comment l’utiliser?

Ce document doit être transmis aux intervenants et/ou prestataires réalisant les spécifications techniques, les gabarits HTML/CSS et les différents développements techniques des interfaces. Il vient en complément aux spécifications techniques d’un projet. Les recommandations peuvent être complétées ou retirées selon les contextes d’utilisation, ce travail peut être notamment réalisé par la maîtrise d’ouvrage.

Les recommandations doivent être prises en compte en phase d’intégration HTML/CSS, et pour certaines d’entre elles, lors de la dynamisation des pages lorsque les gabarits sont affectés à un outil de gestion de contenu (CMS).

Certaines annotations viennent compléter le document, celles-ci sont nécessaires pour la compréhension de chaque recommandation :

REMARQUES

Les remarques permettent de compléter les recommandations en apportant des précisions applicables à des situations techniques précises et ponctuelles.

HTML5

Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.

ASTUCES

Les astuces ne sont pas directement liées à l’accessibilité, mais leur prise en compte permet généralement d’améliorer la qualité générale des interfaces ou de faciliter la prise en compte de l’accessibilité sur les étapes suivantes du projet. À l’inverse, les recommandations de ce document, bien que dédiées à l’accessibilité, rejoignent souvent de bonnes pratiques en matière d’ergonomie, d’expérience utilisateur, de performance ou de référencement.

ASTUCES - BONIFICATION

Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.

ATTENTION

Les avertissements mettent en avant des points particuliers qu’il est important de respecter ou des pièges à éviter pour garantir une bonne accessibilité.

CAPTURES D'ÉCRAN

Des exemples provenant d’ICI Radio-Canada, ICI Musique, ICI tou.tv, ou d’autres exemples pertinents sont inclus dans le document.

RESSOURCES

Des liens sont inclus pour faciliter l'application des normes : ils mènent soit à des sites externes (lectures, meilleures pratiques, etc.), ou font référence à d'autres sections du présent guide.

Mention légale

La société Atalan est l'auteure et la responsable du site web : www.accede-web.com. Les documents disponibles dans Repères sont une version modifiée des normes d’accessibilité de www.accede-web.com.

Si vous avez des questions ou des commentaires, merci de les adresser à accessibilite@radio-canada.ca. Nous y répondrons dès que possible.