Bonjour,
en plus de commenter quelques points du mail d'Edouard Lopez dans le
corps de son mail ci-dessous en vert,
voici quelques points supplémentaires à ce qu'Armony avait écrit sur
le wiki (page :
http://wiki.april.org/w/Pack_libert%C3%A9_:_audit_accessibilit%C3%A9#Bugs_d.27accessibilit.C3.A9
)
- Un palliatif pour les barres de menus répétitives et qui
serait rapide à installer serait d'utiliser un soupçon d'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.
- Toujours pour ces barres de menu, dans le cas 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 ni
chargé ni affiché. Il n'y a pas grand chose à faire pour
corriger ça, à part tout refaire puisqu'en plus les CSS3 sont
utilisées pour animer le menu au survol. Passons.
- 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 (<p class="h3-like">) et
en CSS de rajouter cette classe .h3-like partout où apparait le
sélecteur h3
- Un slider vient d'être ajouté : prévoir des contrôles pour
pouvoir arrêter et relancer le défilement automatique (ça peut
être un seul "bouton" Play/Pause enfin "Stopper/Relancer
l'animation"), 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.
- Écrire "Étape suivante" et non "Etape suivante" (majuscule
accentuée)
- Hors accessibilité, un détail quand les images sont
désactivées à la section Présentations concernant le texte
alternatif des 3 logos April/Framasoft/LQDN. Ils s'affichent
très discrètement dans ce cas. 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; } (vers la ligne 344) et ça n'a pas
d'influence sur le style de la page quand les images sont
activées.
- Dans la FAQ, il est écrit "Les associations n'aura jamais
connaissance de votre numéro de carte bancaire. ". Elles
n'aurONT jamais connaissance
(...)
Le 26/01/2012 15:39, [list:April] Edouard Lopez a écrit :
Bonjour,
- je viens d'aller sur votre site et sur le wiki, ils semblent
que les contrastes posent encore problème, notamment le rose.
J'ai testé avec l'extension
Firefox colorChecker. Et j'avoue qu'en quittant
la page j'avais les yeux qui piqués à cause de l'intensité du
rose/rouge
Un pack pour soutenir les libertés
- C'est quoi l'utilité du pack qui gigote au survol ? Je
pensais qu'il y avait un lien, mais non rien, ça gigote c'est
tout.
- La mise en page est intéressante, mais j'ai scrollé
directement sans passé par les menu en haut. Avez vous penser
à le remplacer par deux boutons en pied de section ?
- Ça éviterai la redondance dont parlait Armony,
Ça me dérangeait également mais comme le(s)
menu(s) sont alternativement sur fond blanc et sur fond rose, ils
ne peuvent pas être de l'une de ces couleurs sans quoi une section
sur deux, ils seraient quasi-invisibles ... Du coup, faut trouver
autre chose pour résoudre ce problème. On peut mettre les pictos
dans un cartouche (un encadré) blanc, rose ou bleu et au pire sur
fond blanc, le cartouche blanc est pas visible mais on voit encore
les pictos roses. Ou bien utiliser
ARIA comme indiqué ci-dessus, ce qui ne concernera que les
lecteurs d'écran.
- cela constituerai un call-to-action suffisant pour
l'utilise au lieu de scrollé
- cela sera plus en adéquation avec un système de navigation
avant/arrière
Le grand ternet est sale!
- Dans la section lol
l'intitulé du lien « par là » devrait être remplacé par «
partager ces lolcat ».
- pourquoi quand on clic sur une ancre l'adresse du
navigateur ne se met pas à jour ? On pert une partie de
l'intérêt des ancres (partager un endroit précis d'un
document)
Ah bien vu. On peut partager un lien avec
ancre (via clic droit, Copier l'adresse du lien), on atterrit au
bon endroit. Mais ça ne fonctionne pas avec la barre d'adresse.
Est-ce qu'il faudrait utiliser en plus le plugin History
http://tkyk.github.com/jquery-history-plugin/ ou est-ce que c'est
le plugin de scroll "doux" (?) qui est mal utilisé ?
Éviter la justification du texte, cela peut générer une lézarde/river-effect,
notamment pour les dyslexiques (cf. Is
justified text, err... justified?). Il vaut mieux
l'aligné à gauche/droite selon le script utilisé.
C'est particulièrement visible sur les 3
lignes de "Partage"
Présentation
- les liens de présentation April/Framasoft/QDN sont
uniquement en _javascript_ ? A non c'est dynamiquement
surchargé, mais le lien original pointe vers une image qui
contient du texte, c'est pas top. Il faudra une alternative
textuelle.
Montant du don
- Pourquoi utiliser des boutons radios pour choisir le montant
initial et non un slider (compléter du champs de saisi)
- Ça donne quoi « fabuleux-wizz-tip-top-moumoute » avec un
lecteur d'écran ?
- Il faudrai signaler les changements de langues, avec un code
comme celui-ci : <span lang="en">Do It Yoursefl
(DIY)</span>
- le champ pour le courriel pourrait être typé type="email",
c'est un plus dans les navigateur qui le supporte et pour les
autres ça ne change rien.
- Avec _javascript_ les bulles d'aide des boites à cocher font
sauter la page
- le formulaire ne peux pas être validé sans _javascript_, le
formulaire pointe vers action=""#nowhere"
Bon courage :)
Cordialement,
Édouard Lopez
Consultant web : Ergonomie,
Architecture de l'Information, User Experience &
Accessibilité.
Tél. *new*
:
+33.(0)7.60.06.97.30
www : http://edouard-lopez.com/
Cordialement,
Ph. Vayssière
|
