Une interaction responsive

Nantes, le 17 avril 2024.

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.

Vincent.

7 commentaires.

  • https://addictiontreatments101.com , le 19 novembre 2024.

    Definitely believe that which you said. Your favorite reason appeared to be
    on the web the easiest thing to be aware of. I say to you, I certainly
    get irked while people consider worries that they just don’t know about.
    You managed to hit the nail upon the top and defined out the whole
    thing without having side-effects , people could take a
    signal. Will probably be back to get more. Thanks

  • google analytics 4 certification exams , le 20 novembre 2024.

    Oh my goodness! Incredible article dude! Thank you so much, However I am going through difficulties with your RSS.

    I don’t understand why I cannot subscribe to it.
    Is there anyone else getting identical RSS issues?

    Anyone who knows the answer can you kindly respond?
    Thanks!!

  • google display ads certification exam , le 21 novembre 2024.

    Definitely believe that which you said. Your favorite reason appeared to be
    on the web the easiest thing to be aware of.
    I say to you, I certainly get irked while people consider worries that they just don’t know about.
    You managed to hit the nail upon the top and also defined out the whole thing without having side effect , people can take a
    signal. Will probably be back to get more. Thanks

  • google ai powered performance ad certification practice test , le 21 novembre 2024.

    Hello! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in trading links or maybe guest writing a
    blog article or vice-versa? My site addresses a lot of the same
    subjects as yours and I believe we could greatly
    benefit from each other. If you are interested feel free to shoot me an e-mail.
    I look forward to hearing from you! Awesome blog by the way!

  • Youtube , le 9 décembre 2024.

    I’m extremely impressed along with your writing abilities and also with the
    structure for your weblog. Is this a paid theme or did you modify it your
    self? Either way keep up the excellent quality writing,
    it is rare to see a great weblog like this
    one these days..

  • automated link building course , le 10 décembre 2024.

    What i do not realize is actually how you are now not
    actually a lot more well-favored than you might be right now.
    You’re so intelligent. You understand therefore considerably with regards to this
    subject, produced me in my view imagine it from so many various angles.
    Its like women and men aren’t involved unless it is one thing to do with Girl gaga!

    Your individual stuffs outstanding. All the time take
    care of it up!

  • homepage , le 10 décembre 2024.

    We’re a group of volunteers and opening a brand
    new scheme in our community. Your website offered us with helpful info to work
    on. You have done a formidable job and our whole group might be thankful to you.

Laisser un commentaire