[accessibilité] Améliorer l'en-tête des posts

[AAClause]

Actuellement, l'en-tête d'un post de forum se présente comme suit avec un lecteur d'écran :

1. un lien pointant vers le profil du membre et représenté par une image (l'avatar du membre) ;
2. le texte — Auteur du sujet — (si approprié) ;
3. une liste à puce avec respectivement 3 liens : « Non lu », « Citer » et « Signaler » ;
4. un lien pointant vers le profil du membre et ayant pour intitulé le pseudo du membre ;
5. un lien pointant vers le post actuel et représenté par l'horodatage du post.

Problème :

• (cf. 1.) l'image pour l'avatar ne possède aucun texte alternatif. Le problème étant qu'ici l'absence de texte alternatif est embêtant car selon la configuration du lecteur d'écran, il nous est lu le chemin vers l'image (en tout ou partie) ou rien du tout. Du coup, on se retrouve sur un lien qui a un intitulé peu parlant ou nul ;
• (cf. *) l'ordre n'est pas des plus aisé, AMHA.

Pour l'exemple, prenons ce post. Ce post nous est restitué comme suit (en partant du principe qu'on parcourt la page simplement, c'est-à-dire de manière verticale :

lien· graphique· — 293/560bdab6-d35f-4930-8554-89ac5fb48410 —
Auteur du sujet
début de liste, 3 éléments·  lien — Non lu —
lien· — Citer —
lien sur la même page· — Signaler — ·fin de liste
lien· — Saroupille —   lien sur la même page· — Lundi 25 août 2014 à 19h24 —

N.B. : selon le réglage concernant les images non labellisées, le premier lien sera juste restitué comme « lien ».

Je souhaiterais donc voir s'il y aurais moyen d'améliorer un peu cet en-tête. En reprenant la restitution ci-dessus, je propose :

• de mettre un texte alternatif à l'avatar. E.g. : Avatar ;
• de réagencer un peu les éléments.

Idéalement, j'aimerais avoir une restitution comme suit :

lien· — Saroupille —  Auteur du sujet   lien· graphique· — Avatar —
lien sur la même page· — Lundi 25 août 2014 à 19h24 —
lien — Non lu —  lien· — Citer —  lien sur la même page· — Signaler —

À savoir que le lecteur d'écran s'appuie davantage sur le code HTML que le CSS. Ainsi, il vous est possible de réordonner ces éléments dans le HTML puis de jouer avec le CSS.

Que vous serait-il possible de faire sans tout casser ?

En espérant avoir été compréhensible… 😟 N'hésitez absolument pas à poser des questions au besoin !

[Situphen]

Alors, pour le lien de l'avatar, on peut probablement mettre un aria-hidden pour faire en sorte qu'il ne soit pas lu. C'est réalisable rapidement je pense.

Pour l'ordre des éléments dans le HTML, tu imaginerais quoi ? Il faudra faire des essais et voir si c'est réalisable facilement sans tout casser. Sinon, ça pourrait être l'occasion de mettre en place les nouveaux design proposés par Sandhose (il y a quelques temps déjà) qui sont plus simples au niveau de l'HTML et du CSS, AMHA.

[A-312]

Je n'ai pas encore regardé en détail mais tu sais si c'est possible de faire des ensembles/hiérarchie avec un lecteur d'écran ? C'est-à-dire des conteneurs qui contiennent des informations qui seront lu uniquement si on le décide. On commence par la liste des messages puis si l'utilisateur décide de se concentrer sur un message il obtiendra plus d'élément.

Par exemple :

• Sujet d'Andre9642
• Réponse d'A-312
• Réponse d'Artragis

Si on décider de sélectionner "Réponse d'A-312" c'est à dire rentrer dedans on obtient :

• lien· — Saroupille — Auteur du sujet lien· graphique· — Avatar —
• lien sur la même page· — Lundi 25 août 2014 à 19h24 —
• action sur le message

Puis si on décide a nouveau de sélectionner "action sur le message" :

• lien — Non lu — lien· — Citer — lien sur la même page· — Signaler —

[AAClause]

Tout d'abord, merci pour votre intérêt !

@Situphen :

Alors, pour le lien de l'avatar, on peut probablement mettre un aria-hidden pour faire en sorte qu'il ne soit pas lu. C'est réalisable rapidement je pense.

Je pense pas que ça soit une bonne idée. Faut pas abuser du aria-hidden. Puis imaginons que pour une raison $x$ ou $y$, je veux sauvegarder l'avatar d'un membre ? Même si c'est peu probable que ça m'arrive, je n'en devrais pas être privé… Après, ça se discute encore, mais de mon point de vue, le aria-hidden n'est pas justifié ici. N'oublions pas que ça me prive de toute interaction avec l'élément mis en aria-hidden.

@A-312 :

Je n'ai pas encore regardé en détail mais tu sais si c'est possible de faire des ensembles/hiérarchie avec un lecteur d'écran ? C'est-à-dire des conteneurs qui contiennent des informations qui seront lu uniquement si on le décide. On commence par la liste des messages puis si l'utilisateur décide de se concentrer sur un message il obtiendra plus d'élément.

Hmmm… Un peu comme la balise details en HTML5 ?

Test

                                      Z
                                     d d 
                                    S   S
                                     d d 
                                      Z 

Faire cela juste pour les lecteurs d'écran, j'en doute fort... Je vais quand même rechercher.

Après développer/réduire juste pour une ligne c'est un peu limite. Autant laisser la ligne des actions directement…

[Situphen]

@Andre9642 D'accord pour ne pas mettre de aria-hidden sur le lien de l'avatar. Que faut-il faire ? Mettre "Avatar de Utilisateur" en alt de l'image ?

[AAClause]

D'accord pour ne pas mettre de aria-hidden sur le lien de l'avatar. Que faut-il faire ? Mettre "Avatar de Utilisateur" en alt de l'image ?

Comme dit dans mon premier post, je préférerais cela en effet.

Sinon, ça pourrait être l'occasion de mettre en place les nouveaux design proposés par Sandhose (il y a quelques temps déjà) qui sont plus simples au niveau de l'HTML et du CSS, AMHA.

Y'aurait-il moyen de voir à quoi ça ressemble ?

[A-312]

Y'aurait-il moyen de voir à quoi ça ressemble ?

Actuellement c'est seulement en image

[artragis]

Fais une PR et ping situphen pour qu'il la déploie sur la béta

[A-312]

Hmmm… Un peu comme la balise details en HTML5 ? Test

Faire cela juste pour les lecteurs d'écran, j'en doute fort... Je vais quand même rechercher.

Après développer/réduire juste pour une ligne c'est un peu limite. Autant laisser la ligne des actions directement…

L'idée serait de pouvoir aller plus vite au message voulu sans devoir lire chaque élément "inférieur". :/

[AAClause]

Oh, c'est pas grand-chose, si on passe sur 3 lignes, comme je le suggère.

Faudrait voir si dans le rendu SR on pourrait même pas fusionner ligne 1 et ligne 2 (ça serait encore mieux).

<Auteur> <Info complémentaire>¹ <Date>
<Avatar> | <Actions>

Après, honnêtement sur 3 lignes c'est pas un souci car même en l'état, on peut sauter l'en-tête très rapidement. En effet, et par exemple, avec NVDA, il me suffit d'appuyer sur d ou SHIFT+d (selon la direction) pour aller de <article> en <article>, et n (ou SHIFT+n) pour sauter le bloc de liens qui constitue l'en-tête du post.

Par exemple, il m'arrive régulièrement de sauter directement les signatures pour arriver directement sur la première ligne constituant le corps du post suivant. Pour cela, j'ai juste à faire d puis n rapidement. C'est très rapide. Je souhaiterais juste que ça soit plus efficace en ayant plus d'info sur la première ligne, lorsque je fais d, actuellement cela ne permettant d'avoir que le lien de l'avatar…