feat(post): masquage accessible de pointe

Author: ffoodd

_src/posts/cache-cache-css/index.md

@@ -2,7 +2,7 @@
 layout: "template/post.njk"
 title: "Cache-cache CSS"
 date: "2016-10-13T13:11:13"
-modified: "2021-03-05T17:07:37"
+modified: "2025-03-11"
 permalink: "cache-cache-css/index.html"
 excerpt: "Il existe une myriade de façon de masquer visuellement du texte en CSS tout en le maintenant accessible aux technologies d'assistance telles que les lecteurs d'écran. J'en agrège ici quelques-unes pour proposer une version que j'espère plus robuste."
 tags: ["posts"]
@@ -14,6 +14,14 @@ Il existe de nombreuses façons de faire, que je ne détaillerai pas ici. Depuis
 
 Mais elle n’est pas exempte de problème, désormais.
 
+---
+
+## Mise à jour
+
+Depuis la dernière mise à jour en 2019, d’autres changements ont été apportés. Je les ai récapitulés dans [<cite>Masquage accessible de point</cite>](/masquage-accessible-de-pointe/).
+
+---
+
 ## Propriété dépréciée
 
 La «&nbsp;magie&nbsp;» de cette solution repose sur la propriété `clip`. Elle est simple à comprendre et très efficace. Seul bémol&nbsp;: `clip` est **déprécié par le module _[CSS masking](https://drafts.fxtf.org/css-masking-1/#clip-property)_** de niveau 1.
@@ -47,7 +55,6 @@ Et voilà, second problème résolu.
 Voilà la version finale que je propose actuellement&nbsp;:
 
 ```css
-
 .sr-only {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
@@ -105,7 +112,7 @@ Qu’en dites-vous&nbsp;?
 
 ### Les lecteurs d’écran sur mobile
 
-19 octobre 2016
+<time datetime="2016-10-19">19 octobre 2016</time>
 
 Ayant besoin de tests sur cette version pour vérifier qu’elle n’introduit pas de régressions, [Johan Ramon m’a remonté un bug étrange sur VoiceOver](https://twitter.com/johan_ramon/status/788372720224526336). En creusant un peu avec [Sylvain Pigeard](https://github.com/PigeardSylvain), il nous est apparu que `position: static` posait problème lors de la prise de focus d’un lien ayant la classe `.sr-only-focusable`.
 
@@ -121,14 +128,22 @@ L’état des lieux est assez sombre&nbsp;: **les liens d’évitement ne marche
 
 ### Le référencement naturel
 
-19 octobre 2016
+<time datetime="2016-10-19">19 octobre 2016</time>
 
 [Steve Faulkner](https://twitter.com/stevefaulkner) —&nbsp;du [Paciello Group](https://www.paciellogroup.com/blog/)&nbsp;— a posé la question au forum de support pour _webmasters_ de Google&nbsp;: [les contextes supplémentaires pour utilisateurs malvoyants ont-ils un effet négatif sur le positionnement dans les résultats de recherche&nbsp;?](https://productforums.google.com/forum/#!msg/webmasters/YJcZUhtMIE4/XkOEzVakBAAJ)
 
 Réponse courte&nbsp;: **non** Cependant étant donné que ce texte n’apparaît pas de prime abord il est considéré comme du contenu secondaire et a donc un très faible impact sur le positionnement, et c’est une excellente chose puisque cela dissuade d’en abuser.
 
 ### Les débordements inopinés
 
-18 janvier 2019
+<time datetime="2019-01-18">18 janvier 2019</time>
 
 De multiples problèmes de débordements ont été observés, notamment sur Chrome, lorsque les éléments masqués sont contenus dans un élément avec `overflow: auto;`. [Le problème est résolu dans Boosted](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/84) en ajoutant `margin: -1px;`.
+
+---
+
+## Mise à jour
+
+Depuis la dernière mise à jour en 2019, d’autres changements ont été apportés. Je les ai récapitulés dans [<cite>Masquage accessible de point</cite>](/masquage-accessible-de-pointe/).
+
+---

_src/posts/masquage-accessible-de-pointe/index.md

@@ -0,0 +1,87 @@
+---
+layout: "template/post.njk"
+title: "Masquage accessible de pointe"
+date: "2025-03-11"
+permalink: "masquage-accessible-de-pointe/index.html"
+excerpt: "Depuis ma dernière partie de [cache-cache CSS](https://wwww.ffoodd.fr/cache-cache-css/), les choses ont changé — quelques cas tordus sont apparus."
+description: "Depuis ma dernière partie de <a href='/cache-cache-css/'>cache-cache CSS</a>, les choses ont changé&nbsp;— quelques cas tordus sont apparus."
+metadescription: "Depuis ma dernière partie de cache-cache CSS, les choses ont changé — quelques cas tordus sont apparus."
+tags: ["posts"]
+commentsOpen: "true"
+---
+
+La classe de masquage accessible `.visually-hidden` —&nbsp;anciennement `.sr-only` dans Bootstrap&nbsp;— a beaucoup évolué au fil du temps. C’est pour ça que j’ai publié [<cite>cache-cache CSS</cite>](/cache-cache-css/) il y a quelques années, qui récapitulait l’état de l’art à ce moment.
+
+Mais il n’y a pas que les techniques CSS qui évoluent… Les navigateurs, aussi. Et parfois, ça requièrs de l’adaptation&nbsp;!
+
+## Un cas légendaire
+
+Louis-Maxime Piton —&nbsp;un des mainteneurs de [Boosted (en anglais)](https://boosted.orange.com/) et inévitablement contributeur à [Bootstrap (en anglais)](https://getbootstrap.com)&nbsp;— a [proposé un correctif (sur GitHub, en anglais)](https://github.com/twbs/bootstrap/pull/37533) il y a plus de deux ans pour contourner [un problème provoqué par le masquage accessible appliqué à une légende de tableau (sur StackOverflow, en anglais)](https://stackoverflow.com/questions/31057955/why-are-table-borders-not-collapsing-when-caption-is-positioned/32063028#32063028).
+
+Les `caption`, lorsqu’ils sont en position absolue, sont considérés comme des cellules de tableaux anonymes&nbsp;— et ça met la grouille dans la fusion des bordures, l’indispensable `border-collapse: collapse`.
+
+Le correctif proposé est simplissime, bien qu’il puisse théoriquement poser des problèmes&nbsp;: n’appliquer la position absolue que si l’élément n’est pas un `caption`. C’est l’état actuel [du <em lang="en">mixin</em> dans Bootstrap (sur GitHub, en anglais)](https://github.com/twbs/bootstrap/blob/53171ad564b2d01bff7613d7210e93a5197a367b/scss/mixins/_visually-hidden.scss).
+
+En résumé, voici la modification&nbsp;:
+
+```css
+.visually-hidden:not(caption) {
+	position: absolute !important;
+}
+```
+
+## En cas de débordement
+
+La semaine dernière, l’ami [Django Janny](https://www.djangojanny.net/) a relancé [le sujet sur Gist (en anglais) avec un cas marginal](https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034?permalink_comment_id=5468620#gistcomment-5468620)&nbsp;: un élément qui déborde, à l’intérieur d’un élément masqué visuellement.
+
+En général, on ne masque qu’une portion de texte de cette façon&nbsp;: aucun élément bloc ne devrait s’y trouver&nbsp;— ni, en réalité, aucun enfant. La majorité du temps, le masquage accessible respecte implicitement les mêmes règles qu’un attribut `aria-label` par exemple&nbsp;: un texte simple et concis.
+
+Mais c’est une règle implicite, et à ma connaissance aucune contre-indication n’a jamais été mentionnée quant à l’utilisation du masquage accessible sur une portion de DOM plus riche. Je l’ai par exemple fait lorsque j’ai amélioré les liens d’évitements sur [la documentation de Bootstrap (en anglais)](https://getbootstrap.com/docs/5.3/getting-started/introduction/), dont le conteneur est masqué visuellement —&nbsp;mais il apparaît à la prise de focus, nous faisant passer à côté du problème…
+
+Depuis (au moins) 2019, les éléments en débordement deviennent focusables dans la plupart des navigateurs, pour palier un défaut d’accessibilité&nbsp;: ne pas pouvoir interagir avec un élément masqué par un débordement. [Cassey Lottman a retracé ce changement dans son article <cite lang="en">Elements with overflow: scroll become focusable</cite> (en anglais)](https://cassey.dev/til/2019-11-19-overflow-scroll-gets-focus/).
+
+Ce qui, dans un élément masqué visuellement, devient un piège&nbsp;: on ne voit (évidemment) pas le focus.
+
+La solution proposée par Django —&nbsp;et après quelques tests, la seule qui paraisse fonctionner&nbsp;— est d’[empêcher le débordement sur les enfants d’un élément masqué visuellement (sur CodePen, en anglais)](https://codepen.io/djangounet/pen/WbNpmMP?editors=1111)&nbsp;:
+
+```css
+.visually-hidden * {
+	overflow: hidden !important;
+}
+```
+
+## La totale
+
+Voici donc la version mise à jour de la technique de masquage accessible&nbsp;:
+
+```css
+.visually-hidden {
+	border: 0 !important;
+	clip-path: inset(50%) !important;
+	height: 1px !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	width: 1px !important;
+	white-space: nowrap !important;
+}
+
+.visually-hidden:not(caption) {
+	position: absolute !important;
+}
+
+.visually-hidden * {
+	overflow: hidden !important;
+}
+```
+
+J’en ai profité pour [proposer ce changement dans Bootstrap (sur GitHub, en anglais)](https://github.com/twbs/bootstrap/pull/41286) —&nbsp;en citant Django bien entendu&nbsp;— et pour mettre à jour [le Gist servant souvent de référence (en anglais)](https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034).
+
+Notez par ailleurs quelques autres changements succincts&nbsp;:
+
+1. J’ai renommé `.sr-only` en `.visually-hidden` pour me conformer aux usages des <em lang="en">frameworks</em> populaires,
+2. Et nettoyé un peu le support de navigateurs anciens&nbsp;: plus de `clip` désormais, car [`clip-path` est très largement supporté](https://developer.mozilla.org/fr/docs/Web/CSS/clip-path).
+3. La variante pour démasquer le contenu lors de la prise de focus n’est plus une remise à zéro, mais une autre classe conditionnée à l’état&nbsp;: `.visually-hidden-focusable:not(:focus):not(:focus-within)`, à l’instar de ce qui est fait [dans Bootstrap depuis cinq ans déjà (sur GitHub, en anglais)](https://github.com/twbs/bootstrap/pull/32440).
+
+
+

docs/cache-cache-css/index.html

@@ -62,6 +62,10 @@ <h2 class="h3-like description" itemprop="description">Il m&apos;arrive souvent
 				<p>Et j’ai beau trouver ça idiot — masquer du texte pour certains utilisateurs et pas pour d’autres, ça me paraît incohérent avec l’accessibilité — c’est un besoin récurrent.</p>
 <p>Il existe de nombreuses façons de faire, que je ne détaillerai pas ici. Depuis quelques années, lorsque je le peux, j’utilise celle de <a href="https://twitter.com/thierrykoblentz">Thierry Koblentz</a> pour Yahoo! qui est décrite <a href="https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html">sur le blog technique de Yahoo!</a> <a href="https://cssmojo.com/hide-content-from-sighted-users/">sur le blog de Thierry</a>. C’est de loin la plus complète, et la seule à ma connaissance à supporter la direction de texte de droite à gauche.</p>
 <p>Mais elle n’est pas exempte de problème, désormais.</p>
+<hr>
+<h2 id="mise-a-jour" tabindex="-1">Mise à jour</h2>
+<p>Depuis la dernière mise à jour en 2019, d’autres changements ont été apportés. Je les ai récapitulés dans <a href="/masquage-accessible-de-pointe/"><cite>Masquage accessible de point</cite></a>.</p>
+<hr>
 <h2 id="propriete-depreciee" tabindex="-1">Propriété dépréciée</h2>
 <p>La « magie » de cette solution repose sur la propriété <code>clip</code>. Elle est simple à comprendre et très efficace. Seul bémol : <code>clip</code> est <strong>déprécié par le module <em><a href="https://drafts.fxtf.org/css-masking-1/#clip-property">CSS masking</a></em></strong> de niveau 1.</p>
 <p>Pas de souci. La technique basée sur <code>clip</code> date un peu, il est normal qu’elle tombe en désuétude. La nouvelle spécification recommande l’utilisation de <code>clip-path</code> pour remplacer <code>clip</code>. Ce qui nous laisse pantois, puisque <a href="https://caniuse.com/#feat=css-clip-path">le support de <code>clip-path</code> est encore tout à fait relatif</a>. <strong>Nous devons conserver <code>clip</code> et ajouter <code>clip-path</code> en guise d’amélioration progressive</strong>.</p>
@@ -76,8 +80,7 @@ <h2 id="le-texte-ratatine" tabindex="-1">Le texte ratatiné</h2>
 <p>Et voilà, second problème résolu.</p>
 <h2 id="la-totale" tabindex="-1">La totale</h2>
 <p>Voilà la version finale que je propose actuellement :</p>
-<pre class="language-css" tabindex="0"><code class="language-css">
-<span class="token selector">.sr-only</span> <span class="token punctuation">{</span>
+<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.sr-only</span> <span class="token punctuation">{</span>
   <span class="token property">border</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span>
   <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
   <span class="token property">-webkit-clip-path</span><span class="token punctuation">:</span> <span class="token function">inset</span><span class="token punctuation">(</span>50%<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
@@ -118,7 +121,7 @@ <h3 id="version-anglaise" tabindex="-1">Version anglaise</h3>
 <p><a href="https://twitter.com/KittyGiraudel">Kitty Giraudel</a> m’a fait l’honneur de <a href="https://kittygiraudel.com/2016/10/13/css-hide-and-seek/">traduire cet article en anglais et le publier sur son blog</a>. Merci !</p>
 <h2 id="modifications" tabindex="-1">Modifications</h2>
 <h3 id="les-lecteurs-d-ecran-sur-mobile" tabindex="-1">Les lecteurs d’écran sur mobile</h3>
-<p>19 octobre 2016</p>
+<p><time datetime="2016-10-19">19 octobre 2016</time></p>
 <p>Ayant besoin de tests sur cette version pour vérifier qu’elle n’introduit pas de régressions, <a href="https://twitter.com/johan_ramon/status/788372720224526336">Johan Ramon m’a remonté un bug étrange sur VoiceOver</a>. En creusant un peu avec <a href="https://github.com/PigeardSylvain">Sylvain Pigeard</a>, il nous est apparu que <code>position: static</code> posait problème lors de la prise de focus d’un lien ayant la classe <code>.sr-only-focusable</code>.</p>
 <p>Nous étions contents, lorsqu’en cherchant à avertir l’équipe de Bootstrap nous sommes tombés sur <a href="https://github.com/twbs/bootstrap/issues/20732">un ticket ouvert récemment qui implique également TalkBack</a>. <a href="https://twitter.com/patrick_h_lauke">Patrick H. Lauke</a>, en investiguant, a décelé de nombreuses incohérences dans la gestion du focus entre les diverses technologies d’assistance sur mobile. Il a ainsi ouvert des tickets un peu partout :</p>
 <ul>
@@ -130,19 +133,23 @@ <h3 id="les-lecteurs-d-ecran-sur-mobile" tabindex="-1">Les lecteurs d’écran s
 </ul>
 <p>L’état des lieux est assez sombre : <strong>les liens d’évitement ne marchent globalement pas sur les interfaces tactiles lorsqu’on utilise un lecteur d’écran</strong>. Ô joie.</p>
 <h3 id="le-referencement-naturel" tabindex="-1">Le référencement naturel</h3>
-<p>19 octobre 2016</p>
+<p><time datetime="2016-10-19">19 octobre 2016</time></p>
 <p><a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> — du <a href="https://www.paciellogroup.com/blog/">Paciello Group</a> — a posé la question au forum de support pour <em>webmasters</em> de Google : <a href="https://productforums.google.com/forum/#!msg/webmasters/YJcZUhtMIE4/XkOEzVakBAAJ">les contextes supplémentaires pour utilisateurs malvoyants ont-ils un effet négatif sur le positionnement dans les résultats de recherche ?</a></p>
 <p>Réponse courte : <strong>non</strong> Cependant étant donné que ce texte n’apparaît pas de prime abord il est considéré comme du contenu secondaire et a donc un très faible impact sur le positionnement, et c’est une excellente chose puisque cela dissuade d’en abuser.</p>
 <h3 id="les-debordements-inopines" tabindex="-1">Les débordements inopinés</h3>
-<p>18 janvier 2019</p>
+<p><time datetime="2019-01-18">18 janvier 2019</time></p>
 <p>De multiples problèmes de débordements ont été observés, notamment sur Chrome, lorsque les éléments masqués sont contenus dans un élément avec <code>overflow: auto;</code>. <a href="https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/84">Le problème est résolu dans Boosted</a> en ajoutant <code>margin: -1px;</code>.</p>
+<hr>
+<h2 id="mise-a-jour-1" tabindex="-1">Mise à jour</h2>
+<p>Depuis la dernière mise à jour en 2019, d’autres changements ont été apportés. Je les ai récapitulés dans <a href="/masquage-accessible-de-pointe/"><cite>Masquage accessible de point</cite></a>.</p>
+<hr>
 
 			</div>
 		<footer class="small mt2">
 			<p class="pl2 mt0 pt1">
 				Article rédigé par <strong itemprop="author"><span class="fn">Gaël Poupard</span></strong>.
 				Publié le <time class="updated" datetime="2016-10-13T13:11:13" itemprop="datePublished">13 octobre 2016</time>
-				 et modifié le <time class="updated" datetime="2021-03-05T17:07:37" itemprop="dateModified">5 mars 2021</time>.
+				 et modifié le <time class="updated" datetime="2025-03-11" itemprop="dateModified">11 mars 2025</time>.
 			</p>
 		</footer>
 	</article>
@@ -329,7 +336,7 @@ <h3 id="les-debordements-inopines" tabindex="-1">Les débordements inopinés</h3
 		<div class="aside pt1 pr3 pb1 pl2">
 			<h3 class="tk-bello-pro h2-like m-reset">Sommaire</h3>
 			<div class="textwidget">
-				<ol><li><a href="#propriete-depreciee">Propriété dépréciée</a></li><li><a href="#le-texte-ratatine">Le texte ratatiné</a></li><li><a href="#la-totale">La totale</a></li><li><a href="#code-et-traduction">Code et traduction</a></li><li><a href="#modifications">Modifications</a></li><li><a href="#comments">Commentaires</a></li></ol>
+				<ol><li><a href="#mise-a-jour">Mise à jour</a></li><li><a href="#propriete-depreciee">Propriété dépréciée</a></li><li><a href="#le-texte-ratatine">Le texte ratatiné</a></li><li><a href="#la-totale">La totale</a></li><li><a href="#code-et-traduction">Code et traduction</a></li><li><a href="#modifications">Modifications</a></li><li><a href="#mise-a-jour-1">Mise à jour</a></li><li><a href="#comments">Commentaires</a></li></ol>
 			</div>
 		</div>
 	</aside>