Accessibilité : boutique-ar-mor.exampleBoutique Ar Mor – démo

Vérifier que les éléments <img> ont une alternative textuelle, ou un rôle de type 'none' ou 'presentation'

Correction suggérée

Ajoutez un attribut alt à chaque image : un texte court qui donne la même information que l'image (par exemple le nom de la marque pour un logo), ou alt="" si l'image est purement décorative.

Tests RGAA : 1.1.1 · contrôle image-alt · documentation de la règle (en anglais)

Éléments en cause

• img[src$="logo.png"]

  <img src="logo.png">

  L’élément n’a pas d’attribut alt

• img[src$="panier.svg"]

  <img src="panier.svg">

  L’élément n’a pas d’attribut alt

Vérifier que l’élément 'select' a un nom accessible

Correction suggérée

Associez une étiquette visible à la liste : label for="pays" et id="pays" sur l'élément select.

Tests RGAA : 11.1.1 · contrôle select-name · documentation de la règle (en anglais)

Éléments en cause

• select

  <select><option>France</option><option>Belgique</option></select>

  L’élément de formulaire n’a pas de <label> implicite (imbriqué)

Vérifier que les boutons ont un texte perceptible

Correction suggérée

Donnez au bouton un texte qui dit ce qu'il fait (« S'inscrire », « Rechercher »). S'il ne contient qu'une icône, ajoutez aria-label.

Tests RGAA : 11.9.1 · contrôle button-name · documentation de la règle (en anglais)

Éléments en cause

• button

  <button></button>

  L’élément n’a aucun contenu textuel visible par les lecteurs d’écran

Vérifier que les éléments <iframe> et <frame> ont un attribut title non vide

Correction suggérée

Ajoutez au cadre un attribut title qui décrit son contenu (« Carte d'accès au magasin »), ou supprimez le cadre s'il ne sert à rien.

Tests RGAA : 2.1.1 · contrôle frame-title · documentation de la règle (en anglais)

Éléments en cause

• iframe

  <iframe src="about:blank"></iframe>

  L’élément n’a pas d’attribut title

Vérifier que les contrastes entre le premier plan et l’arrière-plan rencontrent les seuils de contrastes exigés par les WCAG 2 AA

Correction suggérée

Foncez le texte ou éclaircissez le fond jusqu'à un rapport de contraste d'au moins 4,5:1 (3:1 pour les grands textes).

Tests RGAA : 3.2.1 · contrôle color-contrast · documentation de la règle (en anglais)

Éléments en cause

• p

  <p class="promo">-20 % sur toute la collection marinière jusqu'à dimanche</p>

  L’élément a un contraste de couleurs insuffisant de 2.81 (couleur d’avant plan : #9a9a9a, couleur d’arrière plan : #ffffff, taille de police : 12.0pt (16px), graisse : normal). Contraste de couleur attendu : 4.5:1

• span

  <span class="btn" onclick="ajouter()">Ajouter au panier</span>

  L’élément a un contraste de couleurs insuffisant de 1.7 (couleur d’avant plan : #ffffff, couleur d’arrière plan : #f0c040, taille de police : 12.0pt (16px), graisse : normal). Contraste de couleur attendu : 4.5:1

Vérifier que les liens ont un texte perceptible

Correction suggérée

Donnez un intitulé à chaque lien : un texte visible, ou une alternative sur l'image qu'il contient (alt="Panier").

Tests RGAA : 6.2.1 · contrôle link-name · documentation de la règle (en anglais)

Éléments en cause

• a[href$="panier"]

  <a href="/panier"><img src="panier.svg"></a>

  L’élément est dans l’ordre de tabulation et n’a pas d’intitulé accessible

• a[href$="compte"]

  <a href="/compte"></a>

  L’élément est dans l’ordre de tabulation et n’a pas d’intitulé accessible

Vérifier que chaque document HTML a un attribut lang

Correction suggérée

Déclarez la langue principale de la page : html lang="fr".

Tests RGAA : 8.3.1 · contrôle html-has-lang · documentation de la règle (en anglais)

Éléments en cause

• html

  <html>

  L’élément <html> n’a pas d’attribut lang