Vous consultez actuellement l'aide de la version:

WCAG 2.0 regroupe un ensemble de règles et de critères de réussite qui ne se rattachent pas à une technologie particulière visant à rendre les contenus web plus accessibles aux personnes en situation de handicap.

Les contenus sont classés selon trois niveaux de conformité : Niveau A (le plus bas), Niveau AA et Niveau AAA (le plus élevé). Brièvement, les niveaux se définissent comme suit :

  • Niveau A : votre site atteint un niveau d’accessibilité minimum de base. Pour atteindre ce niveau, tous les critères de réussite du niveau A doivent être satisfaits.
  • Niveau AA : il s’agit d’un idéal d’accessibilité à atteindre : votre site est accessible par la plupart des personnes dans la plupart des situations à l’aide de la plupart des technologies. Pour atteindre ce niveau, tous les critères de réussite des niveaux A et AA doivent être satisfaits.
  • Niveau AAA : votre site atteint un très haut niveau d’accessibilité. Pour atteindre ce niveau, tous les critères de réussite des niveaux A, AA et AAA doivent être satisfaits.

Lors de sa création, vous devez déterminer à quel niveau général votre site doit se conformer.

La section suivante présente les règles WCAG 2.0 ainsi que les critères de réussite associés liés aux niveaux de conformité A et AA.

Remarque :

Il n’est pas possible, pour certains types de contenu, de satisfaire à tous les critères de réussite du niveau de conformité AAA ; celui-ci n’est donc pas recommandé à titre de politique générale.

Remarque :

Dans ce document, nous utilisons :

Principe 1 : perceptible

Équivalents textuels (1.1)

Contenu non textuel (1.1.1)

  • Critère de réussite 1.1.1
  • Niveau A
  • Contenu non textuel : tout contenu non-textuel présenté à l’utilisateur a un équivalent textuel qui remplit une fonction équivalente sauf dans les situations énumérées ci-dessous.

Objectif – Contenu non textuel (1.1.1)

Le contenu d’une page web peut être proposé dans différents formats non textuels (photos, vidéos, animations, tableaux et graphiques). Les personnes aveugles ou malvoyantes ne sont pas en mesure de voir le contenu non textuel, mais elles peuvent accéder au contenu textuel en le faisant lire par un lecteur d’écran ou sous forme tactile dans un appareil d’affichage en braille. Ainsi, en proposant des équivalents textuels pour le contenu graphique, les personnes qui ne voient pas le contenu graphique peuvent accéder à une version équivalente des informations véhiculées par le contenu.

Autre avantage utile : les équivalents textuels permettent aux moteurs de recherche d’indexer le contenu non textuel.

Comment procéder – Contenu non textuel (1.1.1)

Pour les images statiques, la règle de base consiste à fournir un équivalent textuel. Vous pouvez pour ce faire utiliser le champ Texte de remplacement :

Remarque :

Certains des composants prêts à l’emploi, tels que le Carrousel et le Diaporama, ne permettent pas d’ajouter un texte de remplacement aux images. Lors de la mise en œuvre de tels composants pour votre instance AEM, votre équipe de développement doit les configurer pour qu’ils prennent en charge l’attribut alt de sorte que les auteurs puissent l’ajouter au contenu (voir Ajout de la prise en charge des éléments et attributs HTML supplémentaires).

Le champ Texte de remplacement est disponible dans l’onglet des propriétés d’image Avancées de la boîte de dialogue du composant Image :

Boîte de dialogue de modification du composant Image dans l’interface utilisateur classique ; présente le champ Texte de remplacement.

AEM ajoute un texte de remplacement à vos images par défaut. Dans l’interface utilisateur classique, il existe deux scénarios de création de l’attribut par défaut (bien que la valeur par défaut puisse ne pas être suffisante comme équivalent et devra être modifiée dans l’onglet des propriétés d’image Avancées ) :

  • Fichier :
    Une image est transférée depuis le disque dur de l’utilisateur. Si vous ajoutez un composant d’image à une page, puis choisissez une image sur votre disque dur (ou une autre source), la valeur par défaut du texte de remplacement est fichier. Ceci doit être modifié dans l’onglet des propriétés d’image Avancées. Là encore, cette valeur ne s’affiche pas dans le champ Texte de remplacement ; en revanche, si elle est modifiée, la nouvelle valeur s’affiche dans le champ.
  • Ressource :
    Une image est ajoutée depuis le référentiel des ressources numériques. Si vous faites glisser une image du référentiel des ressources numériques vers une page web, les valeurs Titre et Texte de remplacement pour cette image sont récupérées dans les métadonnées de cette image.

Remarque :

Dans les deux scénarios ci-dessus, la valeur Texte de remplacement par défaut n’est pas visible dans l’onglet des propriétés d’image Avancées. Pour modifier la valeur par défaut, il vous suffit d’entrer une nouvelle valeur dans le champ Texte de remplacement.

Remarque :

Si votre image est purement décorative (voir Création d’équivalents textuels adaptés), entrez un espace dans le champ Texte de remplacement à l’aide de la barre d’espace. Un attribut alt est ainsi créé, qui invite un lecteur d’écran à ignorer l’image.

Création d’équivalents textuels adaptés

Il existe diverses formes de contenu non textuel. Par conséquent, la valeur de l’équivalent textuel dépend du rôle du graphique dans la page web. Voici quelques-unes des règles de base à respecter :

  • Les équivalents textuels doivent être succincts, tout en communiquant clairement l’information essentielle du contenu non textuel.
  • Il est préférable d’éviter les descriptions trop longues (plus de 100 caractères). Si un équivalent textuel doit être plus détaillé :
    • donnez une brève description dans l’équivalent textuel ;
    • proposez une description plus longue dans le texte ailleurs sur la même page ou dans une page web distincte. Renvoyez vers cette description individuelle en transformant l’image en lien ou en plaçant un lien textuel près de l’image.
  • L’équivalent textuel ne doit pas répliquer le contenu fourni sous forme de texte à proximité sur la même page. N’oubliez pas que nombre d’images sont des illustrations de points déjà traités dans le texte d’une page ; un équivalent textuel détaillé existe donc peut-être déjà.
  • Si le contenu non textuel est un lien vers une autre page ou un autre document et qu’il n’existe pas de texte faisant partie dudit lien, l’équivalent textuel de l’image doit indiquer la destination du lien, et non décrire l’image.
  • Si le contenu non textuel est contenu dans un bouton et qu’il n’existe pas de texte faisant partie dudit bouton, l’équivalent textuel de l’image doit indiquer la fonction du bouton, et non décrire l’image.
  • Il est tout à fait acceptable de spécifier un équivalent textuel vide (nul) pour une image, à condition toutefois que l’image n’ait pas besoin d’équivalent textuel (s’il s’agit par exemple d’une image purement décorative) ou si l’équivalent textuel existe déjà dans le texte de la page.

L’ébauche du document W3C: HTML5 Techniques for providing useful text alternatives (techniques pour spécifier des équivalents textuels utiles ; en anglais) répertorie des détails et des exemples d’équivalents textuels appropriés pour différents types d’images.

Voici quelques-uns des types spécifiques de contenu non textuel auquel un équivalent textuel doit être associé :

  • Illustrations photographiques :
    Il s’agit d’images de personnes, d’objets ou de lieux. Pensez au rôle de la photo dans la page ; un équivalent textuel approprié pourra être Photo de [objet], mais peut aussi dépendre du texte environnant.

  • Icônes :
    Certains petits pictogrammes (images) communiquent parfois des informations spécifiques. Ils doivent être utilisés de manière uniforme sur une page et un site. Toutes les instances de l’icône sur une page ou un site doivent avoir le même équivalent textuel bref et succinct, sauf si cela duplique de manière superflue le texte adjacent.

  • Tableaux et graphiques :
    Ils représentent généralement des données numériques. Pour proposer un équivalent textuel, vous pouvez par exemple inclure un bref résumé des principales tendances affichées dans le graphique ou diagramme. Si nécessaire, fournissez une description plus détaillée du texte dans le champ Description de l’onglet des propriétés d’image Avancées. En outre, vous pouvez fournir les données sources sous forme tabulaire ailleurs dans la page ou le site.

    Exemple d’un graphique. La meilleure approche pour fournir un équivalent est présentée ci-dessous.

    Pour spécifier un équivalent textuel pour cet exemple de graphique, ajoutez un texte alt concis à l’image, puis un équivalent textuel complet juste après l’image.

    <p><img src="figure1.gif" alt="Figure 1" ></p>
    <p> Figure 1. Distribution of Articles by Journal Category.
    Pie chart: Language=68%, Education=14% and Science=18%.</p>

    Remarque :

    L’extrait de code ci-dessus vise uniquement à illustrer la commande. Il est préférable d’utiliser le composant Image plutôt que la référence img src spécifiée ci-dessus.

    Dans AEM, ce résultat peut être obtenu à l’aide d’une combinaison des champs Texte de remplacement et Description de la boîte de dialogue de configuration de l’image, comme dans Compatibilité - Contenu non textuel (1.1.1).

  • Cartes, diagrammes, organigrammes :
    Pour les graphiques communiquant des données spatiales (qui illustrent par exemple les relations entre les objets ou un processus), veillez à ce que le message clé soit fourni dans un format textuel. Pour les cartes, il est souvent difficile de fournir un équivalent textuel complet. Si toutefois la carte est fournie pour aider le destinataire du document à se rendre à un endroit particulier, l’équivalent textuel de l’image de la carte peut indiquer brièvement Carte de X, puis spécifier un itinéraire vers ce lieu dans le texte ailleurs sur la page ou dans le champ Description dans l’onglet Avancé du composant Image.

  • CAPTCHA :
    L’acronyme anglais CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) désigne un test servant à déterminer si le contenu est consulté par une personne plutôt que par un ordinateur. Ce contrôle de sécurité utilisé sur les pages web pour distinguer les humains des logiciels malveillants peut constituer un obstacle à l’accessibilité. Il s’agit d’images obligeant les utilisateurs à décrire ce qu’ils voient pour pouvoir réussir le test de sécurité. Il n’est évidemment pas possible de fournir un équivalent textuel pour l’image. Vous devez par conséquent envisager des alternatives non graphiques.
    Le W3C émet plusieurs suggestions, comme celles énumérées ci-dessous. Chacune de ces approches a ses propres avantages et inconvénients.

    • Énigmes logiques
    • Utilisation d’une sortie audio plutôt que d’images
    • Comptes d’utilisateur limités et filtres de courrier indésirable
  • Images d’arrière-plan :
    Elles impliquent l’utilisation de feuilles de style en cascade CSS (Cascading Style Sheet) plutôt que de code HTML. Il n’est donc pas possible de spécifier un équivalent textuel. Par conséquent, les images d’arrière-plan ne doivent pas communiquer d’informations textuelles importantes. Sinon, ces informations doivent aussi être spécifiées dans le texte de la page.
    Cependant, il est important qu’un arrière-plan alternatif s’affiche si l’image ne peut pas s’afficher.

    Remarque :

    Le niveau de contraste entre l’arrière-plan et le texte au premier plan doit être suffisant. Ceci est décrit de manière plus détaillée à la section Contraste (minimum) (1.4.3).

En savoir plus – Contenu non textuel (1.1.1)

Média temporel (1.2)

Cette section traite du contenu web temporel, notamment le contenu que l’utilisateur peut lire (contenu vidéo, audio et animé, par exemple) et qui peut être pré-enregistré ou en direct.

Contenu seulement audio ou vidéo (pré-enregistré) (1.2.1)

  • Critère de réussite 1.2.1
  • Niveau A
  • Contenu seulement audio ou vidéo (pré-enregistré) : pour des médias pré-enregistrés seulement audio et pré-enregistrés seulement vidéo, sauf si l’audio ou la vidéo est un média de remplacement pour un texte et qu’ils sont clairement identifiés comme tels, ce qui suit s’applique :
    • Contenu pré-enregistré seulement audio : fournir une version de remplacement pour un média temporel, présentant une information équivalente au contenu seulement audio.
    • Contenu pré-enregistré seulement vidéo : fournir, soit une version de remplacement pour un média temporel, soit une piste audio (présentant une information équivalente) pour un contenu pré-enregistré seulement vidéo.

Objectif – Contenu seulement audio ou vidéo (pré-enregistré) (1.2.1)

Les personnes suivantes peuvent éprouver des problèmes à accéder au contenu vidéo et audio :

  • Les personnes malvoyantes lorsqu’il n’y a aucune piste audio ou si la piste audio ne suffit pas à les informer de ce qui se passe dans la vidéo ou l’animation.
  • Les personnes malentendantes ou sourdes, qui ne peuvent pas écouter la piste audio.
  • Les personnes qui peuvent écouter la piste audio, mais qui ne la comprennent pas (si par exemple elle est dans une langue qu’elles ne comprennent pas).

Les personnes qui utilisent des navigateurs ou des périphériques qui ne prennent pas en charge la lecture du contenu dans des formats multimédias spécifiques (Adobe Flash par exemple) peuvent aussi ne pas avoir accès au contenu vidéo ou audio.

En proposant ces informations dans un autre format (texte par exemple, ou audio pour un contenu vidéo sans audio), elles seront accessibles par les personnes qui ne sont pas en mesure d’accéder au contenu original.

Comment procéder – Contenu seulement audio ou vidéo (pré-enregistré) (1.2.1)

  • Si le contenu est un contenu audio pré-enregistré sans vidéo (podcast par exemple) :
    • Fournissez un lien immédiatement avant ou après le contenu vers une transcription textuelle du contenu audio.
      La transcription doit être une page HTML avec un équivalent textuel de tout le contenu non parlé important et parlé, et indiquer en outre qui parle, avec les expressions vocales et une description du décor et de tout autre contenu audio significatif.
  • Si le contenu est une animation ou une vidéo pré-enregistrée sans audio :
    • Fournissez un lien immédiatement avant ou après le contenu vers une description textuelle équivalente des informations communiquées par la vidéo.
    • Ou fournissez une audio-description équivalente dans un format audio fréquemment utilisé (MP3 par exemple).

Remarque :

Si le contenu audio ou vidéo est fourni comme alternative au contenu qui existe déjà dans un autre format sur une page web, il n’est pas nécessaire d’adhérer aux exigences ci-dessus. Si, par exemple, une vidéo illustre une liste d’instructions textuelles, il n’est pas nécessaire d’ajouter un équivalent puisque les instructions textuelles agissent comme équivalent de la vidéo.

L’ajout de contenu multimédia (Flash notamment) dans vos pages web AEM revient à ajouter une image. Toutefois, puisque le contenu multimédia représente bien davantage qu’une image fixe, il existe différents paramètres et options pour contrôler la lecture du multimédia.

Remarque :

Si vous utilisez un contenu multimédia informatif, vous devez également créer des liens vers les équivalents. Par exemple, pour inclure une transcription textuelle, créez une page HTML où afficher la transcription, puis ajoutez un lien en regard ou en dessous du contenu audio.

En savoir plus – Contenu seulement audio ou vidéo (pré-enregistré) (1.2.1)

Sous-titres (pré-enregistrés) (1.2.2)

  • Critère de réussite 1.2.2
  • Niveau A
  • Sous-titres (pré-enregistrés) : fournir des sous-titres pour tout contenu audio pré-enregistré dans un média synchronisé, excepté lorsque le média est un média de remplacement pour un texte et qu’il est clairement identifié comme tel.

Objectif – Sous-titres (pré-enregistrés) (1.2.2)

Les personnes sourdes ou malentendantes n’auront pas accès au contenu audio, ou y auront accès avec de grandes difficultés. Les sous-titres sont des équivalents textuels au contenu audio parlé et non parlé ; ils s’affichent à l’écran au moment approprié durant la vidéo. Ils permettent aux personnes qui ne peuvent pas écouter le contenu audio de comprendre ce qui se passe.

Remarque :

Les sous-titres ne sont pas obligatoires s’il existe déjà des équivalents textuels ou non textuels adaptés (qui fournissent directement des informations équivalentes) sur la même page que la vidéo ou l’animation.

Comment procéder – Sous-titres (pré-enregistrés) (1.2.2)

Les sous-titres peuvent être :

  • Intégrés : toujours visibles pendant la lecture de la vidéo.
  • Non intégrés : les sous-titres peuvent être activés ou désactivés par l’utilisateur.

Ajoutez des sous-titres non intégrés chaque fois que cela est possible, car les utilisateurs peuvent ainsi décider s’ils souhaitent les afficher.

Pour les sous-titres non intégrés, vous devez créer et fournir un fichier de sous-titrage synchronisé dans un format approprié (SMIL par exemple) avec le fichier vidéo (la procédure à suivre pour ce faire ne fait pas l’objet de ce guide, mais vous trouverez des liens vers des didacticiels sous En savoir plus – Sous-titres (pré-enregistrés) (1.2.2)). Pensez à inclure une note avisant les utilisateurs que des sous-titres sont disponibles pour la vidéo.

Si vous devez utiliser des sous-titres intégrés, incorporez le texte à la piste vidéo. Pour ce faire, utilisez des applications de montage vidéo qui permettent de superposer du texte sur la vidéo.

En savoir plus – Sous-titres (pré-enregistrés) (1.2.2)

Audio-description ou version de remplacement pour un média temporel (pré-enregistré) (1.2.3)

  • Critère de réussite 1.2.3
  • Niveau A
  • Audio-description ou version de remplacement pour un média temporel (pré-enregistré) : fournir une version de remplacement pour un média temporel ou une audio-description du contenu vidéo pré-enregistré pour un média synchronisé, excepté quand le média est un média de remplacement pour un texte et qu’il est clairement identifié comme tel.

Objectif – Audio-description ou version de remplacement pour un média temporel (pré-enregistré) (1.2.3)

Les personnes aveugles ou malvoyantes ne pourront pas accéder au contenu si les informations dans une vidéo ou une animation sont fournies sous forme visuelle seulement ou si la piste audio ne fournit pas suffisamment d’informations pour comprendre ce qui se passe visuellement.

Comment procéder – Audio-description ou version de remplacement pour un média temporel (pré-enregistré) (1.2.3)

Deux approches peuvent être adoptées pour remplir ce critère de réussite. Les deux sont acceptables :

  1. Inclure une audio-description supplémentaire pour le contenu vidéo. Vous pouvez y parvenir de trois façons :

    • Durant les pauses dans le dialogue existant, fournissez des informations sur les modifications dans la scène qui ne sont pas présentées dans la piste audio existante.
    • Fournissez une nouvelle piste audio supplémentaire et facultative contenant la piste audio originale, mais aussi des informations audio supplémentaires sur les modifications dans la scène.
      • Les utilisateurs peuvent ainsi permuter entre la piste audio existante (qui ne contient pas d’audio-description) et la nouvelle piste audio (qui comprend une audio-description).
      • De cette façon, les utilisateurs qui n’ont pas besoin de la description supplémentaire ne sont pas interrompus.
    • Créez une deuxième version du contenu vidéo afin d’y inclure des audio-descriptions plus détaillées. Ceci réduit les difficultés associées à la spécification d’audio-descriptions détaillées dans les intervalles au sein du dialogue existant, en interrompant temporairement l’audio et la vidéo à des points appropriés. Vous pouvez ainsi ajouter une audio-description beaucoup plus longue avant que l’action ne recommence. Comme dans l’exemple précédent, il est préférable de proposer une piste audio supplémentaire facultative afin d’éviter toute interruption pour les utilisateurs qui n’ont pas besoin du contenu supplémentaire.
  2. Fournissez une transcription textuelle qui est un équivalent textuel adapté des éléments audio et visuels de la vidéo ou de l’animation. Il peut s’agir, si cela est approprié, d’une indication précisant qui parle, d’une description du décor ou d’expressions vocales. Selon sa durée, vous pouvez placer la transcription sur la même page que la vidéo ou animation, ou sur une autre page ; dans le deuxième cas, fournissez un lien vers la transcription près de la vidéo ou de l’animation.

Ce guide ne vise pas à fournir des instructions détaillées sur la manière de créer une vidéo avec audio-description. La création de vidéos et d’audio-descriptions peut demander beaucoup de temps, mais d’autres produits Adobe peuvent vous y aider. Si vous créez du contenu dans Adobe Flash Professional, pensez également à créer un script afin d’inviter l’utilisateur à télécharger le module externe approprié et à fournir un équivalent textuel au moyen de l’élément <noscript>.

En savoir plus – Audio-description ou version de remplacement pour un média temporel (pré-enregistré) (1.2.3)

Sous-titres (en direct) (1.2.4)

  • Critère de réussite 1.2.4
  • Niveau AA
  • Sous-titres (en direct) : fournir des sous-titres pour tout contenu audio en direct, sous forme de média synchronisé.

Objectif – Sous-titres (en direct) (1.2.4)

Ce critère de réussite est identique aux Sous-titres (pré-enregistrés), du fait qu’il résout les obstacles à l’accessibilité pour les personnes sourdes ou malentendantes ; toutefois, ce critère de réussite traite des présentations en direct du type webdiffusions.

Comment procéder – Sous-titres (en direct) (1.2.4)

Suivez les instructions de la section Sous-titres (pré-enregistrés) ci-dessus. Toutefois, en raison de la nature du média (direct), les sous-titres doivent être créés aussi rapidement que possible, en fonction de ce qui se passe dans la vidéo. Par conséquent, envisagez d’utiliser des outils de sous-titrage en temps réel ou de transcription voix-texte.

Ce document ne vise pas à fournir des instructions détaillées à ce sujet, mais vous trouverez des renseignements utiles en suivant les liens ci-après :

En savoir plus – Sous-titres (en direct) (1.2.4)

Audio-description (pré-enregistrée) (1.2.5)

  • Critère de réussite 1.2.5
  • Niveau AA
  • Audio-description (pré-enregistrée) : fournir une audio-description pour tout contenu vidéo pré-enregistré, sous forme de média synchronisé.

Objectif – Audio-description (pré-enregistrée) (1.2.5)

Ce critère de réussite est identique au critère Audio-description ou version de remplacement pour un média temporel (pré-enregistré), excepté que les auteurs doivent fournir une audio-description beaucoup plus détaillée, conforme au niveau AA.

Comment procéder – Audio-description (pré-enregistrée) (1.2.5)

En savoir plus – Audio-description (pré-enregistrée) (1.2.5)

Adaptable (1.3)

Cette règle couvre les exigences nécessaires pour aider les personnes qui :

  • peuvent ne pas être en mesure d’accéder aux informations présentées par un auteur dans une mise en page web colorée, à plusieurs colonnes et bidimensionnelle standard ;
  • utilisent peut-être un contenu audio uniquement ou un affichage visuel de remplacement, par exemple un contraste élevé ou une grande taille de texte.

Informations et relations (1.3.1)

  • Critère de réussite 1.3.1
  • Niveau A
  • Informations et relations : l’information, la structure et les relations véhiculées par la présentation peuvent être déterminées par un programme informatique ou sont disponibles sous forme de texte.

Objectif – Informations et relations (1.3.1)

Nombre des technologies d’assistance auxquelles ont recours les personnes en situation de handicap ont recours à des informations structurelles pour afficher ou restituer efficacement le contenu. Ces informations structurelles peuvent se présenter sous forme de titres de page, de titres de lignes et de colonnes de tableau et de types de liste. Par exemple, un utilisateur peut recourir à un lecteur d’écran pour parcourir une page d’un titre à un autre. Si, toutefois, le contenu d’une page semble avoir une structure de style visuel uniquement, plutôt qu’un code HTML sous-jacent, aucune information structurelle n’est disponible pour les technologies d’assistance, ce qui limite leur capacité à faciliter la navigation.

Ce critère de réussite vise à garantir que de telles informations structurelles sont fournies dans le code HTML, de sorte que les navigateurs et les technologies d’assistance puissent accéder à l’information et l’exploiter.

Comment procéder – Informations et relations (1.3.1)

AEM facilite la construction de pages web à l’aide des éléments HTML appropriés. Ouvrez le contenu de la page dans l’éditeur de texte enrichi (un composant Texte) et, à l’aide du menu Format, spécifiez l’élément structurel approprié (paragraphe, titre, etc.).

L’image suivante présente du texte stylisé comme texte de paragraphe ; l’affichage du code source utilisé indique que les balises <p> et </p> d’ouverture et de fermeture sont correctes.

Exemple de l’élément Paragraphe affiché en mode d’édition de la source (IU classique).

Veillez à ce que vos pages web aient la structure appropriée comme suit :

  • Utilisation de titres :

    Tant que les fonctions d’accessibilité de l’éditeur de texte enrichi sont activées (voir AEM et accessibilité), AEM propose trois niveaux de titre de page. Utilisez-les pour identifier les sections et les sous-sections du contenu. Titre 1 est le niveau de titre le plus élevé, Titre 3 le plus bas. L’administrateur du système peut configurer le système afin de permettre l’utilisation d’autres niveaux de titre.

    L’image suivante illustre un exemple des différents types de titres.

    Titres&nbsp;1 à&nbsp;3 affichés dans le sélecteur déroulant (IU classique).
  • Texte mis en évidence :

    Mettez le texte en évidence à l’aide des éléments <strong> ou <em>. N’utilisez pas de titres au sein des paragraphes.

    • Surlignez le texte à mettre en évidence.
    • Cliquez sur l’icône B (pour <strong>) ou I (pour <em>) du panneau Propriétés (HTML doit être sélectionné).

    Remarque :

    Dans une installation AEM standard, l’éditeur de texte enrichi est configuré pour utiliser :

    • <b> au lieu de <strong>
    • <i> au lieu de <em>

    Même s’ils sont en réalité identiques, <strong> et <em> sont préférables car ils constituent un code html sémantiquement correct. Votre équipe de développement peut configurer l’éditeur de texte enrichi pour utiliser <strong> et <em> (au lieu de <b> et <i>) lors de l’élaboration de votre instance de projet.

  • Listes : vous pouvez spécifier trois différents types de listes en HTML :

    • <ul> convient aux listes (à puces) non triées. Les éléments de liste individuels sont identifiés à l’aide de <li>.
      Dans l’éditeur de texte enrichi, utilisez l’icône Liste à puces.
    • <ol> convient pour les listes numérotées. Les éléments de liste individuels sont identifiés à l’aide de <li>.
      Dans l’éditeur de texte enrichi, cliquez sur l’icône Liste numérotée.

    Pour modifier le contenu existant d’un type de liste particulier, surlignez le texte concerné puis sélectionnez le type de liste approprié. Comme dans l’exemple précédent illustrant comment est entré le texte du paragraphe, les éléments de liste appropriés sont automatiquement ajoutés au fichier HTML, mais vous pouvez l’afficher en mode d’édition de la source.

    Remarque :

    <dl> n’est pas pris en charge par l’éditeur de texte enrichi.  

  • Tableaux :

    Les tableaux de données doivent être identifiés à l’aide des éléments de tableau HTML :

    • un élément <table> ;
    • un élément <tr> pour chaque ligne du tableau ;
    • un élément <th> pour chaque titre de ligne et de colonne ;
    • un élément <td> pour chaque cellule de données.

    Remarque :

    Les tableaux doivent être créés avec le composant Tableau. Bien qu’il soit possible de les créer dans le composant Texte, cela n’est pas recommandé.

    En outre, les tableaux accessibles utilisent les éléments et attributs suivants :

    • L’élément <caption> permet de spécifier une légende visible pour le tableau. Par défaut, les légendes s’affichent au centre au-dessus du tableau, mais vous pouvez les repositionner à l’aide d’une feuille de style CSS. Les légendes sont par programmation associées au tableau ; il s’agit donc d’une méthode utile pour présenter le contenu.
    • L’élément <summary> permet aux utilisateurs non-voyants de comprendre plus facilement les informations présentées dans un tableau, en résumant ce que voit un utilisateur voyant. Ceci s’avère particulièrement utile pour les dispositions de tableau complexes ou non conventionnelles (cet attribut ne s’affiche pas dans le navigateur, il est seulement lu à haute voix par les technologies d’assistance).
    • L’attribut scope de l’élément <th> indique si une cellule représente un en-tête d’une ligne ou d’une colonne particulière. Une approche similaire consiste à utiliser les attributs header et id dans les tableaux complexes, où les cellules de données peuvent être associées à un ou plusieurs en-têtes.

    Remarque :

    Par défaut, ces éléments et attributs ne sont pas directement disponibles, mais l’administrateur du système peut ajouter la prise en charge de ces valeurs dans la boîte de dialogue Propriétés du tableau (voir Ajout de la prise en charge des éléments et attributs HTML supplémentaires).

    Lorsque vous ajoutez un Tableau, configurez ses propriétés dans la boîte de dialogue Propriétés du tableau.

    • Une Légende appropriée.
    • Idéalement, supprimez les valeurs par défaut des propriétés Largeur, Hauteur, Bordure, Marge intérieure des cellules et Espacement des cellules car ces propriétés peuvent être définies dans une feuille de style globale.
    Boîte de dialogue Propriétés du tableau.

    Utilisez les Propriétés de la cellule pour déterminer si la cellule est une cellule de données ou d’en-tête et, dans le deuxième cas, si elle renvoie à une ligne, à une colonne ou aux deux :

    Boîte de dialogue Propriétés de la cellule&nbsp;; définition d’une ligne (généralement la première) comme ligne d’en-tête.
  • Tableaux de données complexes :

    Dans certains cas, en présence de tableaux complexes avec plusieurs niveaux d’en-têtes, les Propriétés du tableau de base peuvent ne pas suffire pour fournir toutes les informations structurelles nécessaires. Pour ces types de tableaux complexes, il convient de créer des relations directes entre les en-têtes et leurs cellules associées à l’aide des attributs header et id. Par exemple, dans le tableau ci-dessous, les attributs header et id sont associés afin de créer une association de programmation à l’intention des utilisateurs de technologies d’assistance.

    Remarque :

    L’attribut id n’est pas disponible dans une installation prête à l’emploi. Il peut être activé en configurant les règles HTML et le sérialiseur dans l’éditeur de texte enrichi.

    Remarque :

    Les tableaux doivent être créés avec le composant Tableau. Bien qu’il soit possible de les créer dans le composant Texte, cela n’est pas recommandé.

    <table>
       <tr>
         <th rowspan="2" id="h">Homework</th>
         <th colspan="3" id="e">Exams</th>
         <th colspan="3" id="p">Projects</th>
       </tr>
       <tr>
         <th id="e1" headers="e">1</th>
         <th id="e2" headers="e">2</th>
         <th id="ef" headers="e">Final</th>
         <th id="p1" headers="p">1</th>
         <th id="p2" headers="p">2</th>
         <th id="pf" headers="p">Final</th>
       </tr>
       <tr>
        <td headers="h">15%</td>
        <td headers="e e1">15%</td>
        <td headers="e e2">15%</td>
        <td headers="e ef">20%</td>
        <td headers="p p1">10%</td>
        <td headers="p p2">10%</td>
        <td headers="p pf">15%</td>
       </tr>
      </table>

    Pour y parvenir dans AEM, vous devez ajouter la balise directement en mode d’édition de la source.

    Remarque :

    Cette fonctionnalité n’est pas immédiatement disponible dans une installation standard. Vous devez configurer les règles HTML et le sérialiseur dans l’éditeur de texte enrichi.

En savoir plus – Informations et relations (1.3.1)

Caractéristiques sensorielles (1.3.3)

  • Critère de réussite 1.3.3
  • Niveau A
  • Caractéristiques sensorielles : les instructions données pour la compréhension et l’utilisation du contenu ne doivent pas reposer uniquement sur les caractéristiques sensorielles des éléments comme la forme, la taille, l’emplacement visuel, l’orientation ou le son.

Objectif – Caractéristiques sensorielles (1.3.3)

Les concepteurs concentrent généralement leurs efforts sur le côté visuel (couleur, forme, style du texte ou position absolue ou relative d’un élément du contenu) de la présentation des informations. Même s’il peut s’agir de techniques de conception très efficaces pour véhiculer l’information, les personnes aveugles ou malvoyantes peuvent ne pas être en mesure d’accéder à l’information nécessitant une identification visuelle des attributs (position, couleur ou forme, par exemple).

De même, les informations qui impliquent de distinguer différents sons (contenu verbalisé par un homme ou une femme, par exemple) présentent un obstacle à l’accessibilité pour les personnes malentendantes si elles ne sont pas reproduites dans un équivalent textuel du contenu audio.

Remarque :

Pour connaître les conditions requises en rapport avec les alternatives aux couleurs, voir Utilisation de la couleur.

Comment procéder – Caractéristiques sensorielles (1.3.3)

Veillez à ce que les informations qui reposent sur des caractéristiques visuelles du contenu de la page soient également présentées dans un autre format.

  • Ne vous fiez pas à la seule position visuelle pour transmettre une information. Si, par exemple, vous souhaitez renvoyer les utilisateurs à un menu sur le côté droit de la page pour accéder à d’autres informations, ne renvoyez pas au menu à droite ; nommez plutôt le menu (par exemple au moyen d’un titre) et faites référence à ce nom dans le texte.
  • Ne vous fiez pas au style de texte (gras ou italique par exemple) comme seul moyen de transmettre l’information.

Remarque :

L’utilisation de termes descriptifs est acceptable s’ils ont une signification dans un contexte non visuel. Par exemple, les termes ci-dessus et ci-dessous sont généralement acceptables, puisqu’ils impliquent respectivement le contenu juste avant ou après un élément de contenu particulier ; ils resteront donc significatifs si le contenu est lu à haute voix.

En savoir plus – Caractéristiques sensorielles (1.3.3)

Distinguable (1.4)

Utilisation de la couleur (1.4.1)

  • Critère de réussite 1.4.1
  • Niveau A
  • Utilisation de la couleur : la couleur n’est pas utilisée comme la seule façon de véhiculer de l’information, d’indiquer une action, de solliciter une réponse ou de distinguer un élément visuel.

Remarque :

Ce critère de réussite traite spécifiquement de la perception des couleurs. Les autres formes de perception sont traitées à la règle Adaptable (1.3), comme l’accès à la couleur par programme informatique et les autres formes de codage de la présentation visuelle.

Objectif – Utilisation de la couleur (1.4.1)

La couleur est un moyen évidemment efficace d’améliorer l’aspect esthétique des pages web ; elle est également utile pour véhiculer l’information. Toutefois, en raison de différentes déficiences visuelles (de la cécité au daltonisme), certaines personnes ne sont pas capables de distinguer certaines couleurs. Par conséquent, le codage en couleurs ne constitue pas un moyen fiable de véhiculer l’information.

Par exemple, une personne qui ne distingue pas le vert du rouge ne sera pas en mesure de distinguer différentes nuances de ces couleurs. Si elle voit ces couleurs comme une troisième couleur (marron par exemple), elle ne sera pas non plus en mesure de distinguer le rouge du vert et du marron.

En outre, les personnes qui utilisent des navigateurs qui ne reconnaissent que le texte, des périphériques d’affichage monochromes ou un imprimé en noir et blanc de la page ne verront pas les couleurs.

Comment procéder – Utilisation de la couleur (1.4.1)

Si la couleur sert à véhiculer l’information, veillez à ce que cette information soit accessible sans recourir à la couleur.

Par exemple, veillez à ce que l’information véhiculée par la couleur le soit aussi explicitement dans le texte. L’illustration ci-dessous présente de quelle façon le texte et la couleur identifient les sièges vacants à un spectacle :

Spectacle

Disponibilité

Mardi 16 mars

SIÈGES VACANTS

Mercredi 17 mars

SIÈGES VACANTS

Jeudi 18 mars

COMPLET

Si la couleur sert de repère pour fournir l’information, ajoutez un repère visuel supplémentaire, notamment en changeant le style (gras ou italique, par exemple) ou la police. Les personnes malvoyantes ou ayant une déficience visuelle seront ainsi en mesure d’identifier l’information. Toutefois, cette méthode seule ne suffit pas, car elle n’est d’aucune utilité pour les personnes qui ne voient pas du tout la page.

En savoir plus – Utilisation de la couleur (1.4.1)

Contraste (minimum) (1.4.3)

  • Critère de réussite 1.4.3
  • Niveau AA
  • Contraste (minimum) : la présentation visuelle du texte et du texte sous forme d’image a un rapport de contraste d’au moins 4,5:1, sauf dans les cas suivants :
    • Texte agrandi : le texte agrandi et le texte agrandi sous forme d’image ont un rapport de contraste d’au moins 3:1.
    • Texte décoratif : aucune exigence de contraste pour le texte ou le texte sous forme d’image qui fait partie d’un composant d’interface utilisateur inactif, qui est purement décoratif, qui est invisible pour tous ou qui est une partie d’une image contenant un autre contenu significatif.
    • Logotypes : aucune exigence de contraste pour le texte faisant partie d’un logo ou d’un nom de marque.

Objectif – Contraste (minimum) (1.4.3)

Les personnes avec certaines déficiences visuelles peuvent ne pas être en mesure de distinguer certaines paires de couleurs à faible contraste. Elles peuvent être confrontées à des obstacles à l’accessibilité si :

  • Le texte est faiblement contrasté avec sa couleur d’arrière-plan.
  • Le codage en couleurs du texte (par exemple entre le texte du lien et le texte en dehors du lien) joue un rôle pour distinguer l’information.

Remarque :

Le texte simplement décoratif est exclu de ce critère de réussite.

Comment procéder – Contraste (minimum) (1.4.3)

Veillez à ce que le texte soit suffisamment contrasté par rapport à son arrière-plan. Les rapports de contraste dépendent de la taille et du style du texte en question :

  • Pour le texte de moins de 18 points (ou 14 points en gras), le rapport de contraste entre le texte et les images de texte et l’arrière-plan doit être d’au moins 4,5:1.
  • Pour le texte de 18 points (ou 14 points en gras) au moins, le rapport de contraste doit être d’au moins 3:1.
  • Si un arrière-plan a un motif, l’arrière-plan autour du texte doit être ombré, de sorte que le rapport de 4,5:1 ou 3:1 soit préservé.

Pour vérifier les rapports de contraste, utilisez un outil de contraste des couleurs, tel que l’analyseur de contraste des couleurs du groupe Paciello ou l’outil de vérification du contraste des couleurs de WebAIM, afin de vérifier les paires de couleurs et de signaler les éventuels problèmes de contraste.

Par ailleurs, si l’aspect de votre page n’est pas un souci majeur, vous avez la possibilité de ne spécifier aucune couleur de texte de premier plan ou d’arrière-plan. Dans ce cas, il n’est pas nécessaire de vérifier le contraste, puisque le navigateur de l’utilisateur déterminera les couleurs du texte et de l’arrière-plan.

S’il n’est pas possible d’obtenir les niveaux de contraste recommandés, vous devez fournir un lien vers une version équivalente alternative de la page (qui ne présente aucun problème de contraste des couleurs) ou permettre à l’utilisateur de régler le contraste du jeu de couleurs de la page selon ses besoins.

En savoir plus – Contraste (minimum) (1.4.3)

Texte sous forme d’image (1.4.5)

  • Critère de réussite 1.4.5
  • Niveau AA
  • Texte sous forme d’image : si les technologies utilisées peuvent réaliser la présentation visuelle, du texte est utilisé pour véhiculer l’information plutôt que du texte sous forme d’image sauf dans les cas suivants :
    • Personnalisable : le texte sous forme d’image peut être personnalisé visuellement selon les exigences de l’utilisateur.
    • Essentielle : une présentation spécifique du texte est essentielle à l’information véhiculée.

Remarque :

Les logotypes (le texte qui fait partie d’un logo ou d’un nom de marque) sont considérés comme essentiels.

Objectif – Texte sous forme d’image (1.4.5)

Le texte sous forme d’image est souvent utilisé lorsqu’un style particulier de texte est nécessaire, tel un logotype ou si le texte a été généré à partir d’une autre source (par exemple la copie numérisée d’un document papier). Toutefois, par rapport au texte présenté en code HTML ou stylisé à l’aide d’une feuille de style CSS, il n’est pas possible de modifier la taille ou l’aspect du texte sous forme d’image, ce qui peut être nécessaire pour les personnes malvoyantes ou ayant des difficultés de lecture.

Comment procéder – Texte sous forme d’image (1.4.5)

Si vous devez utiliser du texte sous forme d’image, utilisez une feuille de style CSS pour remplacer le texte sous forme d’image par un équivalent textuel HTML, de sorte que le texte puisse être personnalisé. Pour en savoir plus à ce sujet, voir C30: Using CSS to replace text with images of text and providing user interface controls to switch (Utilisation d’une feuille de style CSS pour remplacer du texte par du texte sous forme d’image et fournir des commandes d’interface utilisateur à permuter ; en anglais).

En savoir plus – Texte sous forme d’image (1.4.5)

Principe 2 : utilisable

Mettre en pause, arrêter, masquer (2.2.2)

  • Critère de réussite 2.2.2
  • Niveau A
  • Mettre en pause, arrêter, masquer : pour toute information en mouvement, clignotante, défilante ou mise à jour automatiquement, tous les points suivants sont vrais :
    • déplacement, clignotement, défilement : pour toute information en mouvement, clignotante ou défilante qui (a) démarre automatiquement, (b) dure plus de cinq secondes et (c) est présentée conjointement avec un autre contenu, il y a un mécanisme à la disposition de l’utilisateur pour la mettre en pause, l’arrêter ou la masquer, à moins que le mouvement, le clignotement ou le défilement s’avère un élément essentiel au bon déroulement de l’activité ; et
    • mise à jour automatique : pour toute information mise à jour automatiquement qui (a) démarre automatiquement et (b) est présentée conjointement avec un autre contenu, il y a un mécanisme à la disposition de l’utilisateur pour la mettre en pause, l’arrêter ou pour en contrôler la fréquence des mises à jour à moins que la mise à jour automatique s’avère essentielle au bon déroulement de l’activité.

Remarques :

  1. Pour les exigences relatives au contenu scintillant ou flashant, se référer à la règle Ne pas concevoir de contenu susceptible de provoquer des crises (2.3).
  2. Puisque tout contenu ne satisfaisant pas à ce critère de réussite peut interférer avec la capacité de l’utilisateur à exploiter la page entière, tout le contenu présent dans la page web (qu’il soit utilisé pour satisfaire à d’autres critères de réussite ou non) doit satisfaire à ce critère de réussite. Voir Exigence de conformité 5 : Non-interférence.
  3. Il n’est pas exigé que le contenu mis à jour périodiquement par logiciel ou diffusé en flux à l’agent utilisateur conserve ou présente l’information générée ou reçue entre la mise en pause et la reprise de la présentation, puisque cela peut ne pas être techniquement possible et s’avérer trompeur dans beaucoup de situations.
  4. Une animation survenant dans une phase de pré-chargement ou dans une situation similaire peut être considérée comme essentielle si aucune interaction n’est permise à tous les utilisateurs durant cette phase et si l’absence d’indication de progression est susceptible de perturber les utilisateurs ou de leur faire croire que le contenu est figé ou défectueux.

Objectif – Mettre en pause, arrêter, masquer (2.2.2)

Certains utilisateurs peuvent être distraits par le contenu en mouvement et avoir du mal à se concentrer sur d’autres parties de la page. En outre, un tel contenu peut s’avérer difficile à lire par les personnes qui ont du mal à suivre le texte en mouvement.

Comment procéder – Mettre en pause, arrêter, masquer (2.2.2)

Selon la nature du contenu, appliquez une ou plusieurs des suggestions ci-après lorsque vous créez des pages web qui contiennent du mouvement, flashant ou clignotant :

  • Fournissez un moyen de mettre en pause le contenu défilant afin que l’utilisateur dispose de suffisamment de temps pour le lire. Par exemple, des téléscripteurs de nouvelles ou du texte automatiquement mis à jour.
  • Veillez à ce que le contenu qui clignote s’arrête de clignoter après cinq secondes.
  • Utilisez des technologies appropriées pour afficher le contenu clignotant pouvant être désactivé par le navigateur. Par exemple, des fichiers GIF (Graphics Interchange Format) ou APNG (Animated Portable Network Graphics).
  • Fournissez un contrôle de formulaire sur la page web permettant à l’utilisateur de désactiver tout le contenu clignotant sur la page.
  • Si aucune des solutions ci-dessus n’est possible, fournissez un lien vers une page avec tout le contenu mais sans aucun clignotement.

En savoir plus – Mettre en pause, arrêter, masquer (2.2.2)

Crises (2.3)

Pas plus de trois flashs ou sous le seuil critique (2.3.1)

  • Critère de réussite 2.3.1
  • Niveau A
  • Pas plus de trois flashs ou sous le seuil critique (2.3.1) : une page web doit être exempte de tout élément qui flashe plus de trois fois dans n’importe quel intervalle d’une seconde ou ce flash doit se situer sous le seuil de flash générique et le seuil de flash rouge.

Remarque :

Puisque tout contenu ne satisfaisant pas à ce critère de réussite peut interférer avec la capacité de l’utilisateur à exploiter la page entière, tout le contenu présent dans la page web (qu’il soit utilisé pour satisfaire à d’autres critères de réussite ou non) doit satisfaire à ce critère de réussite. Voir Exigence de conformité 5 : Non-interférence.

Objectif – Pas plus de trois flashs ou sous le seuil critique (2.3.1)

Il arrive que le contenu qui flashe provoque des crises de photosensibilité. En appliquant ce critère de réussite, les utilisateurs concernés peuvent accéder au contenu et en prendre connaissance sans inquiétude quant au contenu qui flashe.

Comment procéder – Pas plus de trois flashs ou sous le seuil critique (2.3.1)

Veillez à ce que les techniques ci-après soient appliquées :

  • Veillez à ce que les composants ne flashent pas plus de trois fois dans n’importe quel intervalle d’une seconde.
  • S’il n’est pas possible de remplir la condition ci-dessus, présentez le contenu qui flashe dans un petit espace sécuritaire en pixels à l’écran. Cet espace est calculé selon une formule complexe, abordée dans la section G176: Keeping the flashing area small enough (faire en sorte que la zone qui clignote soit suffisamment petite ; en anglais). Cette technique doit être appliquée uniquement si le contenu qui flashe est absolument nécessaire.

En savoir plus – Pas plus de trois flashs ou sous le seuil critique (2.3.1)

Titre de page (2.4.2)

  • Critère de réussite 2.4.2
  • Niveau A
  • Titre de page : les pages web présentent un titre qui décrit leur sujet ou leur but.

Objectif – Titre de page (2.4.2)

Ce critère de réussite aide quiconque, en situation de handicap ou non, à identifier rapidement le contenu d’une page web sans avoir à lire la page entière. Ceci s’avère particulièrement utile lorsque plusieurs pages web sont ouvertes dans des onglets de navigateur, puisque le titre de la page s’affiche dans l’onglet et est donc facile à trouver.

Comment procéder – Titre de page (2.4.2)

Si une nouvelle page HTML est créée dans AEM, vous pouvez en spécifier le titre. Veillez à ce que le titre décrive adéquatement le contenu de la page, de sorte que les visiteurs puissent rapidement identifier si le contenu est réellement adapté à leurs besoins.

Vous pouvez également changer le titre d’une page que vous modifiez en sélectionnant : Sidekick - onglet Page - Propriétés de la page…

En savoir plus – Titre de page (2.4.2)

Fonction du lien (selon le contexte) (2.4.4)

  • Critère de réussite 2.4.4
  • Niveau A
  • Fonction du lien (selon le contexte) (2.4.4) : la fonction de chaque lien est déterminée par le texte du lien seul ou par le texte du lien associé à un contexte du lien déterminé par un programme informatique, sauf si la fonction du lien est ambiguë pour tout utilisateur.

Objectif – Fonction du lien (selon le contexte) (2.4.4)

Pour tous les utilisateurs, en situation de handicap ou non, il est essentiel d’indiquer clairement la destination d’un lien par l’intermédiaire d’un texte de lien approprié. Les utilisateurs peuvent ainsi décider s’ils souhaitent suivre ce lien. Pour les utilisateurs voyants, un texte de lien significatif est extrêmement utile s’il existe plusieurs liens sur une page (en particulier si la page contient énormément de texte), car il indique clairement la fonctionnalité de la page cible. D’un autre côté, les utilisateurs de technologies d’assistance peuvent générer une liste de tous les liens sur une seule page, et ainsi comprendre plus facilement le texte du lien hors contexte.

Comment procéder – Fonction du lien (selon le contexte) (2.4.4)

Avant tout, veillez à ce que l’objectif d’un lien soit clairement décrit dans le texte du lien.

  • Mauvais exemple :
    • Texte : Pour plus de détails sur nos cours du soir de l’automne 2010, cliquez ici.
    • Motif : le lien est ambigu et n’indique pas clairement sa destination.
  • Bon exemple :
    • Texte : Cours du soir de l’automne 2010 – Détails.
    • Motif : il est possible d’améliorer le texte du lien en adaptant légèrement le texte et sa position.

Les liens doivent être formulés de manière cohérente sur toutes les pages, en particulier pour les barres de navigation. Si, par exemple, un lien vers une page spécifique est nommé Publications sur une page, il doit être nommé de la même façon sur toutes les autres pages.

Au moment de la rédaction toutefois, certains problèmes peuvent se présenter quant à l’utilisation des titres :

  • Habituellement, seuls les utilisateurs d’une souris ont accès au texte contenu dans l’attribut de titre, sous forme d’info-bulle contextuelle ; ce texte n’est pas accessible par clavier.
  • Les lecteurs d’écran peuvent lire à haute voix les attributs de titre, mais cette fonctionnalité peut ne pas être activée par défaut ; les utilisateurs peuvent donc ne pas savoir qu’il existe un attribut de titre.
  • Il est difficile de modifier l’aspect du texte d’un titre, ce qui signifie qu’il peut être difficile ou impossible de le lire pour certains utilisateurs.

Par conséquent, même si vous pouvez utiliser l’attribut de titre pour fournir plus de contexte sur un lien, vous devez connaître ses limites et ne pas l’utiliser comme alternative à un texte de lien approprié.

Si le lien est composé d’une image, veillez à ce que l’équivalent textuel de l’image décrive la destination du lien. Si, par exemple, une image de bibliothèque est définie comme lien vers les publications d’une personne, l’équivalent textuel doit indiquer Publications de Jean Dupont et non Bibliothèque.

Par ailleurs, si l’ancre du lien contient du texte qui décrit l’objet du lien en sus de l’image (et par conséquent que le texte apparaît le long de l’image), utilisez un attribut alt vide pour l’image :

<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith’s publications
</a>

Remarque :

L’extrait de code ci-dessus est une illustration ; il est recommandé d’utiliser le composant Image.

Il est conseillé de spécifier un texte du lien qui identifie l’objet du lien sans avoir besoin de contexte supplémentaire ; toutefois, cela n’est pas toujours possible. Des liens sans contexte peuvent être utilisés dans les cas suivants (vous trouverez des exemples HTML dans la section Comment remplir le critère de réussite 2.4.4) :

  • si le texte du lien fait partie d’une liste de liens étroitement liés et si l’élément de liste encadrant le lien fournit suffisamment de contexte ;
  • si l’objet d’un lien peut être clairement identifié dans le texte du paragraphe précédent (et non suivant) ;
  • si le lien est contenu dans un tableau de données et par conséquent que l’objet du lien peut être clairement identifié dans les titres associés ;
  • si une liste de liens est contenue dans un jeu de titres et que le titre lui-même fournit suffisamment de contexte ;
  • si une liste de liens est contenue dans un lien imbriqué et que la liste parente elle-même au-dessus du lien imbriqué fournit suffisamment de contexte.

Dans certains cas, s’il existe plusieurs liens sur une page (chacun d’eux fournit la destination d’un lien avec des détails complexes mais nécessaires), il peut être nécessaire de fournir une version alternative de la page web qui affiche exactement le même contenu, mais où le texte du lien n’est pas aussi détaillé.

Toutefois, il est possible d’utiliser des scripts de sorte qu’un texte minimal soit fourni avec le lien lui-même, mais, à l’activation d’une commande appropriée placée vers le haut de la page, que le texte du lien soit développé afin d’afficher davantage de détails. Une approche similaire consiste à utiliser une feuille de style CSS afin de masquer le lien complet pour les utilisateurs voyants, tout en l’affichant dans son intégralité pour les utilisateurs d’un lecteur d’écran. Ceci ne fait pas partie du sujet de ce document ; toutefois, vous en apprendrez davantage dans la section En savoir plus – Fonction du lien (selon le contexte) (2.4.4).

En savoir plus – Fonction du lien (selon le contexte) (2.4.4)

Principe 3 : compréhensible

Rendre le contenu textuel lisible et compréhensible (3.1)

Langue de la page (3.1.1)

  • Critère de réussite 3.1.1
  • Niveau A
  • Langue de la page : la langue par défaut de chaque page web peut être déterminée par un programme informatique.

Objectif – Langue de la page (3.1.1)

Ce critère de réussite garantit que ce texte et tout autre contenu linguistique est correctement restitué. Pour les utilisateurs de lecteur d’écran, il garantit que le contenu est correctement prononcé, tandis que les navigateurs visuels sont plus susceptibles d’afficher correctement certains jeux de caractères.

Comment procéder – Langue de la page (3.1.1)

Pour que ce critère de réussite soit satisfait, la langue par défaut d’une page web peut être identifiée à l’aide de l’attribut lang dans l’élément <html> au haut de la page. Par exemple :

  • Si une page est écrite en français (France), l’élément <html> doit être :
        <html lang = “fr-fr”>
  • En revanche, pour une page à restituer en français (France), l’attribut doit être défini comme suit :
        <html lang = “fr-fr”>

Dans AEM, la langue par défaut de la page est définie à la création de la page, mais peut également être modifiée lors de l’édition d’une page, en sélectionnant : Sidekick - onglet Page - Propriétés de la page… - onglet Avancé.

En savoir plus – Langue de la page (3.1.1)

Langue d’un passage (3.1.2)

  • Critère de réussite 3.1.2
  • Niveau AA
  • Langue d’un passage : la langue de chaque passage ou expression du contenu peut être déterminée par un programme informatique sauf pour un nom propre, pour un terme technique, pour un mot dont la langue est indéterminée ou pour un mot ou une expression faisant partie du langage courant de la langue utilisée dans le contexte immédiat.

Objectif – Langue d’un passage (3.1.2)

Ce critère de réussite vise le même objectif que le critère de réussite Langue de la page, mais il s’applique aux pages web avec du contenu en plusieurs langues sur une seule page (par exemple, en raison de citations ou de mots empruntés peu courants).

Si une page applique ce critère de réussite, alors :

  • Le logiciel de transition en braille peut insérer des caractères accentués.
  • Les lecteurs d’écran peuvent prononcer correctement les mots qui sont dans une autre langue que la langue par défaut.
  • Les outils de traduction du type Google Translate peuvent correctement traduire les mots d’une langue à une autre.

Comment procéder – Langue d’un passage (3.1.2)

Utilisez l’attribut lang pour identifier les changements dans la langue du contenu. Par exemple, une citation en allemand (code ISO 639-1 « de ») peut se présenter comme suit :

<blockquote cite = "John F. Kennedy" lang = "de"> 
     <p>Ich bin ein Berliner</p>
 </blockquote>

Remarque :

Les attributs blockquote ne sont pas pris en charge dans une instance prête à l’emploi. Il est toutefois possible de développer un composant personnalisé pour prendre cette fonction en charge.

De même, le navigateur peut restituer correctement un mot ou une expression emprunté peu courant si l’élément span est utilisé comme suit :

<p>The only French phrase I know is <span lang = “fr”>je ne sais quoi</span>.</p>

Remarque :

Il n’est pas nécessaire d’adhérer à ce critère de réussite pour les noms ou villes dans différentes langues ou lors de l’utilisation de mots ou d’expressions empruntés qui sont devenus courants dans la langue par défaut (tel que diktat en français).

Pour ajouter l’élément span avec une langue appropriée, vous pouvez manuellement modifier la balise HTML en mode d’édition de la source de l’éditeur de texte enrichi afin qu’elle se présente comme ci-dessus. L’attribut lang peut également être inclus dans l’éditeur de texte enrichi par un administrateur système (voir Ajout de la prise en charge des éléments et attributs HTML supplémentaires).

En savoir plus – Langue d’un passage (3.1.2)

Aider l’utilisateur à éviter et à corriger les erreurs de saisie (3.3)

Étiquettes ou instructions (3.3.2)

  • Critère de réussite 3.3.2
  • Niveau A
  • Étiquettes ou instructions : des étiquettes sont présentées ou des instructions sont fournies quand un contenu requiert une saisie utilisateur.

Objectif – Étiquettes ou instructions (3.3.2)

La fourniture d’instructions pour aider les utilisateurs à remplir des formulaires est l’un des éléments essentiels pour rendre une interface conviviale. Ceci s’avère particulièrement utile pour les personnes ayant des déficiences visuelles ou cognitives qui risquent autrement d’avoir du mal à comprendre la mise en page d’un formulaire et le tri des données à fournir dans un champ particulier du formulaire.

Dans AEM, une étiquette est ajoutée par défaut lorsque vous ajoutez un composant de formulaire, tel que Champ de texte, à la page. Ce titre par défaut dépend du type de composant. Vous pouvez ajouter votre propre titre pour ce champ dans l’onglet Titre et texte de la boîte de dialogue d’édition. Veillez à ce que les étiquettes aident les utilisateurs à comprendre les données associées à chaque composant de formulaire.

Onglet Titre et texte (boîte de dialogue d’édition)&nbsp;; le titre «&nbsp;Description&nbsp;» a été ajouté.

Utilisez ce champ Titre pour les éléments de champ, car il fournit une étiquette accessible par les technologies d’assistance. Le simple fait d’écrire une étiquette dans le texte en regard du champ ne suffit pas.

Pour certains composants, il est également possible de masquer visuellement les étiquettes en cochant la case Masquer le titre. Les étiquettes masquées de cette façon restent accessibles aux technologies d’assistance, mais ne s’affichent pas à l’écran. Si cette approche est adaptée à certaines situations, il est généralement préférable d’inclure une étiquette visuelle chaque fois que cela est possible, car certains utilisateurs qui ne regardent qu’une très petite portion de l’écran (un champ à la fois) ont besoin des étiquettes pour identifier correctement le champ.

Boutons Image

Chaque fois que vous utilisez des boutons image (par exemple, le composant Bouton Image), le champ Titre de l’onglet Titre et texte de la boîte de dialogue d’édition fournit en fait le texte de remplacement de l’image, plutôt que l’étiquette. Ainsi, dans l’exemple ci-dessous, l’image avec le texte Submit contient le texte de remplacement de Submit, ajouté à l’aide du champ Titre dans la boîte de dialogue d’édition.

Bouton Image avec Texte de remplacement défini dans le champ Titre (boîte de dialogue d’édition).

Groupes de champs de formulaire

Lorsqu’il existe un groupe de commandes associées, comme Groupe de cases d’option, il peut être nécessaire de donner un titre au groupe, ainsi qu’aux commandes individuelles. Lors de l’ajout d’un jeu de cases d’option dans AEM, le champ Titre fournit le titre de ce groupe et des titres individuels sont spécifiés alors que les cases d’option (Éléments) sont créées.

Ajout d’élément au groupe de cases d’option. Le titre du groupe est&nbsp;«&nbsp;Contactez-moi avant le&nbsp;», défini dans le champ Titre.

Toutefois, il n’existe aucune association par programmation entre le titre de groupe et les cases d’option mêmes. Les éditeurs de modèle doivent encadrer le titre des balises fieldset et legend nécessaires pour créer cette association ; ce qui ne peut être possible qu’en modifiant le code source de la page. Un administrateur système peut également ajouter une prise en charge de ces éléments pour les faire apparaître dans la boîte de dialogue Propriétés des champs (voir Ajout de la prise en charge d’éléments et d’attributs HTML supplémentaires).

Considérations supplémentaires pour les formulaires

Si les données doivent être saisies dans un format spécifique, spécifiez-le clairement dans le texte de libellé. Par exemple, si une date doit être saisie au format JJ-MM-AAAA, indiquez ceci tout spécialement dans le libellé. Ainsi, lorsque les utilisateurs d’un lecteur d’écran rencontrent ce champ, le libellé est automatiquement annoncé, ainsi que les informations supplémentaires concernant le format.

Lorsque la saisie d’un champ de formulaire est obligatoire, indiquez-le clairement à l’aide du mot obligatoire dans le libellé. AEM ajoute un astérisque lorsque le champ est obligatoire, mais il est également idéal d’inclure le mot obligatoire dans le libellé même (dans le champ Titre de la boîte de dialogue d’édition).

Ajout d’informations supplémentaires (le mot obligatoire) pour les utilisateurs d’un lecteur d’écran dans le champ «&nbsp;Titre&nbsp;».

Le positionnement des libellés est également important car ils permettent de localiser les champs appropriés. Ceci est tout particulièrement important lorsque l’utilisateur est confronté à un formulaire complexe. Suivez les conventions ci-dessous :

  • Cases à cocher ou cases d’option :
    Les libellés sont positionnés immédiatement à droite du champ.
  • Tous les autres composants de formulaire (par ex., zones de texte, zones de liste modifiable) :
    Les libellés sont positionnés immédiatement au-dessus ou à gauche du champ.

Dans les formulaires simples avec fonctionnalité limitée, le fait de libeller correctement un bouton Envoyer peut faire office de libellé pour le champ adjacent (par exemple Rechercher). Ceci peut s’avérer utile dans les situations où il peut être difficile de trouver de l’espace pour le texte du libellé.

En savoir plus – Étiquettes ou instructions (3.3.2)

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne