{"id":484,"date":"2014-09-08T12:07:33","date_gmt":"2014-09-08T10:07:33","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/web-design-radio-comandato\/"},"modified":"2014-09-08T12:07:33","modified_gmt":"2014-09-08T10:07:33","slug":"web-design-radio-comandato","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/web-design-radio-comandato\/","title":{"rendered":"Web Design radio-comandato"},"content":{"rendered":"

Nel nostro mondo responsive le interfacce utente interattive sono una necessit\u00e0. Gli schermi pi\u00f9 piccoli vincolano la quantit\u00e0 di contenuto che pu\u00f2 essere mostrata in un certo momento, quindi abbiamo bisogno di tecniche che tolgano di mezzo la navigazione e le informazioni secondarie fino a quando non diventano necessarie. Abbiamo creato molti design pattern efficaci, dai tab ai modal overlay per nascondere la navigazione, che mostrano e nascondono il contenuto usando JavaScript.<\/p>\n

Tuttavia, anche JavaScript pone delle problematiche su mobile: gran variabilit\u00e0 di velocit\u00e0 di rete e di piani dati fanno s\u00ec ogni byte che inviamo abbia un impatto sulla velocit\u00e0 di visualizzazione delle nostre pagine o applicazioni. Quando aggiungiamo JavaScript ad una pagina, tipicamente usiamo un file JavaScript esterno e opzionalmente una libreria (solitamente grande) come jQuery. Queste interfacce non saranno utilizzabili fino a che tutto il contenuto, files JavaScript inclusi, non sar\u00e0 scaricato, creando una prima lenta e fiacca impressione negli utenti.<\/p>\n

Se potessimo creare questi pattern per il “contenuto on demand” senza dover dipendere da JavaScript, le interfacce si caricherebbero pi\u00f9 rapidamente e gli utenti potrebbero interagire con loro non appena diventano visibili. Spostando parte della funzionalit\u00e0 in CSS, potremmo anche ridurre la quantit\u00e0 di JavaScript necessario per mostrare il resto della nostra pagina. Il risultato sarebbe un file di dimensioni minori, tempi di caricamento della pagina pi\u00f9 rapidi, interfacce disponibili prima pur mantenendo la stessa funzionalit\u00e0 dei design pattern a cui siamo abituati.<\/p>\n

In questo articolo, esplorer\u00f2 una tecnica su cui sto lavorando che fa proprio questo. \u00c8 ancora un po’ sperimentale, quindi valutate davvero bene se usarla nei vostri ambienti di produzione.<\/p>\n

\n

Comprendiamo il ruolo di JavaScript nel mantenere lo stato<\/h2>\n

Per capire in che modo possiamo ottenere questi design pattern senza usare JavaScript, esaminiamo prima il ruolo giocato da JavaScript nel mantenere lo stato per una semplice interfaccia a tab.<\/p>\n

Guarda la demo su Codepen: Esempio Show\/hide (JavaScript Tabs – No ARIA)<\/a><\/p>\n

Diamo un’occhiata pi\u00f9 nel dettaglio al codice sottostante.<\/p>\n

<div class=\"js-tabs\">\n\n    <div class=\"tabs\">\n        <a href=\"#starks-panel\" id=\"starks-tab\"\n            class=\"tab active\">Starks<\/a>\n        <a href=\"#lannisters-panel\" id=\"lannisters-tab\"\n            class=\"tab\">Lannisters<\/a>\n        <a href=\"#targaryens-panel\" id=\"targaryens-tab\"\n            class=\"tab\">Targaryens<\/a>\n    <\/div>\n\n    <div class=\"panels\">\n        <ul id=\"starks-panel\" class=\"panel active\">\n            <li>Eddard<\/li>\n            <li>Caitelyn<\/li>\n            <li>Robb<\/li>\n            <li>Sansa<\/li>\n            <li>Brandon<\/li>\n            <li>Arya<\/li>\n            <li>Rickon<\/li>\n        <\/ul>\n        <ul id=\"lannisters-panel\" class=\"panel\">\n            <li>Tywin<\/li>\n            <li>Cersei<\/li>\n            <li>Jamie<\/li>\n            <li>Tyrion<\/li>\n        <\/ul>\n        <ul id=\"targaryens-panel\" class=\"panel\">\n            <li>Viserys<\/li>\n            <li>Daenerys<\/li>\n        <\/ul>\n    <\/div>\n\n<\/div>\n<\/code><\/pre>\n
Nulla di strano nel layout, solo un insieme di tab e dei corrispondenti pannelli (panel) che verranno mostrati quando si seleziona un tab. Diamo ora un’occhiata al modo in cui viene gestito lo stato del tab alterandone la class.<\/p>\n
...\n\n.js-tabs .tab {\n    \/* inactive styles go here *\/\n}\n.js-tabs .tab.active {\n    \/* active styles go here *\/\n}\n\n.js-tabs .panel {\n    \/* inactive styles go here *\/\n}\n.js-tabs .panel.active {\n    \/* active styles go here *\/\n}\n\n...\n<\/code><\/pre>\n
I tab e i panel che hanno una class “active” avranno delle ulteriori regole CSS applicate per evidenziarli. Nel nostro caso, i tab “active” saranno collegati visivamente al loro contenuto mentre i tab non attivi rimarranno separati, i panel attivi saranno visibili mentre quelli inattivi rimarranno nascosti.<\/p>\n
A questo punto, usereste il vostro metodo di lavoro JavaScript preferito per ascoltare i “click event” sulle tab, poi manipolereste la class active<\/code>, rimuovendola da tutti i tab e panel, aggiungendola al tab appena cliccato e al corrispondente panel. Questo pattern \u00e8 piuttosto flessibile e ha funzionato bene per molto tempo. Possiamo semplificare quello che succede in due parti distinte:<\/p>\n
    \n
  1. JavaScript fa il bind degli eventi che manipolano le classi.<\/li>\n
  2. CSS crea un nuovo stile per gli elementi basati su quelle classi.<\/li>\n<\/ol>\n
    Gestione dello stato senza JavaScript<\/h3>\n
    Cercare di replicare il binding degli eventi e la manipolazione delle classi solo in HTML e CSS sarebbe impossibile, ma se definiamo il processo in termini pi\u00f9 ampi, diventa:<\/p>\n
      \n
    1. L’input da parte dell’utente cambia lo stato attivo del sistema.<\/li>\n
    2. Il sistema viene visualizzato nuovamente quando cambia lo stato.<\/li>\n<\/ol>\n
      Nella nostra soluzione costituita solo da HTML e CSS, useremo i radio button per permettere all’utente di manipolare lo stato e la pseudo-classe :checked<\/code> come hook per ri-visualizzare.<\/p>\n
      Questa soluzione ha le sue radici nel checkbox hack<\/a> di Chris Coyier, che mi fu presentato dal mio collega Scott O’Hara con la sua demo del morphing menu button<\/a>. In entrambe i casi, i checkbox input vengono usati per mantenere due stati senza JavaScript e assegnare gli stili agli elementi con la pseudo-classe :checked<\/code>. In questo caso, user\u00f2 i radio button per poter mantenere pi\u00f9 di due stati.<\/p>\n<\/div>\n
      \n
      Cosa? I radio button?<\/h2>\n
      Utilizzare i radio button per fare qualcosa che non sia la raccolta di dati inviati tramite form potrebbe far sentire a disagio pi\u00f9 di una persona, ma diamo un’occhiata a quello che dice il W3C<\/a> sull’uso degli input e vediamo se possiamo sciogliere qualche dubbio:<\/p>\n
      \n
      L’elemento <input><\/code> rappresenta un campo dati inseriti via computer, solitamente con un form control per permettere all’utente di modificare<\/strong> i dati<\/strong>. (L’enfasi \u00e8 mia).<\/p>\n<\/blockquote>\n
      “Dati” \u00e8 un termine piuttosto generico e deve esserlo per coprire la moltitudine di tipi di dati che vengono raccolti dalle form. Permettiamo all’utente di modificare<\/em> lo stato<\/em> di una parte della pagina. Lo stato non \u00e8 altro che un dato riguardante quella parte della pagina in ogni momento. Questo potrebbe non essere l’uso designato di <input><\/code>, ma siamo comunque fedeli alla specifica.<\/p>\n
      Il W3C afferma inoltre che gli input potrebbero essere resi ovunque si pu\u00f2 usare del “contenuto di enunciazione”, ossia praticamente ovunque mettereste del testo autonomo. Questo ci permette di usare i radio button al di fuori di una form.<\/p>\n<\/div>\n
      \n
      Tab radiocomandati<\/h2>\n
      Perci\u00f2, adesso che sappiamo un po’ di pi\u00f9 riguardo al poter<\/em> usare i radio button per questo scopo, utilizziamo un esempio per vedere in che modo<\/em> possono effettivamente rimuovere o ridurre la nostra dipendenza da JavaScript modificando il nostro esempio iniziale dei tab.<\/p>\n
      Aggiungere radio button che rappresentino lo stato<\/h3>\n
      Ogni radio button rappresenter\u00e0 uno stato del componente interattivo. Nel nostro caso, abbiamo tre tab e ciascun tab pu\u00f2 essere attivo, quindi abbiamo bisogno di tre radio button, ciascuno dei quali rappresenter\u00e0 un particolare tab nello stato attivo. Dando ai radio button lo stesso nome, siamo sicuri che soltanto uno potr\u00e0 essere “checked” in un qualunque istante. Il nostro esempio JavaScript inizialmente aveva il primo tab attivo, quindi possiamo aggiungere l’attributo checked<\/code> al radio button che rappresenta il primo tab, indicando che attualmente \u00e8 attivo.<\/p>\n
      Dal momento che i selettori CSS possono solo assegnare stili ai selettori “sibling” o “child” basandosi sullo stato di un altro elemento, questi radio button devono trovarsi prima<\/em> di qualunque contenuto che debba essere visivamente manipolato. Nel nostro caso, metteremo i nostri radio button proprio prima del div<\/code> dei tab:<\/p>\n
          \n    <input class=\"state\" type=\"radio\" name=\"houses-state\"\n        id=\"starks\" checked \/>\n    <input class=\"state\" type=\"radio\" name=\"houses-state\"\n        id=\"lannisters\" \/>\n    <input class=\"state\" type=\"radio\" name=\"houses-state\"\n        id=\"targaryens\" \/>\n\n    <div class=\"tabs\">\n    ...\n<\/code><\/pre>\n
      Sostituire le aree di click e touch con i label<\/h3>\n
      I label rispondono naturalmente agli eventi click e touch. Non possiamo dire loro in che modo<\/em> reagire a questi eventi, ma il comportamento \u00e8 prevedibile e noi possiamo sfruttarlo. Quando si clicca o si tocca un label associato ad un radio button, questo viene contrassegnato e la spunta viene tolta da qualsiasi altro radio button dello stesso gruppo.<\/p>\n
      Impostando l’attributo for<\/code> dei nostri lebel all’id<\/code> di un particolare radio button, possiamo sistemare i label ovunque ne abbiamo bisogno ereditando ancora il comportamento al touch e al click.<\/p>\n
      Nell’esempio di prima, i nostri tab erano rappresentati da ancore. Sostituiamole con i label e aggiungiamo gli attributi for<\/code> per collegarli ai radio button corretti. Possiamo anche eliminare la classe active<\/code> da tab e panel poich\u00e9 i radio button manterranno lo stato:<\/p>\n
      ...\n    <input class=\"state\" type=\"radio\" title=\"Targaryens\"\n        name=\"houses-state\" id=\"targaryens\" \/>\n\n    <div class=\"tabs\">\n        <label for=\"starks\" id=\"starks-tab\"\n            class=\"tab\">Starks<\/label>\n        <label for=\"lannisters\" id=\"lannisters-tab\"\n            class=\"tab\">Lannisters<\/label>\n        <label for=\"targaryens\" id=\"targaryens-tab\"\n            class=\"tab\">Targaryens<\/label>\n    <\/div>\n\n    <div class=\"panels\">\n...\n<\/code><\/pre>\n
      Nascondere i radio button con CSS<\/h3>\n
      Ora che abbiamo sistemato i label, possiamo tranquillamente nascondere i radio button. Vogliamo ancora che i tab siano accessibili da tastiera, quindi spostiamo semplicemente i radio button fuori dallo schermo:<\/p>\n
      ...\n\n.radio-tabs .state {\n    position: absolute;\n    left: -10000px;\n}\n\n...\n<\/code><\/pre>\n
      Assegnare stili agli stati basandosi su :checked<\/code> piuttosto che .active<\/code><\/h3>\n
      La pseudo-classe :checked<\/code> ci permette di applicare CSS a un radio button quando \u00e8 selezionato. Il selettore di “sibling” ~<\/code> ci permette di assegnare stili agli elementi che seguono un elemento allo stesso livello. Combinandoli, possiamo assegnare stili a qualunque cosa ci sia dopo i radio button basandoci sullo stato degli stessi.<\/p>\n
      Il pattern \u00e8 #radio:checked ~ .something-after-radio<\/code> o, opzionalmente, #radio:checked ~ .something-after-radio .something-nested-deeper<\/code>:<\/p>\n
      ...\n\n.tab {\n    ...\n}\n#starks:checked ~ .tabs #starks-tab,\n#lannisters:checked ~ .tabs #lannisters-tab,\n#targaryens:checked ~ .tabs #targaryens-tab {\n    ...\n}\n\n.panel {\n    ...\n}\n#starks:checked ~ .panels #starks-panel,\n#lannisters:checked ~ .panels #lannisters-panel,\n#targaryens:checked ~ .panels #targaryens-panel {\n    ...\n}\n\n...\n<\/code><\/pre>\n
      Ora, quando i label del tab vengono cliccati, verr\u00e0 contrassegnato l’appropriato radio button, che assegner\u00e0 uno stile come se fosse active al tab e al panel corretti. Il risultato:<\/p>\n
      Guarda la demo su Codepen: Esempio show\/hide (Radio-Controlled Tabs – No ARIA)<\/a><\/p>\n<\/div>\n
      \n
      Browser support<\/h2>\n
      I requisiti per questa tecnica sono piuttosto pochi. Siamo a posto se un browser supporta la pseudo-classe :checked<\/code> e il sibling selector ~<\/code>. Firefox, Chrome e Webkit mobile supportano da sempre questi selettori. Safari ha cominciato a supportarli a partire dalla versione 3 e Opera dalla 9. Internet Explorer ha iniziato a supportare il sibling selector nella versione 7, ma non ha aggiunto il supporto per :checked<\/code> fino alla IE9. Android supporta :checked<\/code> ma ha un bug che gli impedisce di essere a conoscenza dei cambiamenti a un elemento contrassegnato dopo che la pagina \u00e8 stata caricata.<\/p>\n
      \u00c8 un supporto decente, ma con un pochino di lavoro extra possiamo far s\u00ec che anche Android e le versioni pi\u00f9 vecchie di IE funzionino altrettanto bene.<\/p>\n
      Correggere il bug :checked<\/code> di Android 2.3<\/h3>\n
      In alcune versioni di Android, :checked<\/code> non si aggiorner\u00e0 al cambio di stato di un radio group. Fortunatamente, c’\u00e8 una fix<\/a> che richiede l’animazione infinita “webkit-only” sul body, mostrata da Tim Pietrusky nel suo advanced checkbox hack<\/a>:<\/p>\n
      ...\n\n\/* Android 2.3 :checked fix *\/\n@keyframes fake {\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 1\n    }\n}\nbody {        \n    animation: fake 1s infinite;\n}\n\n...\n<\/code><\/pre>\n
      JavaScript shim per le vecchie versioni di Internet Explorer<\/h3>\n
      Se dovete supportare IE7 e IE8, potete aggiungere questo shim in fondo alla vostra pagina all’interno di un tag script:<\/p>\n
      document.getElementsByTagName('body')[0]\n.addEventListener('change', function (e) {\n    var radios, i;\n    if (e.target.getAttribute('type') === 'radio') {\n        radios = document.querySelectorAll('input[name=\"' +\n            e.target.getAttribute('name') + '\"]');\n        for (i = 0; i < radios.length; i += 1) {\n            radios[ i ].className = \n                radios[ i ].className.replace(\n                    \/(^|\\s)checked(\\s|$)\/,\n                    ' '\n                );\n            if (radios[ i ] === e.target) {\n                radios[ i ].className += ' checked';\n            }\n        }\n    }\n});\n<\/code><\/pre>\n
      Questo aggiunge una class checked<\/code> al radio button attualmente contrassegnato, permettendovi di raddoppiare i selettori e mantenere il supporto. I vostri selettori dovranno essere aggiornati per includere entrambe le versioni di checked, :checked<\/code> e .checked<\/code>, cos\u00ec:<\/p>\n
      ...\n\n.tab {\n    ...\n}\n#starks:checked ~ .tabs #starks-tab,\n#starks.checked ~ .tabs #starks-tab,\n#lannisters:checked ~ .tabs #lannisters-tab,\n#lannisters.checked ~ .tabs #lannisters-tab,\n#targaryens:checked ~ .tabs #targaryens-tab,\n#targaryens.checked ~ .tabs #targaryens-tab {\n    ...\n}\n\n.panel {\n    ...\n}\n#starks:checked ~ .panels #starks-panel,\n#starks.checked ~ .panels #starks-panel,\n#lannisters:checked ~ .panels #lannisters-panel,\n#lannisters.checked ~ .panels #lannisters-panel,\n#targaryens:checked ~ .panels #targaryens-panel,\n#targaryens.checked ~ .panels #targaryens-panel {\n    ...\n}\n\n...\n<\/code><\/pre>\n
      Usare uno script inline ci fa inoltre risparmiare una potenziale richiesta http e accelera le interazioni nei browser pi\u00f9 nuovi. Quando scegliete di non supportare IE7 e IE8, potete eliminare lo shim senza cambiare alcuna parte del vostro codice.<\/p>\n<\/div>\n
      \n
      Mantenere l’accessibilit\u00e0<\/h2>\n
      Mentre i nostri tab JavaScript inizialmente mostravano la gestione dello stato tra tab che cambiano, un esempio pi\u00f9 robusto dovrebbe utilizzare il progressive enhancement per cambiare tre liste con il titolo in tab. Dovrebbe anche gestire l’aggiunta di tutti gli ARIA roles e gli attributi che lo screen reader e altre tecnologie assistive usano per navigare i contenuti di una pagina. Un migliore esempio JavaScript potrebbe essere questo:<\/p>\n
      Guarda la demo su Codepen: Esempio show\/hide (JavaScript Tabs – ARIA)<\/a><\/p>\n
      Parti di HTML vengono rimosse e saranno ora aggiunte con dell’altro JavaScript; \u00e8 stato aggiunto del nuovo HTML che verr\u00e0 nascosto con del JavaScript in pi\u00f9. \u00c8 stato inoltre aggiunto un nuovo CSS per gestire gli stati pre-enhanced e post-enhanced. In generale, il nostro codice \u00e8 aumentato di un bel po’.<\/p>\n
      Per supportare ARIA, in particolar modo per gestire lo stato aria-selected<\/code>, dovremo rimettere del JavaScript nei tab radio-comandati. Tuttavia, la quantit\u00e0 di progressive enhancement che dobbiamo fare \u00e8 enormemente ridotta.<\/p>\n
      Se non avete familiarit\u00e0 con ARIA o siete un po’ arrugginiti, potreste far riferimento alle ARIA Authoring Practices per tabpanel<\/a>.<\/p>\n
      Aggiungere gli ARIA roles e attributes<\/h3>\n
      Per prima cosa, aggiungeremo il ruolo di tablist<\/code> al div<\/code> contenitore.<\/p>\n
      <div class=\"radio-tabs\" role=\"tablist\">\n  \n    <input class=\"state\" type=\"radio\" name=\"houses-state\"\n        id=\"starks\" checked \/>\n    ...\n<\/code><\/pre>\n
      Poi, aggiungeremo il ruolo di tab<\/code> e l’attributo aria-controls<\/code> a ciascun radio button. Il valore di aria-controls<\/code> sar\u00e0 l’id<\/code> del corrispondente panel da mostrare. Inoltre, aggiungeremo i title ad ogni radio button, cos\u00ec che gli screen reader possano associare un label ad ogni tab. Il radio button contrassegnato avr\u00e0 anche aria-selected=\"true\"<\/code>:<\/p>\n
      <div class=\"radio-tabs\" role=\"tablist\">\n  \n    <input class=\"state\" type=\"radio\" title=\"Starks\"\n        name=\"houses-state\" id=\"starks\" role=\"tab\"\n        aria-controls=\"starks-panel\" aria-selected=\"true\"checked \/>\n    <input class=\"state\" type=\"radio\" title=\"Lanisters\" \n        name=\"houses-state\" id=\"lannisters\" role=\"tab\" \n        aria-controls=\"lannisters-panel\" \/>\n    <input class=\"state\" type=\"radio\" title=\"Targaryens\" \n        name=\"houses-state\" id=\"targaryens\" role=\"tab\" \n        aria-controls=\"targaryens-panel\" \/>\n\n    <div class=\"tabs\">\n<\/code><\/pre>\n
      Nasconderemo i tab visuali dalla tecnologia assistiva perch\u00e9 sono futili interfacce per i veri tab (i radio button). Facciamo ci\u00f2 aggiungendo aria-hidden=\"true\"<\/code> al nostro div<\/code> .tabs<\/code>:<\/p>\n
          ...\n    <input class=\"state\" type=\"radio\" title=\"Targaryens\"\n        name=\"houses-state\" id=\"targaryens\" role=\"tab\"\n        aria-controls=\"targaryens-panel\" \/>\n\n    <div class=\"tabs\" aria-hidden=\"true\">\n        <label for=\"starks\" id=\"starks-tab\"\n            class=\"tab\">Starks<\/label>\n    ...\n<\/code><\/pre>\n
      L’ultimo pezzetto di supporto per ARIA che dobbiamo aggiungere \u00e8 sui panel. Ogni panel avr\u00e0 il ruolo di tabpanel<\/code> e un attributo aria-labeledby<\/code> con il valore del corrispondente id del tab:<\/p>\n
         ...\n   <div class=\"panels\">\n        <ul id=\"starks-panel\" class=\"panel active\"\n            role=\"tabpanel\" aria-labelledby=\"starks-tab\">\n            <li>Eddard<\/li>\n            <li>Caitelyn<\/li>\n            <li>Robb<\/li>\n            <li>Sansa<\/li>\n            <li>Brandon<\/li>\n            <li>Arya<\/li>\n            <li>Rickon<\/li>\n        <\/ul>\n        <ul id=\"lannisters-panel\" class=\"panel\"\n            role=\"tabpanel\" aria-labelledby=\"lannisters-tab\">\n            <li>Tywin<\/li>\n            <li>Cersei<\/li>\n            <li>Jamie<\/li>\n            <li>Tyrion<\/li>\n        <\/ul>\n        <ul id=\"targaryens-panel\" class=\"panel\"\n            role=\"tabpanel\" aria-labelledby=\"targaryens-tab\">\n            <li>Viserys<\/li>\n            <li>Daenerys<\/li>\n        <\/ul>\n    <\/div>\n    ...\n<\/code><\/pre>\n
      Tutto quello che dobbiamo fare con JavaScript \u00e8 di impostare il valore di aria-selected<\/code> al cambio dei radio button:<\/p>\n
      $('.state').change(function () {\n    $(this).parent().find('.state').each(function () {\n        if (this.checked) {\n            $(this).attr('aria-selected', 'true');\n        } else {\n            $(this).removeAttr('aria-selected');\n        }       \n    });\n});\n<\/code><\/pre>\n
      Questo fornisce anche un hook alternativo per il supporto di IE7 e IE8. Entrambe i browser supportano i selettori di attributo, quindi potreste aggiornare il CSS per fargli usare [aria-selected]<\/code> invece di .checked<\/code> e rimuovere lo shim di supporto.<\/p>\n
      ...\n\n#starks[aria-selected] ~ .tabs #starks-tab,\n#lannisters[aria-selected] ~ .tabs #lannisters-tab,\n#targaryens[aria-selected] ~ .tabs #targaryens-tab,\n#starks:checked ~ .tabs #starks-tab,\n#lannisters:checked ~ .tabs #lannisters-tab,\n#targaryens:checked ~ .tabs #targaryens-tab {\n    \/* active tab, now with IE7 and IE8 support! *\/\n}\n\n...\n<\/code><\/pre>\n
      Il risultato \u00e8 un supporto completo di ARIA con un minimo utilizzo di JavaScript, pur mantenendo i benefici dei tab che possono essere usati non appena il browser li mostra.<\/p>\n
      Guarda la demo su Codepen: Esempio Show\/hide (Radio-Controlled Tabs – ARIA)<\/a><\/p>\n
      Ecco fatto. Notate che dal momento che l’HTML sottostante \u00e8 disponibile fin da subito, a differenza dell’esempio iniziale con JavaScript, non abbiamo dovuto manipolare o creare dell’HTML in pi\u00f9. In effetti, a parte aggiungere gli ARIA roles e i parametri, dopo tutto non abbiamo dovuto fare granch\u00e9.<\/p>\n<\/div>\n
      \n
      Limitazioni da tenere a mente<\/h2>\n
      Come la maggior parte delle tecniche, anche questa ha alcune limitazioni. La prima e pi\u00f9 importante \u00e8 che lo stato di queste interfacce \u00e8 transitorio. Quando si fa il refresh della pagina, queste interfacce ritorneranno al loro stato iniziale. Questo funziona bene per alcuni pattern, come le modali o i menu offscreen, e meno bene per altri. Se avete bisogno di persistenza nello stato della vostra interfaccia, \u00e8 sempre meglio usare i link, le form submission o le AJAX requests per essere sicuri che il server possa tenere traccia dello stato tra le visite o i page load.<\/p>\n
      La seconda limitazione \u00e8 che c’\u00e8 uno “scope gap” in quello che pu\u00f2 ricevere stili usando questa tecnica. Dal momento che non si possono mettere i radio button prima degli elementi <body><\/code> o <html><\/code> e potete solo assegnare uno stile agli elementi che seguono i radio button, non potete influenzare alcun altro elemento con questa tecnica.<\/p>\n
      La terza limitazione \u00e8 che potete applicare questa tecnica solo alle interfacce che vengono attivate mediante un click, un tap o un input da tastiera. Potete usare il progressive enhancement per ascoltare interazioni pi\u00f9 complesse come lo scrolling, gli swipes, il double-tap o il multitouch, ma se le vostre interfacce sono basate solo su questi eventi, le tecniche standard di progressive enhnacement potrebbero andare meglio.<\/p>\n
      La limitazione finale riguarda il modo in cui i radio group interagiscono con il flusso dei tab nel documento. Se avete notato nell’esempio dei tab, toccare un tab vi porta nel tab group, ma ritoccandolo di nuovo rimanete nello stesso gruppo. Questo va bene per i tab ed \u00e8 il comportamento atteso per le ARIA tablist, ma se volete usare questa tecnica per qualcosa come un pulsante di apertura e chiusura, dovrete essere in grado di avere entrambe i pulsanti nel flusso dei tab della pagina indipendentemente dalla posizione del pulsante. Possiamo sistemare in quattro passi questa situazione con un po’ di JavaScript:<\/p>\n
        \n
      1. Impostate i radio button e i label a display: none<\/code> per toglierli dal flusso dei tab e non mostrarli sulla pagina.<\/li>\n
      2. Usate JavaScript per aggiungere buttons<\/code> dopo ciascun label<\/code>.<\/li>\n
      3. Assegnate uno stile ai button proprio come ai label.<\/li>\n
      4. Ascoltate i click sul button<\/code> e fate in modo che i click partano sui label<\/code> vicini.<\/li>\n<\/ol>\n
        Anche usando questo processo, vi raccomando caldamente di usare una tecnica standard di progressive enhancement per essere sicuri che gli utenti senza JavaScript che interagiscono con le vostre interfacce mediante tastiera non siano confusi dai radio button. Raccomando il seguente JavaScript da inserire nella head del vostro documento:<\/p>\n
        <script>document.documentElement.className+=\" js\";<\/script>\n<\/code><\/pre>\n
        Prima che qualsiasi contenuto venga mostrato, questo aggiunger\u00e0 la classe js<\/code> al vostro elemento <html><\/code>, permettendovi di assegnare uno stile al contenuto a seconda se il JavaScript sia attivo oppure no. Il vostro CSS quindi sar\u00e0 simile a questo:<\/p>\n
        .thing {\n    \/* base styles - when no JavaScript is present\n       hide radio button labels, show hidden content, etc. *\/\n}\n\n.js .thing {\n    \/* style when JavaScript is present\n       hide content, show labels, etc. *\/\n}\n<\/code><\/pre>\n
        Ecco un esempio di menu offscreen implementato usando il processo di cui sopra. Se JavaScript \u00e8 disabilitato, il menu appare sempre aperto senza alcun overlay:<\/p>\n
        Guarda la demo su Codepen: Esempio show\/hide (Radio-Controlled Offscreen Menu)<\/a><\/p>\n<\/div>\n
        \n
        Implementare altri pattern di “contenuto on demand”<\/h2>\n
        Diamo una rapida occhiata al modo in cui potreste creare alcune interfacce utente comuni con questa tecnica. Tenete a mente che una robusta implementazione gestir\u00e0 l’accessibilit\u00e0 attraverso gli ARIA roles e gli attributes.<\/p>\n
        Finestre modali con overlay<\/h3>\n