Montants : markup, symboles et accessibilité #4

Closed
opened 1 year ago by tcharlss · 5 comments
tcharlss commented 1 year ago
Owner

Voici comment procède shopify pour afficher les montants :

<span class="price">
    <span class="visuallyhidden">79&nbsp;$</span>
    <span aria-hidden="true"><sup>$</sup><span class="price__number">79</span>
</span>

Ils ont 2 spans distincts : un non visible destiné aux lecteur d'écrans, et un visible pour les autres.
Bon ils mettent le symbole au lieu du code de la devise dans le truc censé être accessible, mais c'est pas la question.

On pourrait reprendre un principe similaire afin que ça reste accessible quelque soit le format d'affichage choisi (avec un symbole ou autre).

Et le choix d'afficher le code des devises ou leur symbole pourrait devenir une petite option de config sympatoche, sans que ça touche à l'accessibilité.

Voici comment procède shopify pour afficher les montants : ```html <span class="price"> <span class="visuallyhidden">79&nbsp;$</span> <span aria-hidden="true"><sup>$</sup><span class="price__number">79</span> </span> ``` Ils ont 2 spans distincts : un non visible destiné aux lecteur d'écrans, et un visible pour les autres. Bon ils mettent le symbole au lieu du code de la devise dans le truc censé être accessible, mais c'est pas la question. On pourrait reprendre un principe similaire afin que ça reste accessible quelque soit le format d'affichage choisi (avec un symbole ou autre). Et le choix d'afficher le code des devises ou leur symbole pourrait devenir une petite option de config sympatoche, sans que ça touche à l'accessibilité.
Owner

Je fais le lien avec https://github.com/nursit/bank/issues/76 et #8 car les mises en formes étendues et riches posent problème si les options de non formatage ne sont pas bien mises en oeuvre

Je fais le lien avec https://github.com/nursit/bank/issues/76 et #8 car les mises en formes étendues et riches posent problème si les options de non formatage ne sont pas bien mises en oeuvre

Un problème que je vois est qu'on peut pas se reposer sur une classe CSS, là c'est pour le site public (enfin plus exactement partout, admin et public), et faut que le truc à cacher visuellement le soit vraiment partout à coup sûr. Ou alors faut forcer l'insertion de CSS par le plugin… ce qui est un peu "dommage" mais bon, pourquoi pas

Un problème que je vois est qu'on peut pas se reposer sur une classe CSS, là c'est pour le site public (enfin plus exactement partout, admin et public), et faut que le truc à cacher visuellement le soit vraiment partout à coup sûr. Ou alors faut forcer l'insertion de CSS par le plugin… ce qui est un peu "dommage" mais bon, pourquoi pas
Poster
Owner

Ah ça fait aussi penser que ça doit marcher dans d'autres contextes : les mails de notifications des commandes, les factures à imprimer, … Donc oui le truc caché visuellement en css, je sais pas si c'est envisageable.

Ah ça fait aussi penser que ça doit marcher dans d'autres contextes : les mails de notifications des commandes, les factures à imprimer, … Donc oui le truc caché visuellement en css, je sais pas si c'est envisageable.
Owner

oui je pense qu'il est important

  1. que ça s'affiche bien dans tout contexte de CSS
  2. que le texte brut, débarassé de tout le balisage, garde son sens
oui je pense qu'il est important 1. que ça s'affiche bien dans tout contexte de CSS 2. que le texte brut, débarassé de tout le balisage, garde son sens
Poster
Owner

Allez ménage, je ferme.

À réouvrir si une idée géniale émerge plus tard.

Allez ménage, je ferme. À réouvrir si une idée géniale émerge plus tard.
tcharlss closed this issue 5 months ago
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.