due chiacchiere

Menu a tendina ed accessibilità

Un importante tassello che volevo inserire in quel puzzle immaginario che è la quarta generazione del tema del blog (quella attualmente in onda, per intenderci) era il rendere il menu principale qui sopra accessibile a coloro che usano una tastiera per navigare il sito. Il problema è presto spiegato: avendo il mio menu delle tendine che mostrano le sottocategorie all’interno di ogni stanza, quando si usa il tasto Tab per saltare da un collegamento al successivo, bisogna dar all’utente la possibilità di scegliere se “entrare in quella stanza”, aprendo la tendina con le altre categorie, oppure semplicemente saltare alla stanza successiva senza doversi sorbire le sottocategorie una ad una. Ne parla persino il consorzio W3C, in uno dei loro tanti documenti. La soluzione che loro propongono è di aggiungere un elemento grafico, tipo una freccina, che appare quando si salterella tra i vari menu con il tasto Tab. In questo senso il fatto di essermi beccato il Covid un paio di settimane fa, è stato quello che gli eterni ottimisti americani definiscono un blessing in disguise, ovvero quando una notizia negativa nasconde in realtà un lato positivo. Già, perché dovendo starmene tappato in casa per qualche giorno, non c’era modo migliore per passare il tempo che digitare codici improbabili su questa tastiera.

Cominciamo da quello che dice il W3C sull’uso delle tendine:

I menu a comparsa (o a discesa) si possono usare per fornire una panoramica della gerarchia delle pagine di un sito web, eliminando la necessità di caricare più pagine, a condizione che gli utenti sappiano dove trovare le informazioni. Le persone con destrezza ridotta, o che soffrono di tremori, hanno spesso problemi a utilizzare i menu a comparsa. Per alcuni potrebbe essere impossibile. Assicurati di fornire altri modi per raggiungere le voci di sottomenu, ad esempio ripetendole sulla pagina della voce di menu principale.

I sottomenu non dovrebbero aprirsi quando si utilizza il tasto Tab per navigare nel menu, poiché gli utenti della tastiera dovrebbero quindi scorrere tutte le voci del sottomenu per passare all’elemento successivo di livello superiore.

Nel mio caso, avevo già in funzione il codice (fogli di stile e Javascript) che rende l’esperienza di navigazione più elegante ed intuitiva sul cellulare. Questo codice manipola il DOM, attaccando alle stanze che hanno sottocategorie le frecce necessarie per aprire quell’elenco, ed aggiunge anche un link per chiudere quell’elenco. Allora mi son detto, perché non riciclare questi tasselli per fare quello che chiede il W3C? Ovviamente il tutto è stato messo in pratica senza l’uso di librerie aggiuntive: mi chiedo a cosa serva usare oggi jQuery e compagni quando si può comodamente ricorrere al document.querySelector in Javascript puro per fare praticamente tutto quello che si vuole per manipolare la disposizione dei tag della pagina. Per i più curiosi, tutte le modifiche che ho messo in campo sono riassunte in questo commit sul mio repository Github.

Prima di chiudere, vorrei chiederti un favore: prova a scovare qualche malfunzionamento sia in questa nuova funzione che nel tema in genere, sia dal punto di vista dell’accessibilità che come esperienza a tutto tondo. Sarei ben lieto di darci un’occhiata.

Commenti

  1. Trap ha scritto:

    Da browser (chrome), in questa pagina il tasto tab fa scegliere solamente gli elementi della barra laterale destra. In sostanza non va mai nel menu delle categorie.

    Risposte al commento di Trap

    1. camu ha scritto:

      Il problema era probabilmente causato dal fatto di aver dimenticato di azzerare la mia cache fatta in casa 😅 Ora dovrebbe essere tutto ok.

  2. Trap ha scritto:

    p.s. il tasto “Invia commento” è un po’ strano: quando vai sopra col mouse rimane il puntatore e quando lo clicchi sembra un elemento statico…

    Risposte al commento di Trap

    1. camu ha scritto:

      Cioè il puntatore non cambia in una manina dici? Osservazione interessante, ci darò un’occhiata…

      Risposte al commento di camu

      1. Trap ha scritto:

        Non solo, il pulsante rimane statico, come un elemento inerte

        Risposte al commento di Trap
        1. camu ha scritto:

          Ho capito cosa intendi. Dovrebbe comportarsi come il pulsante “Rispondi” in calce ad ogni commento. Ottima osservazione, mi metto al lavoro al più presto per aggiustare questa svista 😉

        2. camu ha scritto:

          Ora dovrebbe essere un po’ meglio 🙂

        3. Trap ha scritto:

          @camu: ecco, molto meglio 😉

        4. camu ha scritto:

          Grazie per la segnalazione!

Lascia un commento

Torna in cima alla pagina