10.3. Garantir la compréhension de l’information même lorsque CSS est désactivé

Veiller à ce que l’information reste disponible et compréhensible même lorsque CSS est désactivé, notamment lorsque des couleurs, des tailles, des formes ou encore des positions sont vecteurs d’informations.

Veiller également à ne pas générer de contenus informatifs en passant seulement par CSS.

Exemples

Position courante dans les menus (exemple 1)

Dans cet exemple, pour le lien « Investisseurs », les couleurs de texte et de fond différentes ainsi qu’une flèche tournée vers le bas indiquent qu’il s’agit de la rubrique courante.

Ci-dessous, une solution via l’utilisation d’une balise <strong> pour ne pas perdre cette information sans CSS.

<a href="…" aria-current="true">
   <strong>Investisseurs</strong>
</a>

Position courante dans les menus (exemple 2)

Dans cet exemple, pour le lien « Organigramme », une couleur de fond différente ainsi qu’une mise en gras et une encoche indiquent qu’il s’agit de la page courante.

Ici, comme il s’agit de la page courante, une solution efficace pour véhiculer cette information sans CSS consiste à ne pas englober cet intitulé d’une balise <a>.

<ul>
   <li><a href="…">Missions</a></li>
   <li><a href="…">Budget</a></li>
   <li aria-current="page">Organigramme</li>
   <li><a href="…">Instances</a></li>
   <li><a href="…">Dates clés</a></li>
</ul>

Contenus générés en CSS (exemple 3)

Les contenus informatifs, nécessaires à la compréhension, ne doivent pas être générés en CSS.

a[href*=".pdf"]::after {
   content: ' (PDF)';
}

Dans cet exemple, l’indication du format des fichiers PDF en téléchargement est ajoutée en CSS. Ce qui est incorrect.

label.obligatoire::after {
   content: ' *';
}

input[aria-required=true]::before {
   content: '* ';
}

Dans ces exemples, l’astérisque marquant les champs obligatoires d’un formulaire est ajouté en CSS. Ce qui est également incorrect.

4 commentaires

Par Georges Malauk, le 7 février 2019 à 10h45.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour,

Si on en croit le point 1.7, la position courante dans un menu doit être précisée par aria-current="page".

Dans le premier exemple, c’est aria-current="true" qui est utilisé.

Vous serait-il possible de préciser l’usage de l’un et de l’autre ?

D’avance un grand merci.

Répondre
- Par Sébastien Delorme, le 12 février 2019 à 16h35.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour,
  
  Prenons par exemple un menu composé de 3 liens :
  - Nos actualités
  - Nous connaître
  - Nous contacter
  aria-current="page" permet de signaler qu’un lien correspond à la page qui est actuellement affichée.
  Par exemple, dans ce menu, sur la page « Nos actualités », le lien « Nos actualités » disposera alors de aria-current="page".
  
  Maintenant, imaginons que la rubrique « Nos actualités » soit découpées en plusieurs sous-pages :
  - Nos actualités internationales
  - Nos actualités nationales
  - Nos actualités régionales
  Si nous sommes sur la page « Nos actualités internationales », nous ne pourrons plus utiliser aria-current="page" sur « Nos actualités » car nous ne sommes plus sur cette page.
  Toutefois, « Nos actualités » représente bien la rubrique courante, nous utiliserons alors aria-current="true" qui est plus générique.
  
  C’est ce qui est précisé sur la fiche 1.7. Identifier la position courante dans les systèmes de navigation avec aria-current :
  - la position courante doit être identifiée avec aria-current="page".
  - les éventuelles rubrique et sous-rubrique parentes doivent être identifiées avec aria-current="true".
  Est-ce plus clair ainsi ?
  
  Répondre
  - Par Georges Malauk, le 12 février 2019 à 17h30.
    
    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
    
    Bonjour Sébastien,
    
    Votre réponse est parfaitement claire et je vous en remercie.
    
    Je crois que c’est l’exemple 1 ci-dessus qui a semé la confusion dans mon esprit.
    
    Merci encore.
  - Par Sébastien Delorme, le 12 février 2019 à 17h53.
    
    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
    
    Parfait.
    Nous allons voir si nous pouvons modifier nos exemples sur cette fiche pour éviter qu’ils génèrent ce doute.

Ajouter un commentaire

Haut de page