Update article svg

src/fr/articles/svg-accessibles.md

@@ -1,5 +1,5 @@
 ---
-title: "Les images SVG sont de plus en plus utilisées sur le web mais qu’en est-il de leur accessibilité ?"
+title: "L'accessibilité des images SVG"
 abstract: "Comment rendre accessibles les images SVG"
 titleBeforeTag: true
 date: "2021-01-01"
@@ -8,91 +8,138 @@ tags:
   - intermediate
 ---
 
-Voici quelques pistes sachant que le support navigateurs/aide techniques évolue très rapidement !
-Important : Pensez donc à tester vos implémentations sur des cibles navigateurs /aides techniques les plus utilisées par vos utilisateurs, cela, quel que soit la solution pour laquelle vous optez. ;
+Mise à jour : décembre 2024
+
+Voici quelques recommandations techniques pour vous aider à intégrer des images SVG accessibles.
+
+Important : Quelle que soit la solution retenue, le support navigateurs/aides techniques évoluant très rapidement, pensez à tester vos implémentations sur les configurations les plus utilisées par vos utilisateurs.
 
 ## Image de décoration
 
 ### SVG dans une balise `img`
 <pre><code class="html">
-&lt;img src="XXX.svg" alt="" aria-hidden=”true” /&gt;
+&lt;img src="XXX.svg" alt="" aria-hidden="true"&gt;
 </code></pre>
 
+
 ### SVG en ligne (inline)
 <pre><code class="html">
-&lt;svg aria-hidden="true" focusable="false"&gt;
+&lt;svg aria-hidden="true"&gt;
 …
 &lt;/svg&gt;
 </code></pre>
 
-On utilise `focusable="false"` pour éviter toute prise de focus sur le SVG par IE (>10 et Edge)
+Vous devez vous assurer que la balise `svg` ou un de ses enfants (`<g>`, `<path>`…) ne possède aucun attribut visant à lui fournir un nom accessible (`title`, `desc`, `aria-*`…).
+
+Note : historiquement, l'attribut `focusable="false"` devait aussi être présent pour éviter toute prise de focus sur le SVG par Internet Explorer et Edge, ceci n'est plus utile sur les navigateurs actuels.
+
 
-De plus, vous devez vous assurer que la balise `svg` ou un de ses enfants (`<g>`, `<path>`…) ne possède aucun attribut visant à lui fournir un nom accessible (`title`, `desc`, `aria-*`…). 
 
 ## Image informative (hors lien ou bouton)
 
 ### SVG dans une balise `img`
+
+La solution la plus efficace consiste à utiliser l'attribut `alt` :
+
 <pre><code class="html">
-&lt;img src="XXX.svg" alt="texte de remplacement" role="img" /&gt;
+&lt;img src="XXX.svg" role="img" alt="texte de remplacement"&gt;
 </code></pre>
 
-en second choix&nbsp;:
+en second choix, utiliser `aria-label` (mais celà enfrein la première règle d'ARIA, à savoir, ne pas utiliser d'ARIA si une solution native HTML existe)
+&nbsp;:
+<pre><code class="html">
+&lt;img src="XXX.svg" role="img" aria-label="texte de remplacement"&gt;
+</code></pre>
+
+Note : Afin d'assurer un support optimal par les aides techniques et navigateurs, éviter l'usage de `aria-labelledby` pointant sur un texte masqué :
+
 <pre><code class="html">
-&lt;img src="XXX.svg" aria-label="texte de remplacement" role="img" /&gt;
+&lt;p id="alt-text" class="visually-hidden">texte de remplacement&lt;/p&gt;
+&lt;img src="XXX.svg" role="img" aria-labelledby="alt-text"&gt;
 </code></pre>
 
-On rajoute `role="img"` pour s’assurer qu’avec macOS Safari, VoiceOver (anciennes versions) annonce bien « image ».
+Note : On rajoute `role="img"` pour s'assurer qu'avec macOS Safari, VoiceOver (anciennes versions) annonce bien « image ».
 
 ### SVG en ligne (inline)
+
+Le meilleur support pour les SVG est l'affichage en ligne (balise `<svg>`).
+
+<pre><code class="html">
+&lt;svg role="img"&gt;
+  &lt;title&gt;texte de remplacement&lt;/title&gt;
+  ...
+&lt;/svg&gt;
+
+&lt;svg role="img" aria-labelledby="alt-text"&gt;
+  &lt;title id="alt-text">texte de remplacement&lt;/title&gt;
+  ...
+&lt;/svg&gt;
+
+&lt;svg role="img" aria-label="alt-text"&gt;
+  ...
+&lt;/svg&gt;
+</code></pre>
+
+Si besoin, pour des images dont le contenu nécessite une description détaillée, il est possible d'utiliser `aria-labelledby` en référençant le « title » et la « desc » :
+
 <pre><code class="html">
-&lt;svg viewBox="0 0 440 540" version="1.1" role="img"
-  lang="fr" xml:lang="fr"
-  aria-labelledby="title description"&gt;
+&lt;svg role="img" aria-labelledby="alt-text description"&gt;
 
-  &lt;title id="title"&gt;Revenus bruts 2019&lt;/title&gt;
+  &lt;title id="alt-text"&gt;texte de remplacement court&lt;/title&gt;
 
   &lt;desc id="description"&gt;
-    Ce schéma présente les revenus de l’année 2019, en pourcentage du total et en valeur absolue. Le total des revenus est de 20,3 millions d’Euros et se divise en 6,9 millions (34%) pour le premier trimestre, 2,1 millions (10%) pour le second, 10,3 millions pour le troisième (51%) et 1 million au dernier trimestre (5%).
+    Description détaillée de l'information portée par l'image.
   &lt;/desc&gt;
+  ...
+&lt;/svg&gt;
+</code></pre>
 
+Note : Afin d'assurer un support optimal par les aides techniques et navigateurs, éviter l'usage de `aria-describedby` pour la description.
+
+
+Si vous utilisez l'élément `<use>` pour cloner plusieurs versions du SVG, pensez à le masquer avec `aria-hidden` :
+
+<pre><code class="html">
+&lt;svg role="img"&gt;
+  &lt;title&gt;texte de remplacement&lt;/title&gt;
+    &lt;use href="some-id" fill="blue" x="5" y="5" aria-hidden="true" /&gt;
   ...
 &lt;/svg&gt;
 </code></pre>
 
-Le meilleur support pour les SVG est de les afficher inline.
 
-Il faut utiliser `aria-labelledby` en premier choix en référençant le « title » et la « desc » (éviter `aria-describedby` pour la « desc », support encore mauvais) pour assurer un support maximal.
-Les SVG servant de lien ou de bouton
+## Les SVG dans des liens ou boutons
 
-Plusieurs choix possibles&nbsp;: 
+S'il est possible d'afficher du texte à proximité, la meilleure solution est de simplement masquer le SVG à l'aide de l'attribut `aria-hidden` :
 
 <pre><code class="html">
 &lt;button&gt;
   &lt;svg focusable="false" aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
-  Rechercher
+  Texte visible
 &lt;/button&gt;
 
 &lt;a href="/Rechercher"&gt;
   &lt;svg focusable="false" aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
-  Rechercher
+  Texte visible
 &lt;/a&gt;
 </code></pre>
 
-On utilise `focusable="false"` pour éviter toute prise de focus sur le SVG (en plus du lien `a`) par <abbr>IE</abbr>> 10 et Edge.
-C’est la meilleure solution, la plus robuste mais pas toujours possible d’afficher un texte (contrainte graphique/design/marketing…).
-Alors, voici une alternative qui permet de  cacher visuellement le texte pour un bouton ou un lien tout en le laissant lisible par les aides techniques via `aria-labelledby`&nbsp;:
+Mais comme il n'est pas toujours possible d'afficher un texte (contrainte graphique/design/marketing…), il est conseillé de cacher visuellement un texte tout en le laissant lisible par les aides techniques via `aria-labelledby`&nbsp;:
 
 <pre><code class="html">
 &lt;button aria-labelledby="label"&gt; 
-
-  &lt;span id="label" hidden&gt;Rechercher&lt;/span&gt;
-
+  &lt;span id="label" hidden&gt;Texte masqué&lt;/span&gt;
   &lt;svg aria-hidden="true" focusable="false"&gt;&lt;!--...--&gt;&lt;/svg&gt;
-
 &lt;/button&gt; 
+
+&lt;a href="/Rechercher"&gt;
+  &lt;span id="label" hidden&gt;Texte masqué&lt;/span&gt;
+  &lt;svg aria-hidden="true" focusable="false"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+&lt;/a&gt;
 </code></pre>
 
-Enfin, ces deux solutions suivantes sont équivalentes et de toute façon à tester dans vos environnements de navigation (couples navigateur/aide technique) ciblés.
+La classe `visually-hidden` permet également de présenter le texte uniquement aux utilisateurs d'aide technique (masquage accessible). 
+La solution suivante est similaire à la précédente, mais à tester systématiquement dans vos environnements de navigation ciblés (couples navigateur/aide technique) .
 
 <pre><code class="html">
 &lt;button&gt;
@@ -106,37 +153,29 @@ Enfin, ces deux solutions suivantes sont équivalentes et de toute façon à tes
 &lt;/a&gt;
 </code></pre>
 
-La class visually-hidden permet de cacher le texte sauf aux utilisateurs d’aide technique (masquage accessible).
 
-ou
+Il est aussi possible d'utiliser l'attribut `aria-label` :
 
 <pre><code class="html">
 &lt;button aria-label="Rechercher"&gt;
-  &lt;svg focusable="false" aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
 &lt;/button&gt;
 
 &lt;a href="/Rechercher" aria-label="Rechercher"&gt;
-  &lt;svg focusable="false" aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
 &lt;/a&gt;
-
-ou, mais beaucoup plus risqué…
-&lt;button&gt;
-  &lt;svg aria-labelledby="rechercher-icon-title" focusable="false" role=”img”&gt;
-    &lt;title id="rechercher-icon-title"&gt;Rechercher&lt;/title&gt;
-    &lt;!--...--&gt;
-  &lt;/svg&gt;
-&lt;/button&gt;
 </code></pre>
 
-## Dernier mots…
+## Dernier mot…
 
-En résumé, un seul conseil pour du SVG accessible, ce serait TESTER et tester encore !
+En résumé, s'il ne fallait retenir qu'un seul conseil pour du SVG accessible, ce serait TESTER et tester encore !
 
-## Webographie (articles qui m’ont bien, bien aidés)
+## Webographie (articles qui m'ont bien, bien aidés)
 
 - https://www.deque.com/blog/creating-accessible-svgs/ 
 - https://weboverhauls.github.io/demos/svg/ 
 - https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html 
 - https://www.slideshare.net/webaxe/svg-icons-and-screen-reader-accessibility 
 - https://github.com/JeremiePat/svg-accessible/blob/master/slides.md 
-- https://www.sarasoueidan.com/blog/accessible-icon-buttons/ 
+- https://www.sarasoueidan.com/blog/accessible-icon-buttons/
+- https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/