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/en/articles/accessible-svg.md

@@ -1,133 +1,165 @@
 ---
-title: "SVG images are used more and more on the web but what about their accessibility ?"
+title: "SVG images accessibility"
 abstract: "How to make SVG images accessible"
 titleBeforeTag: true
 date: "2021-01-01"
+updateDate: "2025-02-28"
 tags:
   - web
   - intermediate
 ---
+Here are some ideas knowing that the support for browsers and assistive technologies evolves very quickly.
 
-Here are some ideas knowing that the support for browsers and assistive technologies evolves very quickly!
-Important: So remember to test your implementations on the browsers/assistive technologies targets the most used by your users, whatever the solution for which you choose.
+Important: Whatever solution is chosen, as browser support and assistive technologies evolve rapidly, make sure to test your implementations on the configurations most commonly used by your users.
 
 ## Decorative image
 
 ### SVG in an `img` tag
-<pre> <code class="html">
+<pre><code class="html" title="html">
 &lt;img src="XXX.svg" alt="" aria-hidden="true" /&gt;
-</code> </pre>
+</code></pre>
 
-### SVG online (inline)
-<pre> <code class="html">
-&lt;svg aria-hidden="true" focusable="false"&gt;
-...
+### Inline SVG
+<pre><code class="html" title="html">
+&lt;svg aria-hidden="true"&gt;
+…
 &lt;/svg&gt;
-</code> </pre>
-
-We use `focusable ="false"` to avoid any focus on SVG by <abbr>IE</abbr> (> 10 and Edge)
+</code></pre>
 
 In addition, you must make sure that the `svg` tag or one of its children (`<g>`,`<path>`...) does not have any attribute to provide it with an accessible name (` title`, `desc `,` aria- * `…).
 
+Note: Historically, the `focusable="false"` attribute was also required to prevent any focus on the SVG by Internet Explorer and Edge (before Chromium). This is no longer necessary in current browsers (unless your users are still using the older mentioned browsers).
+
+
 ## Informative image (without link or button)
 
 ### SVG in an `img` tag
-<pre> <code class="html">
-&lt;img src ="XXX.svg" alt="alternative text" role="img" /&gt;
-</code> </pre>
 
-second choice:
-<pre> <code class="html">
-&lt;img src="XXX.svg" aria-label="replacement text" role="img" /&gt;
-</code> </pre>
+The most effective solution is to use the `alt` attribute:
+
+<pre><code class="html" title="html">
+&lt;img src="XXX.svg" role="img" alt="replacement text"&gt;
+</code></pre>
+
+As a second choice, use `aria-label` (but this violates the first rule of ARIA, which is to avoid using ARIA if a native HTML solution exists):
+
+<pre><code class="html" title="html">
+&lt;img src="XXX.svg" role="img" aria-label="replacement text"&gt;
+</code></pre>
+
+Note: To ensure optimal support by assistive technologies and browsers, avoid using `aria-labelledby` pointing to hidden text:
+
+<pre><code class="html" title="html">
+&lt;p id="alt-text" class="visually-hidden">replacement text&lt;/p&gt;
+&lt;img src="XXX.svg" role="img" aria-labelledby="alt-text"&gt;
+</code></pre>
+
+Note: Add `role="img"` to ensure that the element is properly recognized as an image by assistive technologies.
+
+
+### Inline SVG
+
+The best support for SVG is inline display (`<svg>` tag).
+
+<pre><code class="html" title="html">
+&lt;svg role="img"&gt;
+  &lt;title&gt;replacement text&lt;/title&gt;
+  ...
+&lt;/svg&gt;
+
+&lt;svg role="img" aria-labelledby="alt-text"&gt;
+  &lt;title id="alt-text">replacement text&lt;/title&gt;
+  ...
+&lt;/svg&gt;
+
+&lt;svg role="img" aria-label="alt-text"&gt;
+  ...
+&lt;/svg&gt;
+</code></pre>
 
-We add `role="img"` to make sure that with macOS Safari, VoiceOver (old versions) announces "image".
+If needed, for images whose content requires a detailed description, it is possible to use `aria-labelledby` referencing the title and desc:
 
-### SVG online (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;
+<pre><code class="html" title="html">
+&lt;svg role="img" aria-labelledby="alt-text description"&gt;
 
-  &lt;title id="title"&gt;Gross revenue 2019&lt;/title&gt;
+  &lt;title id="alt-text"&gt;short replacement text&lt;/title&gt;
 
   &lt;desc id="description"&gt;
-    This diagram shows the income for the year 2019, as a percentage of the total and in absolute value. The total income is 20.3 million Euros and is divided into 6.9 million (34%) for the first quarter, 2.1 million (10%) for the second, 10.3 million for the third (51%) and 1 million in the last quarter (5%).
+    Detailed description of the information given by the image.
   &lt;/desc&gt;
+  ...
+&lt;/svg&gt;
+</code></pre>
+
+Note: To ensure optimal support by assistive technologies and browsers, avoid using `aria-describedby` for the description.
+
+If you use the `<use>` element to clone multiple versions of the SVG, remember to hide it with `aria-hidden`:
 
+
+<pre><code class="html" title="html">
+&lt;svg role="img"&gt;
+  &lt;title&gt;replacement text&lt;/title&gt;
+    &lt;use href="some-id" fill="blue" x="5" y="5" aria-hidden="true" /&gt;
   ...
 &lt;/svg&gt;
-</code> </pre>
+</code></pre>
 
-The best support for SVGs is to display them inline.
 
-You must use `aria-labelledby` as the first choice by referencing the "title" and the "desc" (avoid `aria-describedby` for the "desc", still bad support) to ensure maximum support.
-SVGs serving as a link or button
+## SVG in links or buttons
 
-Several possible choices:
+If it is possible to display text nearby, the best solution is to simply hide the SVG using the `aria-hidden` attribute:
 
-<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;
-  Search
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+  Visible text
 &lt;/button&gt;
 
-&lt;a href="/Search"&gt;
-  &lt;svg focusable="false" aria-hidden="true"&gt; &lt;! --...-- &gt; &lt;/svg&gt;
-  Search
+&lt;a href="/Rechercher"&gt;
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+  Visible text
 &lt;/a&gt;
-</code> </pre>
-
-We use `focusable="false"` to avoid any focus on the SVG in addition to the link `a`) by IE 10.
-This is the best solution, the most robust but is not always possible to display a text (graphic / design / marketing constraint...).
-So, here is an alternative that allows to visually hide the text for a button or a link while leaving it readable by assistive technologies via `aria-labelledby`:
+</code></pre>
 
-<pre> <code class="html">
-&lt;button aria-labelledby="label"&gt;
+However, since it is not always possible to display text (due to graphic/design/marketing constraints), it is recommended to visually hide text while keeping it readable by assistive technologies using `aria-labelledby`:
 
-  &lt;span id="label" hidden&gt;Search&lt;/span&gt;
+<pre><code class="html" title="html">
+&lt;button aria-labelledby="label"&gt; 
+  &lt;span id="label" hidden&gt;Hidden text&lt;/span&gt;
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+&lt;/button&gt; 
 
-  &lt;svg aria-hidden="true" focusable="false"&gt; &lt;!--...--&gt; &lt;/svg&gt;
-
-&lt;/button&gt;
-</code> </pre>
+&lt;a href="/Rechercher"&gt;
+  &lt;span id="label" hidden&gt;Hidden text&lt;/span&gt;
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+&lt;/a&gt;
+</code></pre>
 
-Finally, these two following solutions are equivalent and in any case to be tested in your targeted navigation environments (browser / assistive technologies pairs).
+The `visually-hidden` class also allows text to be presented only to assistive technology users (accessible hiding). The following solution is similar to the previous one but should be systematically tested in your targeted browsing environments (browser/assistive technology pairs).
 
-<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;span class="visually-hidden"&gt; Search &lt;/ span&gt;
-&lt;/ button&gt;
-
-&lt;a href="/ Search"&gt;
-  &lt;svg focusable="false" aria-hidden="true"&gt; &lt;! --...--&gt; &lt;/svg&gt;
-  &lt;span class="visually-hidden"&gt; Search &lt;/span&gt;
-&lt;/ a&gt;
-</code> </pre>
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+  &lt;span class="visually-hidden"&gt;Search&lt;/span&gt;
+&lt;/button&gt;
 
-The visually-hidden class is used to hide the text except to technical help users (accessible masking).
+&lt;a href="/Search"&gt;
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+  &lt;span class="visually-hidden"&gt;Search&lt;/span&gt;
+&lt;/a&gt;
+</code></pre>
 
-or
+It is also possible to use the `aria-label` attribute:
 
-<pre> <code class="html">
+<pre><code class="html" title="html">
 &lt;button aria-label="Search"&gt;
-  &lt;svg focusable="false" aria-hidden="true"&gt; &lt;! --...--&gt; &lt;/svg&gt;
-&lt;/ button&gt;
-
-&lt;a href="/ Search" aria-label="Search"&gt;
-  &lt;svg focusable="false" aria-hidden="true"&gt; &lt;! --...--&gt; &lt;/svg&gt;
-&lt;/ a&gt;
-
-or, but much more risky ...
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+&lt;/button&gt;
 
-&lt;button&gt;
-  &lt;svg aria-labelledby="search-icon-title" focusable="false" role=”img”&gt;
-    &lt;title id="search-icon-title"&gt;Search&lt;/title&gt;
-    &lt;! --...--&gt;
-  &lt;/svg&gt;
-&lt;/ button&gt;
-</code> </pre>
+&lt;a href="/Search" aria-label="Search"&gt;
+  &lt;svg aria-hidden="true"&gt;&lt;!--...--&gt;&lt;/svg&gt;
+&lt;/a&gt;
+</code></pre>
 
 ## Last words ...
 
@@ -140,4 +172,5 @@ In short, one tip for accessible SVG would be TEST and test again!
 - 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/