Accessibilité dans le Checkout

Modifications apportées pour garantir l'accessibilité de notre Frisbii Media Checkout.

Legacy Checkout

Modifications générales

1. Problèmes de contraste

• Modification de la couleur des annotations dans les formulaires : #94949c → #67676a

• Modification de la couleur des liens et des boutons : #148dde → #0376c3

2. Étiquetage de formulaire manquant

• Toutes les commandes ont été dotées des étiquettes correspondantes

3. Groupes de champs manquants

• Regroupement correct des cases à cocher et des boutons radio

4. Étiquetage de formulaire incorrect

• Attribution correcte des étiquettes

5. Message flash

• Passage du titre de <h3> à <h2>

• Amélioration du contraste du titre « Test terminé »

6. Zones de page

• Correction de la zone d'en-tête

Corrections à l'échelle de l'application

• Correction des problèmes de contraste des annotations et des liens

• Correction du problème de contraste du bouton de confirmation

Corrections spécifiques à certaines pages

1. Formulaires des méthodes de paiement

• Amélioration du contraste des étiquettes et des champs de saisie

• Ajout des étiquettes manquantes

• Correction des étiquettes mal liées/en double

• Ajout d'éléments <fieldset> pour les cases à cocher

• Ajout de notes supplémentaires pour les lecteurs d'écran

2. Sélection de la méthode de paiement

• Passage de <span> à <h2>

• Amélioration du contraste

3. Barre latérale

• Contraste des couleurs de prix

• Ajout d'en-têtes de tableau vides

• Ajustement de la couleur des liens

4. Vérification de l'âge

• Correction de l'ordre du tabindex

• Étiquetage correct du champ de saisie

• Ajout d'attributs title pour les textes d'aide

• <fieldset> complété avec des boutons radio

• Amélioration des en-têtes et de la structure

5. Utilisation d'un bon (voucher)

• Problèmes de contraste entre l'étiquette et le texte

• Correction de l'ordre de lecture pour les lecteurs d'écran

• Correction du titre de <h3> à <h2>

6. Produit déjà acheté

• Ajustement du contraste du titre du message d'erreur

New Checkout

Modifications générales

1. Problèmes de contraste

• Modification de la couleur gris clair utilisée pour les annotations dans les formulaires, de #94949c à #67676a, afin d'améliorer le contraste.

• Modification de la couleur des liens et des boutons, de #148dde à #0376c3

2. Niveaux de titre sautés

• Ajustement de la structure des titres pour éviter de sauter des niveaux (par exemple, l'utilisation d'un <h5> directement après un <h2>)

3. Étiquettes de formulaire manquantes

• Toutes les commandes de formulaire disposent désormais d'une étiquette correspondante

4. Groupes de champs manquants

• Regroupement des cases à cocher et boutons radio associés dans des éléments <fieldset> appropriés

5. Étiquettes de formulaire orphelines

• Toutes les étiquettes de formulaire sont désormais correctement associées à leurs champs respectifs

6. Message flash

• Passage de <h3> à <h2> et correction du contraste du titre « vérification terminée »

7. Régions de page

• Correction de la région de page pour l'en-tête et ajout du rôle main au conteneur principal

8. Boutons désactivés

• Les boutons désactivés sont désormais visibles et lisibles par les lecteurs d'écran, les tabulateurs et la navigation au clavier.

Corrections à l'échelle de l'application

• Correction des problèmes de contraste dans les annotations et les liens

• Correction du problème de contraste sur le bouton de validation

Corrections spécifiques à certaines pages

1. Page de commande

• Corrections générales :

  • Correction du rôle aria

• Formulaires des méthodes de paiement

  • Carte bancaire

    • Correction du problème de contraste sur l'étiquette et le texte du champ de saisie

  • iDEAL

    • Correction du problème de contraste sur l'étiquette et le texte du champ de saisie

    • Ajout d'une étiquette

  • Facture

    • Correction du problème de contraste sur l'étiquette et le texte du champ de saisie

    • Correction des étiquettes et champs de saisie en double en ajoutant un préfixe selon que le champ est privé (B2C) ou professionnel (B2B)

    • Correction des étiquettes mal associées

    • Correction du fieldset pour les cases à cocher

    • Correction du numéro de rue pour le lecteur d'écran en ajoutant une explication

  • PayPal

    • Correction du problème de contraste sur l'étiquette et le texte du champ de saisie

  • SEPA

    • Correction du problème de contraste sur l'étiquette et le texte du champ de saisie

  • Amazon Pay

    • Correction du problème de contraste sur l'étiquette et le texte du champ de saisie

• Sélection de la méthode de paiement

  • Titre passé de <span> à <h2>

  • Correction du contraste

  • Lien « modifier » - ajout d'un attribut title pour le lecteur d'écran afin de fournir des informations supplémentaires

• Sélection de l'adresse de facturation

  • Titre passé de <span> à <h2>

  • Correction du contraste

  • Lien « modifier » - ajout d'un attribut title pour le lecteur d'écran afin de fournir des informations supplémentaires

• Barre latérale

  • Correction du problème de contraste sur la couleur du texte des prix

  • Correction de l'alerte du tableau de mise en page en ajoutant un en-tête de tableau vide

  • Correction de la couleur des liens

2. Page de la règle d'âge

• Réglage du « tabindex » pour un ordre de tabulation correct

• Correction de l'étiquette du champ numérique - ajout du texte d'aide en tant qu'attribut title pour un lecteur d'écran

• Correction du niveau de titre

• Suppression des éléments <p> inutiles autour de la description

• Ajout d'un fieldset autour des boutons radio

• Correction du niveau de titre pour la vérification Stripe Identity

3. Page d'utilisation d'un bon (voucher)

• Correction du problème de contraste sur l'étiquette et le texte du champ de saisie

• Correction de la lecture par le lecteur d'écran du lien « continuer les achats »

• Titre passé de <h3> à <h2> et correction du contraste

4. Produit déjà acheté

• Correction du contraste du titre d'erreur