Modifications apportées pour garantir l'accessibilité de notre Frisbii Media Self Service.
Modifications générales
Problèmes de contraste : la couleur principale (utilisée dans la navigation principale et à de nombreux autres endroits de l'application) a été remplacée par #00558b (au lieu de #18a0fb) afin d'améliorer le contraste.
Liens/boutons vides : lorsqu'un lien ou un bouton ne contient aucun texte, sa fonction ou son objectif n'est pas communiqué à l'utilisateur. Cela peut créer de la confusion pour les utilisateurs de clavier et de lecteur d'écran. Ce problème est résolu en :
Ajoutant un texte masqué à l'intérieur de ces liens/boutons (visible uniquement pour les lecteurs d'écran), ou
Ajoutant l'attribut aria-label.
Titre de niveau 1 manquant : les pages sans balise <h1> incluent désormais une balise <h1> visible uniquement pour les lecteurs d'écran. Afficher un titre de page unique visible n'a pas de sens contextuel pour notre mise en page.
Niveaux de titre sautés : la structure des titres a été ajustée pour éviter de sauter des niveaux (par exemple, l'utilisation d'un <h5> directement après un <h2>).
Étiquettes de formulaire manquantes : tous les champs de formulaire disposent désormais d'une étiquette correspondante.
Groupes de champs manquants : les cases à cocher et boutons radio associés ont été regroupés dans des éléments <fieldset> appropriés.
Étiquettes de formulaire orphelines : toutes les étiquettes de formulaire sont désormais correctement associées à leurs champs respectifs.
Texte de lien ambigu : cela signifie que la destination du lien n'est pas clairement identifiable à partir du texte du lien.
Lien redondant : lorsque deux liens adjacents mènent au même endroit.
Corrections à l'échelle de l'application
Correction des problèmes de contraste dans les liens de navigation principale.
Ajout d'attributs aria-label aux liens de pagination « Précédent » et « Suivant » (qui n'avaient auparavant aucun texte). Le lien « Suivant » devient également un élément span lorsque vous êtes à un lien de la fin (lorsque le lien du dernier numéro et le bouton suivant mènent à la même page)
Correction du problème de contraste sur le bouton retour.
Pour le bouton de réduction/expansion du menu mobile (qui n'avait aucun texte visible), ajout d'un élément <span> masqué pour l'accessibilité aux lecteurs d'écran.
Corrections spécifiques à certaines pages
1. Page de vue d'ensemble
Ajout d'un attribut aria-label aux liens de téléchargement des factures.
Mise à jour des titres des vignettes, passés de <h2> à <h1>.
Suppression du lien « plus » de la section « Administration des utilisateurs » lorsque le lien « Gérer les utilisateurs » est affiché
Ajout d'un élément <span> visible uniquement pour les lecteurs d'écran, avec un texte supplémentaire expliquant la destination du lien, pour tous les liens « Plus » de la page
2. Données personnelles
Ajout d'un titre <h1> global visible uniquement pour les lecteurs d'écran.
Correction du problème de contraste sur le bouton « Authentification à deux facteurs ».
Ajout d'un attribut aria-label au lien « modifier » pour fournir davantage d'informations
3. Adresses
Correction du lien vide pour la création d'adresse.
Ajout d'un titre <h1> global visible uniquement pour les lecteurs d'écran.
Correction du niveau de titre : passage de <h5> à <h1> dans la fenêtre modale de suppression des modifications d'adresse futures.
4. Formulaires de création/modification d'adresse
Regroupement des boutons radio du type d'adresse et des cases à cocher des abonnements dans des éléments <fieldset>.
5. Page des paiements
Ajout du titre <h1> manquant.
Mise à jour des titres des sections de chaque méthode de paiement, passés de <h4> à <h1>.
6. Page d'ajout de carte bancaire
Ajout du titre <h1> manquant.
Ajout de l'étiquette de formulaire manquante pour le champ de saisie masqué payoneCheck.
Étiquette de formulaire orpheline : l'étiquette du numéro de carte a été transformée en élément span, car il ne s'agit pas d'une véritable étiquette dans la mesure où l'élément cible se trouve dans une iframe
7. Ajout d'une méthode de paiement à un abonnement
Passage du titre principal de la page de <h2> à <h1>.
8. Abonnements
Ajout d'un titre <h1> global visible uniquement pour les lecteurs d'écran.
Passage des titres de section « Abonnements » et « Achats » de <h2> à <h1>.
Suppression de l'attribut aria-labelledby utilisé de manière incorrecte dans l'affichage mobile de la liste des achats.
Ajout d'un attribut aria-label au titre de la fenêtre modale du code d'achat.
Texte de lien ambigu : ajout d'un texte visible uniquement pour les lecteurs d'écran au lien des détails du module complémentaire
Tableau de mise en page : remplacement de la mise en page en tableau par un style CSS imitant l'apparence d'un tableau pour la liste des achats
9. Pause/annulation d'abonnement/pause de livraison (et pages d'annulation correspondantes)
Passage du titre principal de la page de <h2> à <h1>.
10. Ajout/modification de compte bancaire
Passage du titre existant de <h2> à <h1>
11. Ajout/modification de compte PayPal
Passage du titre existant de <h2> à <h1>
12. Page d'administration des utilisateurs
Ajout d'un titre <h1> global visible uniquement pour les lecteurs d'écran.
Ajout d'un attribut aria-label aux liens de téléchargement CSV dans la pagination.
13. Administration des utilisateurs – Page de gestion des utilisateurs
Passage de <h2> à <h1>.
Passage des titres des fenêtres modales de <h5> à <h1> afin d'éviter de sauter des niveaux de titre.
Ajout d'attributs aria-label aux boutons d'action utilisateur (inviter, supprimer, tout inviter).
Ajout d'attributs aria-label au champ du formulaire de recherche et aux champs de la fenêtre modale d'invitation d'utilisateur.
14. Page des portefeuilles
Ajout d'un titre <h1> visible uniquement pour les lecteurs d'écran.
Texte de lien ambigu : ajout d'un élément span contenant un lien visible uniquement pour les lecteurs d'écran, avec un texte supplémentaire expliquant la destination du lien
15. Pages de modification de l'e-mail / du code de confirmation de l'e-mail / des informations personnelles / du mot de passe
Passage des titres existants de <h2> à <h1>.
16. Étapes de prévention de la résiliation
Passage des titres existants de <h2> à <h1> et de <h3> à <h2> pour toutes les étapes du processus
17. Annulation d'abonnement
Suppression de l'opacité de la valeur d'espace réservé du menu de sélection de la date d'annulation pour les abonnements basés sur des numéros
18. Page de modification du mot de passe
Ajout du rôle « button » et d'un attribut aria-label à l'icône de bascule de visibilité du mot de passe (icône en forme d'œil)