accessibilité : role="list" sur les listes #4850

Open
opened 2 months ago by tcharlss · 10 comments
Owner

Nous somme bien d'accords qu'en théorie ça n'est pas nécessaire, c'est redondant avec la sémantique des balises <ul> et <ol>.

Mais en pratique, je tombe sur cet article : https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

En résumé ça explique que quand les CSS ciblant les listes suppriment les indications visuelles avec list-style: none (les points), alors certains lecteurs considèrent qu'il ne s'agit plus de "vraies" listes et retirent cette sémantique (VoiceOver de Safari).

La solution est de rajouter l'attribut role="list" pour s'assurer de garder la sémantique.

Nous somme bien d'accords qu'en théorie ça n'est pas nécessaire, c'est redondant avec la sémantique des balises `<ul>` et `<ol>`. Mais en pratique, je tombe sur cet article : https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html En résumé ça explique que quand les CSS ciblant les listes suppriment les indications visuelles avec `list-style: none` (les points), alors certains lecteurs considèrent qu'il ne s'agit plus de "vraies" listes et retirent cette sémantique (VoiceOver de Safari). La solution est de rajouter l'attribut `role="list"` pour s'assurer de garder la sémantique.
tcharlss added the
amélioration
label 2 months ago
tcharlss referenced this issue from a commit 2 months ago
tcharlss referenced this issue from a commit 2 months ago

Est-ce que tu as des exemples d'usage des raccourcis typo de SPIP qui ne soient pas stylés en liste ?

Autant, je vois bien pour des choses telles que la navigation, autant je ne vois pas dans le texte des articles.

Est-ce que tu as des exemples d'usage des raccourcis typo de SPIP qui ne soient pas stylés en liste ? Autant, je vois bien pour des choses telles que la navigation, autant je ne vois pas dans le texte des articles.
Poster
Owner

N'importe quel thème de n'importe quel squelette ou plugin peut appliquer cette règle.

N'importe quel thème de n'importe quel squelette ou plugin peut appliquer cette règle.
b_b added this to the spip-4.2 milestone 2 months ago
Owner

Je doute... et on dirat bien que l'auteur de l'article ausssi "I find myself a bit torn here."

Il cite :

In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser.

Puis :

a lack of list semantics “…may not be a big deal unless user testing says you really need a list.”

Doublonner l'info avec l'attribut aria n'est pas recommandé, donc ça me chagrine un peu que SPIP le fasse par défaut afin d'assurer un cas d'usage qui ne l'est pas.

Je doute... et on dirat bien que l'auteur de l'article ausssi "I find myself a bit torn here." Il cite : > In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser. Puis : > a lack of list semantics “…may not be a big deal unless user testing says you really need a list.” Doublonner l'info avec l'attribut aria n'est pas recommandé, donc ça me chagrine un peu que SPIP le fasse par défaut afin d'assurer un cas d'usage qui ne l'est pas.
Owner

je pense que @tcharlss fait référence à la méthode de stylage des listes où l'on fait un list-style: none pour retirer les puces et les remplacer par une image background parce qu'on a une charte graphique contraignante.

Il me semble que c'est encore une méthode usitée, non ?

Et pour le coup je pense pas que les listes SPIP soient utilisée pour autre chose que des listes, donc ça me choque pas qu'on explicite dans le markup.

Idéalement il faudrait pouvoir le faire en CSS pour contrebalancer la règle initiale, mais je pense pas qu'on puisse faire ça...

je pense que @tcharlss fait référence à la méthode de stylage des listes où l'on fait un `list-style: none` pour retirer les puces et les remplacer par une image background parce qu'on a une charte graphique contraignante. Il me semble que c'est encore une méthode usitée, non ? Et pour le coup je pense pas que les listes SPIP soient utilisée pour autre chose que des listes, donc ça me choque pas qu'on explicite dans le markup. Idéalement il faudrait pouvoir le faire en CSS pour contrebalancer la règle initiale, mais je pense pas qu'on puisse faire ça...
Owner

Il me semble que c'est encore une méthode usitée, non ?

Oui, mais j'insiste sur le fait que les sites qui ne font pas ça (le cas par défaut donc) se retrouveraient avec un comportement "unnecessary and not recommended" pour pallier au fait que certains site le feraient.

> Il me semble que c'est encore une méthode usitée, non ? Oui, mais j'insiste sur le fait que les sites qui ne font pas ça (le cas par défaut donc) se retrouveraient avec un comportement "unnecessary and not recommended" pour pallier au fait que certains site le feraient.
Poster
Owner

@b_b ah mais tu as zappé ce qu'il dit juste après :p

“Except you do need to use ARIA to re-attach list semantics for this one specific browser and screen reader combination.
(...)
With that said, sometimes you have to go against best practices when best practices don’t align with what it is you need to accomplish.

C'est une rustine pour palier aux défauts d'un navigateur précis (utilisé à ~10%).

Il y en a eu par le passé pour IE et autres, donc ça me semblait pas hors de propos dans ce cas de figure là.

@b_b ah mais tu as zappé ce qu'il dit juste après :p > “Except you do need to use ARIA to re-attach list semantics for this one specific browser and screen reader combination. > (...) > With that said, sometimes you have to go against best practices when best practices don’t align with what it is you need to accomplish. C'est une rustine pour palier aux défauts d'un navigateur précis (utilisé à ~10%). Il y en a eu par le passé pour IE et autres, donc ça me semblait pas hors de propos dans ce cas de figure là.
Owner

ah mais tu as zappé ce qu'il dit juste après

Non non, j'ai bien pris le temps de lire en entier :)

En résumé, on ferait quelque chose non recommandé, pour un cas d'usage qui n'est pas celui par défaut, et qui concerne environ 10% des navigateurs. Si ça vous semble justifié, gogogo.

> ah mais tu as zappé ce qu'il dit juste après Non non, j'ai bien pris le temps de lire en entier :) En résumé, on ferait quelque chose non recommandé, pour un cas d'usage qui n'est pas celui par défaut, et qui concerne environ 10% des navigateurs. Si ça vous semble justifié, gogogo.
Collaborator

QUestion bête : est-ce qu'on a vérifié si depuis 2019 le comportement de SAFARI n'aurait pas bougé ?

QUestion bête : est-ce qu'on a vérifié si depuis 2019 le comportement de SAFARI n'aurait pas bougé ?
Owner

Je tombe justement sur un article qui mentionne ce point...

There is one case where it might make sense to do this.

Adrian Roselli says an unstyled list not being announced as a list “…may not be a big deal unless user testing says you really need a list.” I agree with him on that point, but I’m sharing the fix in case your user testing shows it’s beneficial.

https://www.smashingmagazine.com/2022/09/wai-aria-guide/#adding-roles-that-duplicate-html

Bref, ça ne semble pas être impératif de le faire au final.

Je tombe justement sur un article qui mentionne ce point... > There is one case where it *might* make sense to do this. > Adrian Roselli says an unstyled list not being announced as a list “…may not be a big deal unless user testing says you really need a list.” I agree with him on that point, but I’m sharing the fix in case your user testing shows it’s beneficial. https://www.smashingmagazine.com/2022/09/wai-aria-guide/#adding-roles-that-duplicate-html Bref, ça ne semble pas être impératif de le faire au final.
Poster
Owner

Mais justement là ils reprennent l'argument très débattable des devs de Safari qui ont implémenté ce comportement.

Pour paraphraser le raisonnement : « si les gens décident de ne pas styler les listes comme des vraies listes, c'est qu'ils ont une bonne raison et donc c'est pas important de les annoncer comme des listes ».

C'est peut-être valable dans certains cas, quand tu fais des menus horizontaux ou ce genre de chose.

Mais là dans les textes des contenus SPIP, ben il y a aucun doute qu'il s'agit de vraies listes, qui doivent être annoncées comme des vraies listes.

Donc je trouve qu'il y a toujours une raison valable de le faire dans ce cas précis, par sécurité.

Après ça ne tranche pas la question s'il faut faire une rustine juste pour safari ou pas, il y a du pour et du contre.

Mais justement là ils reprennent l'argument très débattable des devs de Safari qui ont implémenté ce comportement. Pour paraphraser le raisonnement : « si les gens décident de ne pas styler les listes comme des vraies listes, c'est qu'ils ont une bonne raison et donc c'est pas important de les annoncer comme des listes ». C'est peut-être valable dans certains cas, quand tu fais des menus horizontaux ou ce genre de chose. Mais là dans les textes des contenus SPIP, ben il y a aucun doute qu'il s'agit de vraies listes, qui doivent être annoncées comme des vraies listes. Donc je trouve qu'il y a toujours une raison valable de le faire dans ce cas précis, par sécurité. Après ça ne tranche pas la question s'il faut faire une rustine juste pour safari ou pas, il y a du pour et du contre.
Sign in to join this conversation.
No Milestone
No Assignees
5 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.