Pack liberté : audit accessibilité

Retour à la page d'accueil du groupe Accessibilité

/!\ Travail en cours /!\

Cette page présente évaluation de l'accessibilité du site packliberte.org/test en cours de réalisation.

Si vous souhaitez participer, n'hésitez pas à laisser votre avis sur la page de discussion en suivant au mieux ces recommandations.

Contexte

L'April, Framasoft et la Quadrature du net vont lancer une campagne commune de collecte de dons. Dans ce cadre, ces trois associations ont prévu un site web pour expliquer leur démarche et permettre un paiement en ligne.

Le site à tester est à l'adresse: packliberte.org/test.

Objectif de l'évaluation

Tester et remonter les principaux freins à l'accessibilité de ce site. Il ne s'agit pas d'un audit complet, mais plutôt de lever les principaux points bloquants.

La méthode utilisée reposera sur les critères d'accessibilité du Web au sens des W.C.A.G 2. Tout ce qui sort de ce cadre pourra être relevé dans la section "Autres suggestions d'amélioration".

Les remontées de "bugs" d'accessibilité seront accompagnées si possible de propositions de correction.

Pour évaluer l'accessibilité, nous pourrons nous appuyer sur le référentiel AccessiWeb 2.1.

Bugs d'accessibilité

• La barre de menu est répétée plusieurs fois au sein de la même page. Cette redondance est gênante et n'est faite qu'à des fins de présentation. Proposition de correction: Ne mettre le menu qu'une seule fois et le figer en CSS avec "position:fixed;".
  • Attention, il s'agit d'un choix de design qu'il est facile de modifier techniquement, mais qui dont les couleurs et la présentation peuvent être plus rudes à changer...
    • Palliatif rapide à installer avec ARIA : entourer chaque menu d'un élément HTML5 nav (donc ul dans nav) et ajouter un attribut role="navigation" sur le premier élément nav ainsi que des attributs aria-hidden="true" sur tous les autres éléments nav (donc pas le premier). Ainsi, pour les lecteurs d'écran très récents, la 1ère liste est indiquée comme étant le menu de navigation et on leur dit d'ignorer les autres listes.
• Contrastes de couleurs mieux qu'au début, mais encore très insuffisants. Utiliser l'extension Firefox Color Checker, onglet Document, test WCAG 2 pour évaluer. Le survol des liens des associations en jaune clair sur fond blanc est particulièrement illisible.
  • les couleurs ont été modifiées partout pour être plus contrastées, il y a encore certaines modifier à rajouter pour s'assurer que l'outil voit correctement ces contrastes
• Image de la mappemonde purement décorative: mettre un alt vide.
  • fait
• Contextualiser les alternatives aux images de cadenas: verrouiller (ou déverrouiller) montant pour April, etc.
  • c'est à dire? Que veut dire "Contextualiser" dans ce contexte?:)
    • Préciser qui/quoi est "verrouillé" : l'April pour le 1er mais Framasoft pour le 2e et LQDN pour le 3e. Je propose "Figer le montant du don pour NNN" (et l'inverse de figer c'est euh j'en sais rien)
• Permettre l'accès au clavier aux bulles d'aide concernant les cases à cocher pour la conservation des coordonnées et la communication de son adresse
  • une réflexion va être menée là dessus
• L'alternative à l'image du pack doit être vide (image purement décorative). À moins qu'à terme cette image ne devienne un lien vers le cadeau à télécharger.
  • fait
• Si les images des assos sont en fait un lien qui renvoient vers le site des assos, mettre un alt qui indique la destination du lien. Par exemple: alt="Framasoft" plutôt que alt="Logo Framasoft".
  • fait
• Les 2 premiers titres h3 sous "Un pack pour soutenir les libertés" ne sont pas des titres puisqu'ils n'introduisent aucun contenu, aucun paragraphe de texte. Les remplacer par des éléments p en gardant leur style actuel. Pour ce faire, le plus rapide amha est de rajouter au code HTML une classe .h3-like (

  ) et en CSS de rajouter cette classe .h3-like partout où apparait le sélecteur h3

• Images désactivées mais CSS activées, les carrés du menu de navigation ne sont que des carrés de couleur unie puisque le texte est placé hors écran via CSS mais le sprite CSS utilisé n'est pas chargé ni affiché. Quasi insoluble puisqu'en plus les CSS3 sont utilisées pour animer le menu au survol (pour info donc).
• Slider tout nouveau : prévoir des contrôles pour pouvoir arrêter le défilement automatique (et pour pouvoir le relancer, ça peut être un seul "bouton" Play/Pause), passer au slide suivant (et précédent si possible) ou afficher une barre de 5 boutons qui permet de sauter directement à chacun des slides.
• majuscule accentuée à "Étape suivante" pour éviter d'entendre "Eutape suivante" dans les lecteurs d'écran avec synthèse vocale

Autres suggestions d'amélioration

• ajouter une page accessibilité indiquant le fonctionnement du site. Idéalement, il suffirait d'ajouter un picto dans la barre de menu.
• ajouter un title pour rendre les pictos compréhensibles au survol de la souris
  • fait
• ajouter la possibilité de donner directement dès le premier écran et sur tous les menus.
  • il y a un lien sur chaque page avant la partie donation
• Tant que les contenus finaux ne sont pas connus, difficile à dire. Mais en l'état, un lien sur la page de chaque asso dédié au pack liberté pour en savoir plus serait peut-être plus pertinent qu'un encart sur le site même qui, s'il est trop long, peut devenir illisible.
  • à creuser d'un point de vue éditorial
• Détail quand les images sont désactivées: à la section Présentations, le texte alternatif des 3 logos April/Framasoft/LQDN qui s'affiche dans ce cas est alors très discret. Sans que ça ait d'influence sur le cas courant où les images sont activées, on peut rajouter les 3 instructions CSS dans le bloc de règle de .tiers img { font-wright: bold; font-size: 1.3em; text-align: center; } (ligne ~344)
• Dans la FAQ, il est écrit "Les associations n'aura jamais connaissance de votre numéro de carte bancaire. ". Elles n'aurONT jamais connaissance