[Update] Article 'Accessible hiding'

src/en/articles/accessible-hiding/index.njk

@@ -3,6 +3,7 @@ title: "Accessible hiding and aria-hidden example"
 abstract: "Elements not visible on the screen but accessible to assistive technology."
 titleBeforeTag: true
 date: "2018-01-12"
+updateDate: "2025-12-26"
 tags:
   - component
 ---

src/fr/articles/masquage-accessible/index.njk

@@ -3,28 +3,30 @@ title: "Exemple masquage accessible et aria-hidden"
 abstract: "Créer des éléments non-visibles à l'écran mais accessibles aux outils d'assistances."
 titleBeforeTag: true
 date: "2018-01-12"
+updateDate: "2025-12-26"
 tags:
   - component
 ---
 
 <h2>Introduction</h2>
-<p>Parfois il est nécessaire de masquer des éléments dans une page web. La méthode classique est d’utiliser du <abbr>CSS</abbr> (<code>display:none;</code> et <code>visibility:hidden;</code>). Ces deux propriétés, comme l'attribut <abbr>HTML</abbr>5 `hidden`, permettent de masquer des éléments non seulement à l’écran, mais aussi pour les utilisateurs qui utilisent un lecteur d’écran. Ces éléments ne seront, donc, ni visibles, ni vocalisés par les aides techniques (AT).</p>
-<p>Dans certains cas, il peut être utile de masquer des éléments à l’écran, mais faire en sorte qu’ils soient quand même vocalisés par les lecteurs d’écran. Pour cela, on utilisera une classe <abbr>CSS</abbr> de «&nbsp;masquage accessible&nbsp;».</p>
-<p>Enfin, il reste un cas utile&nbsp;: afficher des éléments à l’écran, mais faire en sorte qu’ils ne soient pas vocalisés. Dans ce cas, on utilisera un attribut <abbr>ARIA</abbr> (<code>aria-hidden</code>).</p>
+<p>Il est parfois nécessaire de masquer des éléments dans une page web. La méthode classique est d'utiliser du <abbr>CSS</abbr> (<code>display:none;</code> et <code>visibility:hidden;</code>). Ces deux propriétés, comme l'attribut <abbr>HTML</abbr>5 `hidden`, permettent de masquer des éléments non seulement à l'écran, mais aussi pour les utilisateurs de lecteur d'écran. Ces éléments ne seront donc ni visibles, ni vocalisés par les aides techniques (AT).</p>
+<p>Dans certains cas, il peut être utile de masquer des éléments à l'écran tout en conservant l'information pour les utilisateurs de lecteurs d'écran. Pour cela, on utilisera une classe <abbr>CSS</abbr> de «&nbsp;masquage accessible&nbsp;».</p>
+<p>Enfin, il reste un cas utile&nbsp;: afficher des éléments à l'écran, mais faire en sorte qu'ils ne soient pas vocalisés. Dans ce cas, on utilisera un attribut <abbr>ARIA</abbr> (<code>aria-hidden</code>).</p>
 
 <h2>Le masquage accessible</h2>
-<p>Masquer un élément de manière accessible permet de faire disparaître un élément à l’écran, tout en le conservant pour les utilisateurs de lecteurs d’écran. Techniquement, la solution consiste à appliquer une classe <abbr>CSS</abbr> sur l’élément qui ne doit pas être visible.</p>
+<p>Masquer un élément de manière accessible permet de faire disparaître un élément à l'écran, tout en le conservant pour les utilisateurs de lecteurs d'écran. Techniquement, la solution consiste à appliquer une classe <abbr>CSS</abbr> sur l'élément qui ne doit pas être visible.</p>
 <p>Il existe plusieurs solutions pour réaliser ce type de classe <abbr>CSS</abbr>&nbsp;:</p>
     <ul>
-      <li>Donner une taille nulle à l’élément.</li>
-      <li>Positionner l’élément en dehors de l’écran (<code>left: -1000px; top: -1000px;</code>).</li>
+      <li>Donner une taille nulle à l'élément.</li>
+      <li>Positionner l'élément en dehors de l'écran (<code>left: -1000px; top: -1000px;</code>).</li>
       <li>Utiliser les propriétés <code>text-indent</code> ou <code>clip</code>.</li>
       <li>…</li>
     </ul>
-<p>L’idéal étant de mixer les solutions pour garantir le bon fonctionnement sur l’ensemble des navigateurs.</p>
+<p>L'idéal étant de mixer les solutions pour garantir le bon fonctionnement sur l'ensemble des navigateurs.</p>
 
 
-<p>Si vous utilisez un framework, il est fort probable que celui-ci embarque une telle classe. Par exemple si vous utilisez <a href="http://boosted.orange.com">Boosted</a> ou <a href="http://getbootstrap.com/">Bootstrap</a>, vous pouvez utiliser la classe <abbr>CSS</abbr> <code>visually-hidden</code> (screen reader only) dont voici le code&nbsp;:</p>
+<p>Si vous utilisez un framework, il est fort probable que celui-ci embarque une telle classe. Par exemple si vous utilisez <a href="http://boosted.orange.com">Boosted</a> ou <a href="http://getbootstrap.com/">Bootstrap</a>, vous pouvez utiliser la classe <abbr>CSS</abbr> <code>visually-hidden</code> (ou <code>sr-only</code> pour <span lang="en">screen reader only</span> pour les versions plus anciennes) dont voici le code&nbsp;:</p>
+
 <pre><code class="css">
 .visually-hidden {
 	position: absolute !important;
@@ -38,10 +40,10 @@ tags:
 	border: 0 !important;
 }
 </code></pre>
-<p>Si vous n’avez aucune classe de masquage accessible, le plus simple est de copier-coller le code ci-dessus.</p>
+<p>Si vous n'avez aucune classe de masquage accessible, le plus simple est de copier-coller le code ci-dessus.</p>
 
 <h3>Mise en œuvre</h3>
-<p>La classe de masquage accessible peut s’employer dans beaucoup de cas. Par exemple, pour expliciter le libellé d’un lien&nbsp;:</p>
+<p>La classe de masquage accessible peut s'employer dans beaucoup de cas. Par exemple, pour expliciter le libellé d'un lien&nbsp;:</p>
 
 <pre><code class="html">
 &lt;a href="…"&gt;En savoir plus&lt;span <span class="important">class="visually-hidden"</span>&gt; sur nos offres mobiles&lt;/span&gt;&lt;/a&gt;
@@ -54,23 +56,23 @@ tags:
 <pre><code class="html">
 &lt;a href="…" aria-label="En savoir plus sur nos offres mobiles"&gt;En savoir plus&lt;/a&gt;
 </code></pre>
-<p>La solution utilisant la classe de masquage accessible offre néanmoins un avantage par rapport à la solution <code>aria-label</code>. Si les <abbr>CSS</abbr> sont désactivées (pour les remplacer par des <abbr>CSS</abbr> personnalisées adaptées à un certain handicap numérique, par exemple), les textes en masquage accessible apparaîtront automatiquement à l’écran.</p>
+<p>La solution utilisant la classe de masquage accessible offre néanmoins un avantage par rapport à la solution <code>aria-label</code>. Si les <abbr>CSS</abbr> sont désactivées (pour les remplacer par des <abbr>CSS</abbr> personnalisées adaptées à un certain handicap numérique, par exemple), les textes en masquage accessible apparaîtront automatiquement à l'écran.</p>
 
-<h2>L’attribut <code>aria-hidden</code></h2>
-<p>Cet attribut permet de masquer un élément (ou un groupe d’éléments) pour les lecteurs d’écran. Celui-ci n’a en revanche aucun effet sur l’affichage à l’écran.</p>
+<h2>L'attribut <code>aria-hidden</code></h2>
+<p>Cet attribut permet de masquer un élément (ou un groupe d'éléments) pour les lecteurs d'écran. Celui-ci n'a en revanche aucun effet sur l'affichage à l'écran.</p>
 
 <h3>Mise en œuvre</h3>
-<p>Pour masquer un élément (et ses enfants) aux lecteurs d’écran (ainsi que les éléments enfants), il suffit d’ajouter un attribut <code>aria-hidden="true"</code>. Le contenu peut être toujours rendu accessible aux AT via <code>aria-describedby</code> ou <code>aria-labelledby</code>.</p>
+<p>Pour masquer un élément (et ses enfants) aux lecteurs d'écran (ainsi que les éléments enfants), il suffit d'ajouter un attribut <code>aria-hidden="true"</code>. Le contenu peut être toujours rendu accessible aux AT via <code>aria-describedby</code> ou <code>aria-labelledby</code>.</p>
 <h4>Attention</h4>
 <p>Si on met un élément focusable dans du contenu (même sur un noeud parent) possédant un `aria-hidden="true"`, il sera présent à la navigation clavier mais sera vide pour les <abbr>AT</abbr>. <em>Donc, à ne pas faire.</em></p>
 
 <p><strong>Exemple&nbsp;: </strong><br>
-La capture d’écran suivante montre un lecteur vidéo contenant un certain nombre de boutons (chaîne précédente, chaîne suivante, pause…). Ce lecteur est entouré par deux boutons permettant également d’accéder aux chaînes précédentes et suivantes.</p>
-<p>Visuellement cela ne pose pas de problème. En revanche, lorsqu’on écoute la page avec un lecteur d’écran, on peut trouver curieux d’entendre un bouton vocalisé «&nbsp;Animaux&nbsp;» au début de la page, puis à la fin de la page un bouton vocalisé «&nbsp;Chasse et pêche&nbsp;».</p>
+La capture d'écran suivante montre un lecteur vidéo contenant un certain nombre de boutons (chaîne précédente, chaîne suivante, pause…). Ce lecteur est entouré par deux boutons permettant également d'accéder aux chaînes précédentes et suivantes.</p>
+<p>Visuellement cela ne pose pas de problème. En revanche, lorsqu'on écoute la page avec un lecteur d'écran, on peut trouver curieux d'entendre un bouton vocalisé «&nbsp;Animaux&nbsp;» au début de la page, puis à la fin de la page un bouton vocalisé «&nbsp;Chasse et pêche&nbsp;».</p>
 
-<p><img src="../images/player.png" alt="capture d’écran présentant un lecteur vidéo"></p>
+<p><img src="../images/player.png" alt="capture d'écran présentant un lecteur vidéo"></p>
 
-<p>Pour éviter de perturber l’utilisateur inutilement, le plus simple est de masquer ces deux boutons (pour les lecteurs d’écran) à l’aide d’un attribut <code>aria-hidden</code>.</p>
+<p>Pour éviter de perturber l'utilisateur inutilement, le plus simple est de masquer ces deux boutons (pour les lecteurs d'écran) à l'aide d'un attribut <code>aria-hidden</code>.</p>
 
 <pre><code class="html">
 &lt;div class="icon icon-arrow-left2" <span class="important">aria-hidden="true"</span>&gt;