Update article svg

src/assets/script.js

@@ -377,6 +377,7 @@ function highlightCodeBlocks() {
             const language = codeBlock.result.language
             const displayLanguage = displayLanguageList[language] || language
             const languageWrapper = document.createElement('p')
+
             languageWrapper.classList.add('bg-primary', 'd-inline-block', 'p-2', 'mb-0', 'font-weight-bold')
             languageWrapper.textContent = displayLanguage
 

src/fr/articles/svg-accessibles.md

@@ -1,142 +1,181 @@
 ---
-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"
+date: "2025-01-01"
 tags:
   - web
   - 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 de l'article de 2021.
+
+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;
+<pre><code class="html" title="html">
+&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;
+<pre><code class="html" title="html">
+&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 (avant Chromium), ceci n'est plus utile sur les navigateurs actuels (sauf si vos utilisateurs utilisent encore des anciens navigateurs mentionnés)
+
 
-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`
-<pre><code class="html">
-&lt;img src="XXX.svg" alt="texte de remplacement" role="img" /&gt;
+
+La solution la plus efficace consiste à utiliser l'attribut `alt` :
+
+<pre><code class="html" title="html">
+&lt;img src="XXX.svg" role="img" alt="texte de remplacement"&gt;
+</code></pre>
+
+en second choix, utiliser `aria-label` (mais cela enfreint la première règle d'ARIA, à savoir, ne pas utiliser d'ARIA si une solution native HTML existe) :
+
+<pre><code class="html" title="html">
+&lt;img src="XXX.svg" role="img" aria-label="texte de remplacement"&gt;
 </code></pre>
 
-en second choix&nbsp;:
-<pre><code class="html">
-&lt;img src="XXX.svg" aria-label="texte de remplacement" role="img" /&gt;
+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" title="html">
+&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 que l'élément soit bien considéré comme une image par les technologies d'assistance.
 
 ### SVG en ligne (inline)
-<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;title id="title"&gt;Revenus bruts 2019&lt;/title&gt;
+Le meilleur support pour les SVG est l'affichage en ligne (balise `<svg>`).
+
+<pre><code class="html" title="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" title="html">
+&lt;svg role="img" aria-labelledby="alt-text description"&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" title="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">
+<pre><code class="html" title="html">
 &lt;button&gt;
-  &lt;svg focusable="false" aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
-  Rechercher
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+  Texte visible
 &lt;/button&gt;
 
 &lt;a href="/Rechercher"&gt;
-  &lt;svg focusable="false" aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
-  Rechercher
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+  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">
+<pre><code class="html" title="html">
 &lt;button aria-labelledby="label"&gt; 
-
-  &lt;span id="label" hidden&gt;Rechercher&lt;/span&gt;
-
-  &lt;svg aria-hidden="true" focusable="false"&gt;&lt;!--...--&gt;&lt;/svg&gt;
-
+  &lt;span id="label" hidden&gt;Texte masqué&lt;/span&gt;
+  &lt;svg aria-hidden="true"&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"&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">
+<pre><code class="html" title="html">
 &lt;button&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;span class="visually-hidden"&gt;Rechercher&lt;/span&gt;
 &lt;/button&gt;
 
 &lt;a href="/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;span class="visually-hidden"&gt;Rechercher&lt;/span&gt;
 &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">
+<pre><code class="html" title="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/