Visionneuse

[goetsu]

https://example.osuny.org/fr/actualites/2024-11-18-la-nouvelle-visionneuse-dosuny/

• l'image devrait avoir un alt générique "illustration" ou mieux, si une alternative à l'image est contribué en back office (qui n'est pas la légende) alors c'est cette alternative qui se retrouve dans le alt de l'image (conformité)
• si il y a une légende ou des crédits ajouter une aria-describedby sur l'image dont la valeur sur lightbox-information (si légende seule) lightbox-credit (si crédit seule) lightbox-information lightbox-credit (si légende et crédit) (conformité)
• remplacer le tabindex="0" sur l'image par un tabindex="-1" (conformité)

[arnaudlevy]

Problème

URL

https://example.osuny.org/fr/actualites/2024-11-18-la-nouvelle-visionneuse-dosuny/

Description

Qu'est-ce qui ne va pas ?

TODO

Impact

Dans quelle situation ceci est-il gênant ? En vocal ? Au clavier ? Quel handicap ?

TODO

Nature

1. Conformité (TODO quel critère ?)
2. Conformité (TODO quel critère ?)
3. Conformité (TODO quel critère ?)

Code problématique

Code, éventuellement simplifié, à l'origine du problème.

TODO

<figure class="image-square lightbox-figure" role="figure" aria-label="Amy Goodchild, dans son article Coder mon écriture - lien externe&nbsp;(en anglais : Coding my handwriting) explique le procédé qu'elle a réalisé pour transposer son écriture manuscrite dans un programme, afin de l'utiliser virtuellement.">
  <picture class="is-png">
    <source media="(min-width: 1024px)" type="image/webp" srcset="...">
    <img src="..."
         alt=""
         width="1000"
         height="1000"
         loading="lazy">
  </picture>
  <button class="lightbox-button" data-lightbox="...">
    <span class="sr-only">Agrandir l'image Amy Goodchild, dans son article Coder mon écriture - lien externe&nbsp;(en anglais : Coding my handwriting) explique le procédé qu'elle a réalisé pour transposer son écriture manuscrite dans un programme, afin de l'utiliser virtuellement.</span>
  </button>
  <figcaption>
    <p></p>
    <p>Amy Goodchild, dans son article <a href="https://www.amygoodchild.com/blog/cursive-handwriting-in-javascript" target="_blank">Coder mon écriture<span class="sr-only"> - lien externe</span></a>&nbsp;(en anglais : <i>Coding my handwriting</i>) explique le procédé qu'elle a réalisé pour transposer son écriture manuscrite dans un programme, afin de l'utiliser virtuellement.</p>
    <p></p>
    <div class="credit">
      <p><a href="https://www.amygoodchild.com/" target="_blank">Amy Goodchild<span class="sr-only"> - lien externe</span></a><br></p>
    </div>
  </figcaption>
</figure>

Solution

Description

• 1. l'image devrait avoir un alt générique "illustration" ou mieux, si une alternative à l'image est contribué en back office (qui n'est pas la légende) alors c'est cette alternative qui se retrouve dans le alt de l'image (conformité)
• 2. si il y a une légende ou des crédits ajouter une aria-describedby sur l'image dont la valeur sur lightbox-information (si légende seule) lightbox-credit (si crédit seule) lightbox-information lightbox-credit (si légende et crédit) (conformité)
• 3. remplacer le tabindex="0" sur l'image par un tabindex="-1" (conformité)

Code cible

À quoi doit ressembler le code après réparation ?

<figure class="image-square lightbox-figure" role="figure" aria-label="Amy Goodchild, dans son article Coder mon écriture - lien externe&nbsp;(en anglais : Coding my handwriting) explique le procédé qu'elle a réalisé pour transposer son écriture manuscrite dans un programme, afin de l'utiliser virtuellement.">
  <picture class="is-png">
    <source media="(min-width: 1024px)" type="image/webp" srcset="...">
    <img src="..."
         alt="Illustration"
         width="1000"
         height="1000"
         loading="lazy"
         aria-describedby="block-image-0-information block-image-0-credit">
  </picture>
  <button class="lightbox-button" data-lightbox="...">
    <span class="sr-only">Agrandir l'image Amy Goodchild, dans son article Coder mon écriture - lien externe&nbsp;(en anglais : Coding my handwriting) explique le procédé qu'elle a réalisé pour transposer son écriture manuscrite dans un programme, afin de l'utiliser virtuellement.</span>
  </button>
  <figcaption>
    <div class="information" id="block-image-0-information">
      <p>Amy Goodchild, dans son article <a href="https://www.amygoodchild.com/blog/cursive-handwriting-in-javascript" target="_blank">Coder mon écriture<span class="sr-only"> - lien externe</span></a>&nbsp;(en anglais : <i>Coding my handwriting</i>) explique le procédé qu'elle a réalisé pour transposer son écriture manuscrite dans un programme, afin de l'utiliser virtuellement.</p>
    </div>
    <div class="credit" id="block-image-0-credit">
      <p><a href="https://www.amygoodchild.com/" target="_blank">Amy Goodchild<span class="sr-only"> - lien externe</span></a><br></p>
    </div>
  </figcaption>
</figure>

Effet attendu

En quoi est-ce une amélioration pour les personnes impactées ?
Par exemple, quelle est la vocalisation attendue ?

TODO

Source

D'où vient cette recommandation ?

TODO

Exemple d'implémentation

Où peut-on observer cette solution en production ?

TODO

[alexisben]

l'image devrait avoir un alt générique "illustration" ou mieux, si une alternative à l'image est contribué en back office (qui n'est pas la légende) alors c'est cette alternative qui se retrouve dans le alt de l'image (conformité)

Le alt avec un texte comme "illustration" semble être contradictoire avec le 1.1.1 et le 1.2.1

si il y a une légende ou des crédits ajouter une aria-describedby sur l'image dont la valeur sur lightbox-information (si légende seule) lightbox-credit (si crédit seule) lightbox-information lightbox-credit (si légende et crédit) (conformité)

Ok très clair.

remplacer le tabindex="0" sur l'image par un tabindex="-1" (conformité)

Le tabindex=0 sur l'image sert à focus l'image lorsqu'on clique sur suivant / précédent de la visionneuse. Si l'on passe un tabindex=-1 que faut-il focus lorsqu'on navigue via les boutons de la visionneuse ?

@goetsu

[goetsu]

l'image ne peut pas etre décorative dans ce contexte, tu ne peux pas supprimer le tabindex puisque le focus est bougé sur l'image quand on va à image suivante / précédente dans la visionneuse

[alexisben]

Proposition pour le point du focus :

• à l'ouverture de la visionneuse, la balise img n'a pas de tabindex et n'est donc pas focusable.
• si l'on navigue via la visionneuse, on ajoute à la balise img un tabindex=0 et on focus l'élément.

Est-ce correct @goetsu ?

[goetsu]

tabindex -1 pas 0

[alexisben]

Mais comment je focus l'image avec un tabindex=-1 ? Ou alors il faut nous dire où placer le focus si ce n'est pas sur l'image ?

[goetsu]

tabindex -1 permet de rendre focusable un élément via javascript sans qu'il devienne focusable dans le flux naturel ce qui est le but recherché ici

[alexisben]

Ah super ! On ne savait pas que c'était permis. J'ai mis à jour le thème avec les correctitfs du tabindex et du aria-describedby

[goetsu]

c'est ok sur ces deux correctifs, reste le alt générique à prévoir

[arnaudlevy]

@goetsu cf #760 (comment)

[alexisben]

J'ajoute un alt générique sur l'image dans la visionneuse

[alexisben]

@goetsu je crois qu'on est tout bon pour ce point, tu confirmes ?

[goetsu]

si @arnaudlevy est ok c'est bon pour moi

[arnaudlevy]

Ben moi je vous suis !