Une interaction responsive

Il y a plus d’un an, Scott O’Hara publiait un article qui présentait une technique basée uniquement sur CSS pour activer une interaction en fonction d’un point de rupture.

J’ai trouvé cette façon de faire très intéressante (bien qu’un peu obscure au premier abord – ce qui semble être son défaut principal) et je l’ai éprouvée plusieurs fois dans des cas réels.

C’est pour ces raisons que je me permets de proposer ici mon analyse de la technique, en français.

Objectifs

Rendre une interaction accessible nécessite certains basiques.

Il vous faut un élément :

• qui se signale comme actionnable ;
• qui soit atteignable avec le périphérique de saisie comme avec le périphérique de pointage ;
• qui remonte un état sémantique et visuel reflétant la position de l’interaction ;
• qui déclenche un comportement quand l’interaction sera lancée.

Imaginons maintenant que cette interaction n’a de sens que quand le composant qui l’abrite possède une largeur étroite (comme sur mobile par exemple) mais qu’elle se désactive sur une largeur plus importante.

Il va falloir alors désactiver (en desktop) tout ce qui a été fait plus haut :

• l’élément actionnable ne doit plus se signaler comme tel ;
• il ne doit plus être atteignable ni au clavier ni à la souris ;
• l’état sémantique et visuel de l’interaction ne doit plus apparaître ;
• et aucun comportement ne doit pouvoir se déclencher.

Problème : tout cela demande de modifier fortement le DOM, et d’ajouter un écouteur sur la largeur du viewport (ou du composant).

Un cas concret

Imaginons un motif de conception tel qu’un panneau dépliant (disclosure).

En mobile, on imagine un code de ce type :

<h3>
    <button class="toggle" type="button" aria-expanded="false" aria-controls="panel">
        Titre
        <span class="toggle-arrow" aria-hidden="true">
            <span class="toggle-arrow-up">↑</span>
            <span class="toggle-arrow-down">↓</span>
        </span>
    </button>
</h3>
<div id="panel">
    <p>Panneau affiché ou masqué.</p>
</div>

Et en desktop, on s’attend plutôt à ceci :

<h3>Titre</h3>
<p>Panneau toujours affiché.</p>

Ce que Scott propose, c’est une technique basée sur la propriété CSS visibility pour basculer de l’un à l’autre, uniquement via une modification CSS.

Comment ça marche ?

La propriété visibility: hidden à la réputation ne pas être accessible, à raison, car si elle masque visuellement comme on pourrait s’y attendre l’élément ciblé, elle lui supprime également tout accès :

• sémantique ;
• avec un périphérique de saisie ;
• avec un périphérique de pointage.

Or, il se trouve que c’est ce qui nous intéresse ici (du moins en desktop) !

Et il se trouve de surcroît que visibility: hidden peut être annulée sur ses descendants avec un visibility: visible.

Quelque chose qui serait impossible avec aria-hidden ou opacity: 0 par exemple.

Bref, on a tout ce qu’il nous faut pour basculer d’une version à l’autre, en appliquant (ou non) la propriété au bon endroit.

Le résultat

Voici ce que ça peut donner avec un code complet. Charge à vous de redimensionner votre navigateur pour basculer de la vue mobile à la vue desktop.

À travers une technologie d’assistance, voici un exemple de la vocalisation qui sera alors faite sur le titre.

• En desktop : Niveau d’en-tête 3, Lorem ipsum.
• En mobile : Niveau d’en-tête 3, Lorem ipsum, Étendu, button, groupe.