Docs Italia beta

Documenti pubblici, digitali.

Documentazione delle App di valutazione dell’adesione ai modelli
Progetto: Designers Italia
Amministrazione: italia
Informazioni
Sorgente
Azioni

Documentazione dell’App di valutazione dell’adesione ai modelli

L’App di valutazione dell’adesione ai modelli è uno strumento a supporto del processo di verifica della corretta adesione ai modelli di Designers Italia per i Comuni e le scuole.

Cos’è e cosa fa

L’App di valutazione dell’adesione ai modelli è uno strumento a supporto del processo di verifica della corretta adesione ai modelli di Designers Italia per i Comuni e le scuole.

È un’applicazione desktop che aiuta a valutare la qualità, le caratteristiche e la corrispondenza ad alcuni dei criteri di conformità della misura 1.4.1 del PNRR Esperienza del cittadino nei servizi pubblici digitali per il sito comunale e scolastico. L’App supporta lo sviluppo e la verifica dei siti pubblicati su PA digitale 2026.

L’App è di supporto agli sviluppatori dei siti istituzionali per verificare la corretta implementazione dei requisiti, sia durante che dopo lo sviluppo, fornendo indicazioni per eventuali modifiche o piani di miglioramento. L’App è di supporto anche al Dipartimento per la trasformazione digitale per la valutazione, insieme ad altri controlli manuali e semiautomatici, della conformità dei siti per l’erogazione dei fondi della misura 1.4.1.

L’App è in versione beta e quindi soggetta a revisioni e perfezionamenti continui.

Caratteristiche dell’App:

  • è disponibile per sistemi operativi Windows, MacOS e Linux;
  • è basata su tecnologia Lighthouse e Puppeteer;
  • aiuta a valutare l’aderenza a criteri di conformità, raccomandazioni e altri parametri consigliati;
  • fornisce le informazioni per interpretare i risultati e apportare migliorie.

L’App è stata creata sulla base della conformità agli avvisi della misura 1.4.1 e nei report sono presenti riferimenti diretti ad alcuni dei criteri di conformità.

Criteri di conformità e raccomandazioni

La misura 1.4.1 del PNRR prevede l’adesione, da parte dei Comuni e delle Scuole sedi di Direttivo dislocate su tutto il territorio nazionale, agli standard previsti per l’erogazione di servizi informativi e/o transazionali al cittadino.

Questo obiettivo si concretizza nel rispetto dei criteri di conformità specificati negli avvisi della misura 1.4.1 Esperienza del cittadino nei servizi pubblici digitali, rispetto alla tipologia di destinatario (Comuni e scuole) e alla conformazione del pacchetto effettuata in fase di adesione all’avviso.

Oltre ai criteri di conformità vengono indicate delle raccomandazioni progettuali che non sono oggetto di verifica tecnica ed asseverazione, ma rimangono valide secondo le indicazioni di legge, le linee guida e le buone pratiche.

Gli obiettivi sono stati definiti per assicurare l’aderenza ai principi contenuti nelle Linee guida di design per i siti internet e i servizi digitali della PA e vengono raggiunti rispettando i criteri di conformità rispetto alle caratteristiche dell’esperienza utente, alle funzionalità necessarie, all’ottemperanza normativa, ai livelli di performance e sicurezza.

Vai ai criteri di conformità e alle raccomandazioni per il modello Comuni

Vai ai criteri di conformità e alle raccomandazioni per il modello scuole

Attenzione

Per il corretto funzionamento dell’app e svolgimento delle valutazioni, è necessario, in fase di sviluppo dei siti, tenere conto dei requisiti di funzionamento per il modello Comuni e dei requisiti di funzionamento per il modello scuole.

Installazione e uso delle app

L’App di valutazione è distribuita sotto forma di file zip che contengono l’eseguibile del programma.

Attenzione

L’app necessita di un computer con almeno 16GB di RAM per una corretta esecuzione.

Installare le app

Vai sul repository GitHub, individua l’app corretta in base a sistema operativo e processore (macOS arm64, macOS Intel, Windows, Linux) e clicca per scaricare il file zip.

Assicurati che la release sia l’ultima disponibile, contrassegnata dall’etichetta verde «Latest».

Abilitazione app su MacOS

Potresti ricevere un avviso da MacOS che indica che l’app proviene da uno sviluppatore non riconosciuto. Per abilitare l’app, segui questi passaggi dopo aver scaricato il file ZIP:

  1. apri il Terminale;
  2. esegui il comando xattr -rd com.apple.quarantine DTD-AppDiValutazione-XYZ-mac.zip.

oppure

  1. sul tuo mac, vai a Impostazioni di sistema > Privacy e sicurezza;
  2. vai alla sezione «Sicurezza», dove troverai un messaggio riguardante il file che hai appena cercato di aprire. Clicca su “Apri comunque”. Potrebbe comparire un’ulteriore finestra di dialogo dove è necessario cliccare su “Apri”.

Abilitazione app su Windows

Potresti ricevere un avviso da Windows che indica che l’app proviene da uno sviluppatore non riconosciuto. Per procedere con l’installazione, segui questi passaggi dopo aver scaricato il file ZIP:

  • apri il file .exe;
  • nella finestra di avviso, clicca su “Ulteriori informazioni”;
  • clicca il pulsante “Esegui comunque” per avviare l’app.

Avviare una scansione

Nella tab «Nuova scansione»:

  1. seleziona la tipologia ente (Comune o Scuola), cliccando sul menu a comparsa;
  2. inserisci la URL del sito da scansionare, includendo il protocollo http:// o https://;
  3. se vuoi modificare le impostazioni avanzate, clicca sulla barra per espandere la sezione e indica accuratezza (quante pagine scansionare), quante pagine scansionare simultaneamente e timeout (il tempo massimo di caricamento di ciascuna pagina, espresso in millisecondi);
  4. seleziona i criteri e le raccomandazioni che vuoi verificare dalla lista. Puoi selezionarli o deselezionarli tutti cliccando su «Seleziona tutto»;
  5. clicca il pulsante «Avvia scansione» per avviare la scansione.
L'interfaccia dell'app per avviare una nuova scansione.

Avviata la scansione, non sarà più possibile modificare i dati e le preferenze, ma dovrai cliccare sul pulsante «Annulla scansione» e avviarne una nuova.

Durante la scansione, verranno visualizzati:

  • le impostazioni avanzate selezionate (a): accuratezza, pagine scansionate simultaneamente, timeout;
  • una barra di avanzamento della scansione (b);
    1. la lista dei log delle verifiche che l’app sta effettuando (c).
L'interfaccia dell'app durante la scansione.

Visualizzare il risultato della scansione e accedere al report dettagliato

Conclusa la scansione, si aprirà un resoconto riassuntivo che mostrerà:

  • il risultato generale della scansione (OK verde per risultato positivo, KO rosso per risultato negativo, X rossa per errori nella scansione) e il dettaglio dei criteri superati (a);
  • una sezione espandibile «Criteri e raccomandazioni» (b), con la lista delle verifiche svolte e il relativo risultato. In questa sezione puoi cambiare la selezione dei criteri e/o delle raccomandazioni e avviare una nuova scansione, cliccando sul pulsante «Riavvia scansione»;
  • una sezione espandibile «Consulta il log» (c) con la lista dei log delle verifiche svolte dall’app.

Al clic sui pulsanti in altro a destra puoi visualizzare (d) o scaricare (e) il report dettagliato dei risultati. Scopri come leggere il report dettagliato dei risultati

Il risultato della scansione.

Visualizzare lo storico delle scansioni

Nella tab «Storico sansioni», puoi visualizzare tutte le scansioni effetuate.

Per ogni scansione, trovi le informazioni sulla tipologia di ente, l’url del sito, la durata, il risultato, i criteri superati, il totale dei criteri verificati, la data e l’ora.

Cliccando sui pulsanti di fianco ogni scansione, puoi:

  • vedere il dettaglio della scansione (a);
  • visualizzare il report dettagliato (b);
  • scaricare il report (c);
  • eliminare la scansione e il relativo report dallo storico (d).
Lo storico delle scansioni.

Il report e i risultati

Il report è composto da:

  1. Barra superiore
  2. Indicazione della documentazione di riferimento
  3. Panoramica del risultato
  4. Dettaglio dei risultati
Il report completo.

Barra superiore

Nella barra superiore del report trovi:

  1. il dominio del sito web che è stato scansionato;
  2. data e ora in cui il report è stato generato;
  3. la versione dell’app di valutazione.
La barra superiore del report.

Documentazione di riferimento

Al di sotto della barra superiore, trovi i riferimenti ai documenti ufficiali della Misura 1.4.1 su cui si basano le verifiche effettuate durante la scansione.

La sezione del report con la documentazione di riferimento.

Panoramica del risultato

In questa sezione del report, sotto forma di rappresentazione grafica, trovi:

  1. il risultato generale della scansione;
  2. il dettaglio dei criteri di conformità superati, divisi per pacchetto, espresso in percentuale (ad esempio 100%, 60%, 0%, ecc.) e in numeri (ad esempio, 9 criteri su 9 superati, 16 criteri su 20 superati, ecc.).

Il risultato generale è positivo nel caso in cui tutti i criteri siano stati superati e il grafico presenterà un “OK” bianco in un cerchio verde.

La sezione con la panoramica di un risultato positivo.

Nel caso in cui anche solo un criterio non sia superato, il risultato generale sarà negativo e il grafico presenterà un “KO” bianco in un cerchio rosso.

La sezione con la panoramica di un risultato negativo.

Nel caso in cui una o più pagine presentino errori di navigazione che impediscono la scansione dei criteri, il risultato generale sarà fallito per errore (negativo) e il grafico presenterà una “X” rossa in un cerchio bianco.

La sezione con la panoramica di un risultato con errori.

Dettaglio dei risultati

Nella sezione del dettaglio dei risultati trovi, in alto, la legenda che indica come vengono segnalati i controlli superati (verde), falliti (rosso) e con errore (simbolo X rosso).

La legenda per i risultati.

Sotto la leggenda trovi una serie di sezioni espandibili con:

  1. i dettagli dei controlli che hanno generato errori;
  2. i dettagli dei criteri non superati;
  3. i dettagli dei criteri superati;
  4. i dettagli delle raccomandazioni non obbligatorie;
  5. il link al report di lighthouse, che non è oggetto di verifica della misura ma offre indicazioni su prestazioni e accessibilità del sito.
Le sezioni espandibili con i dettagli del risultato.

Espandendo un accordion, trovi:

  1. la lista dei controlli per quella categoria con un bollino che mostra il risultato della scansione per ogni controllo (a).

Al clic su un elemento della lista, trovi:

  1. il bollino del risultato del controllo (b) - spunta verde se superato, punto esclamativo rosso se fallito;
  2. il codice e il nome del controllo (c);
  3. il dettaglio del controllo (d), che puoi espandere per approfondire i requisiti di successo, le modalità di verifica e i riferimenti normativi;
  4. il resoconto del controllo (e) - testo che riporta la presenza di errori nelle pagine scansionate. Nel caso in cui ci siano raccomandazioni che risultano non essere superate, il testo riporta la presenza di errori nelle pagine scansionate
  5. una tabella di dettaglio con ulteriori informazioni sul risultato (f).
Il dettaglio di un singolo risultato.

Attenzione

Non tutti i criteri e le raccomandazioni presentano le stesse informazioni sui risultati, ma variano a seconda dei requisiti richiesti.

Attenzione

Nel caso in cui la pagina che presenta un errore sia la homepage del sito, la scansione risulterà fallita. Il report riporterà i criteri che non è stato possibile verificare, ma non verranno presentati la lista dei criteri superati e il report di Lighthouse.

Requisiti tecnici e modalità di verifica per il modello Comuni

Di seguito sono riportati i criteri di conformità e le raccomandazioni verificabili tramite App di valutazione dell’adesione al modello Comuni.

Per il corretto funzionamento dell’App di valutazione, è necessario inserire dei data attribute all’interno dei tag HTML del sito. Questi vengono indicati separatamente per ognuno dei criteri. Alcuni data attribute valgono per più criteri.

La chiave generale dei data attribute è data-element=* e va inserita all’interno dei tag HTML.

Nota

I data attribute, dove possibile, sono già presenti nei materiali forniti da Designers Italia, sia all’interno dei template HTML che dei temi CMS messi a disposizione. Rimane tuttavia responsabilità dell’ente verificare che siano correttamente inseriti dove richiesto.

Nota

Per tutto ciò che è un URL, per esempio FAQ o Segnalazione disservizio, l’App controlla anche che l’URL nell’href del componente non sia nullo e, per alcuni casi specifici, che sia in HTTPS e che riporti ad una pagina “funzionante”.

Nota

Per tutto ciò che viene controllato sulla base di un vocabolario si utilizzano controlli non case-sensitive.

Importante

I requisiti tecnici qui riportati sono necessari, oltre che per il funzionamento dell’App di valutazione, anche per lo svolgimento delle verifiche da parte del DTD per il rilascio dei fondi della misura 1.4.1. A questo proposito il sito comunale, una volta pubblicato, deve anche essere funzionante durante gli orari notturni e raggiungibile dagli indirizzi IP 15.160.11.200, 15.160.250.158 e 18.102.41.229 (è necessario che questi indirizzi non vengano bloccati da un eventuale firewall).

Criterio C.SI.1.1 - Coerenza dell’utilizzo dei font (librerie di caratteri)

Condizioni di successo: per superare il test effettuato dall’app, tutti i titoli (heading) e tutti i paragrafi delle pagine del sito in lingua italiana utilizzano esclusivamente i font Titillium Web, Lora o Roboto Mono come font di default. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: tramite ricerca di specifici attributi data-element, nelle pagine analizzate viene verificato che i font di default siano quelli richiesti all’interno di tutti gli <h> e <p>. La verifica viene svolta sulla homepage, N pagine di primo livello, N pagine di secondo livello, N pagine di terzo livello “Scheda servizio” e nella pagina di accesso all’area riservata.

Requisiti tecnici:

Caricamento pagina di accesso all’area riservata:

In homepage, se è presente un link alla pagina di accesso all’area riservata, questo deve contenere il data-element="personal-area-login" nel tag <a> contenente il link alla pagina.

Esempio:

(homepage)
. . . 
<a href="#" data-element="personal-area-login" >
   <span>Accedi all'area personale</span>
</a>

Caricamento pagine primo livello:

In homepage, per poter identificare i link alle pagine di primo livello, nel menù principale identificato dal tag <div class=»navbar»> i link alle pagine di primo livello devono contenere all’interno del tag <a class=»nav-link»> i seguenti attributi:

  • «Amministrazione»: data-element="management"
  • «Novità»: data-element="news"
  • «Servizi»: data-element="all-services"
  • «Vivere il Comune»: data-element="live"
  • Eventuali voci aggiuntive: data-element=”custom-submenu”

L’assenza di uno dei data-element (ad eccezione di quelli relativi a eventuali voci aggiuntive) porta all’impossibilità di esecuzione dell’audit in quanto non sarà possibile recuperare il link.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>

Caricamento pagine di secondo livello:

Per il caricamento delle pagine di secondo livello è necessario che i data-element alle pagine di primo livello siano correttamente posizionati all’interno dei link delle pagine di primo livello nel menù principale.

La pagina di primo livello «Amministrazione», identificata grazie al data-element="management", dovrà contenere il data-element="management-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Novità», identificata grazie al data-element="news", dovrà contenere il data-element="news-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Vivere il comune», identificata grazie al data-element="live", dovrà contenere due bottoni. Il bottone che porta alla pagina di secondo livello «Eventi» dovrà contenere data-element="live-button-events" e il bottone che porta alla pagina di secondo livello «Luoghi» dovrà contenere data-element="live-button-locations". Per entrambi i bottoni il data-element dovrà essere posizionato sul tag <button> e il link alla pagina di secondo livello dovrà essere presente o all’interno dell’attributo «onclick» o all’interno di un attributo «href». La mancata individuazione di almeno un link attraverso questi data-element porta all’impossibilità di esecuzione dell’audit.

Nel caso fossero presenti delle voci aggiuntive di primo livello esse vengono identificate attraverso il data-element=”custom-submenu”. In ognuna di queste pagine è necessaria la presenza del data-element=”custom-category-link” all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>


(pagina primo livello “Amministrazione”)
. . .
<div class="card-body">
   <a href="#" data-element="management-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Novità”)
. . .
<div class="card-body">
   <a href="#" data-element="news-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <a href="#" data-element="service-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Vivere il Comune”)
. . .
<button type="button" data-element="live-button-events" onclick="location.href='#';">
   <span class="">Tutti gli eventi</span>
</button>
. . .
<button type="button" data-element="live-button-locations" onclick="location.href='#';">
   <span class="">Tutti i luoghi</span>
</button>

Caricamento pagine di terzo livello «Scheda servizio»:

Per il caricamento di queste pagine di terzo livello è necessario che il data-element alla pagina di primo livello «Servizi» sia correttamente posizionato all’interno del link della pagina di primo livello nel menù principale.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di terzo livello “Scheda servizio”. Se nella pagina è presente un bottone che permette di caricare altri link ai servizi attraverso una chiamata AJAX esso dovrà contenere il data-element="load-other-cards".

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<button type="button" onclick="handleOnClick(`script`)" data-element="load-other-cards" >
   <span class="">Carica altri risultati</span>
</button>

Se invece i link ai servizi sono organizzati tramite paginazione è necessario inserire il data-element="pager-link" in tutti i link <a> per cambiare pagina, incluso quello per caricare i link successivi.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<nav class="pagination-wrapper">
    <ul class="pagination">
        <li class="page-item">
            <a aria-label="Vai alla pagina 1" class="page-link" data-element="pager-link" href="#">
                1
            </a>
        </li>
        <li class="page-item">
            <a aria-label="Vai alla pagina 2" class="page-link" data-element="pager-link" href="#"></a>
                2
            </a>
        </li>
        . . .
        <li class="page-item">
            <a class="page-link" data-element="pager-link" href="#">
                <span>Pagina successiva</span>
            </a>
        </li>
    </ul>
 </nav>

La paginazione dei servizi può essere fatta anche su una pagina dedicata, diversa dalla pagina di primo livello «Servizi». In questo caso la pagina di primo livello «Servizi» deve avere un link con data-element="pager-link" che punta alla pagina con i link ai servizi.

La mancata individuazione di almeno un link attraverso il data-element="service-link" porta all’impossibilità di esecuzione dell’audit.

Criterio C.SI.1.2 - Libreria di elementi di interfaccia

Condizioni di successo: per superare il test effettuato dall’app, in ogni pagina deve essere presente e in uso la libreria Bootstrap Italia in una versione uguale o superiore alla 2.0 e almeno il 30% delle classi CSS usate deve appartenere alle classi CSS di Bootstrap Italia. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando specifici attributi data-element, in ogni pagina analizzata viene verificata la presenza della libreria Bootstrap Italia e la versione in uso, individuando la proprietà CSS –bootstrap-italia-version all’interno del selettore :root o la variabile globale window.BOOTSTRAP_ITALIA_VERSION. Inoltre, viene verificato che almeno il 30% delle classi CSS uniche trovate nella pagina appartiene all’elenco delle classi CSS di Bootstrap Italia. La verifica viene svolta sulla homepage, N pagine di primo livello, N pagine di secondo livello, N pagine di terzo livello “Scheda servizio”, nella pagina di accesso all’area riservata e nella pagina della funzionalità di prenotazione appuntamento.

Requisiti tecnici:

Nota

Qualora il test dovesse fallire e tutti i data-element necessari sono presenti, riprova la verifica disabilitando il post processing del CSS (minificazione o inlining).

Caricamento pagina di accesso all’area riservata:

In homepage, se è presente un link alla pagina di accesso all’area riservata, questo deve contenere il data-element="personal-area-login" nel tag <a> contenete il link alla pagina.

Esempio:

(homepage)
. . . 
<a href="#" data-element="personal-area-login" >
   <span>Accedi all'area personale</span>
</a>

Caricamento pagina di prenotazione appuntamenti:

Per caricare la pagina prenotazione appuntamenti è necessario che il data-element=”all-service” sia posizionato in homepage nel link della pagina di primo livello “Servizi”. In questa pagina di primo livello il link alla pagina di prenotazione appuntamenti deve contenere il data-element="appointment-booking" nel tag <a> contenente il link alla pagina.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina di primo livello “Servizi”)
. . .
<li>
   <a href="#" data-element="appointment-booking"></a>
</li>

Caricamento pagine primo livello:

In homepage, per poter identificare i link alle pagine di primo livello, nel menù principale identificato dal tag <div class=»navbar»> i link alle pagine di primo livello devono contenere all’interno del tag <a class=»nav-link»> i seguenti attributi:

  • «Amministrazione»: data-element="management"
  • «Novità»: data-element="news"
  • «Servizi»: data-element="all-services"
  • «Vivere il Comune»: data-element="live"
  • Eventuali voci aggiuntive: data-element=”custom-submenu”

L’assenza di uno dei data-element (ad eccezione di quelli relativi a eventuali voci aggiuntive) porta all’impossibilità di esecuzione dell’audit in quanto non sarà possibile recuperare il link.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>

Caricamento pagine di secondo livello:

Per il caricamento delle pagine di secondo livello è necessario che i data-element alle pagine di primo livello siano correttamente posizionati all’interno dei link delle pagine di primo livello nel menù principale.

La pagina di primo livello «Amministrazione», identificata grazie al data-element="management", dovrà contenere il data-element="management-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Novità», identificata grazie al data-element="news", dovrà contenere il data-element="news-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Vivere il comune», identificata grazie al data-element="live", dovrà contenere due bottoni. Il bottone che porta alla pagina di secondo livello «Eventi» dovrà contenere data-element="live-button-events" e il bottone che porta alla pagina di secondo livello «Luoghi» dovrà contenere data-element="live-button-locations". Per entrambi i bottoni il data-element dovrà essere posizionato sul tag <button> e il link alla pagina di secondo livello dovrà essere presente o all’interno dell’attributo «onclick» o all’interno di un attributo «href». La mancata individuazione di almeno un link attraverso questi data-element porta all’impossibilità di esecuzione dell’audit.

Nel caso fossero presenti delle voci aggiuntive di primo livello esse vengono identificate attraverso il data-element=”custom-submenu”. In ognuna di queste pagine è necessaria la presenza del data-element=”custom-category-link” all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>


(pagina primo livello “Amministrazione”)
. . .
<div class="card-body">
   <a href="#" data-element="management-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Novità”)
. . .
<div class="card-body">
   <a href="#" data-element="news-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <a href="#" data-element="service-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Vivere il Comune”)
. . .
<button type="button" data-element="live-button-events" onclick="location.href='#';">
   <span class="">Tutti gli eventi</span>
</button>
. . .
<button type="button" data-element="live-button-locations" onclick="location.href='#';">
   <span class="">Tutti i luoghi</span>
</button>

Caricamento pagine di terzo livello «Scheda servizio»:

Per il caricamento di queste pagine di terzo livello è necessario che il data-element alla pagina di primo livello «Servizi» sia correttamente posizionato all’interno del link della pagina di primo livello nel menù principale.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di terzo livello “Scheda servizio”. Se nella pagina è presente un bottone che permette di caricare altri link ai servizi attraverso una chiamata AJAX esso dovrà contenere il data-element="load-other-cards".

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<button type="button" onclick="handleOnClick(`script`)" data-element="load-other-cards" >
   <span class="">Carica altri risultati</span>
</button>

Se invece i link ai servizi sono organizzati tramite paginazione è necessario inserire il data-element="pager-link" in tutti i link <a> per cambiare pagina, incluso quello per caricare i link successivi.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<nav class="pagination-wrapper">
    <ul class="pagination">
        <li class="page-item">
            <a aria-label="Vai alla pagina 1" class="page-link" data-element="pager-link" href="#">
                1
            </a>
        </li>
        <li class="page-item">
            <a aria-label="Vai alla pagina 2" class="page-link" data-element="pager-link" href="#"></a>
                2
            </a>
        </li>
        . . .
        <li class="page-item">
            <a class="page-link" data-element="pager-link" href="#">
                <span>Pagina successiva</span>
            </a>
        </li>
    </ul>
 </nav>

La paginazione dei servizi può essere fatta anche su una pagina dedicata, diversa dalla pagina di primo livello «Servizi». In questo caso la pagina di primo livello «Servizi» deve avere un link con data-element="pager-link" che punta alla pagina con i link ai servizi.

La mancata individuazione di almeno un link attraverso il data-element="service-link" porta all’impossibilità di esecuzione dell’audit.

Criterio C.SI.1.3 - Schede informative di servizio per il cittadino

Condizioni di successo: per superare il test effettuato dall’app, devono essere presenti almeno 10 schede informative di servizio e in queste le voci obbligatorie e i relativi contenuti sono presenti e, dove richiesto, sono nell’ordine corretto. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: viene verificata la presenza e l’ordine delle voci richieste ricercandole all’interno della pagina e dell’indice tramite specifici data-element. Per essere ritenute valide, le voci devono avere contenuti associati della tipologia indicata all’interno del documento di architettura dell’informazione. La verifica viene effettuata su N pagine di terzo livello “Scheda servizio”.

Requisiti tecnici:

Caricamento pagine di terzo livello «Scheda servizio»:

Per il caricamento di queste pagine di terzo livello è necessario che il data-element alla pagina di primo livello «Servizi» sia correttamente posizionato all’interno del link della pagina di primo livello nel menù principale.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di terzo livello “Scheda servizio”. Se nella pagina è presente un bottone che permette di caricare altri link ai servizi attraverso una chiamata AJAX esso dovrà contenere il data-element=»load-other-cards».

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<button type="button" onclick="handleOnClick(`script`)" data-element="load-other-cards" >
   <span class="">Carica altri risultati</span>
</button>

Se invece i link ai servizi sono organizzati tramite paginazione è necessario inserire il data-element="pager-link" in tutti i link <a> per cambiare pagina, incluso quello per caricare i link successivi.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<nav class="pagination-wrapper">
    <ul class="pagination">
        <li class="page-item">
            <a aria-label="Vai alla pagina 1" class="page-link" data-element="pager-link" href="#">
                1
            </a>
        </li>
        <li class="page-item">
            <a aria-label="Vai alla pagina 2" class="page-link" data-element="pager-link" href="#"></a>
                2
            </a>
        </li>
        . . .
        <li class="page-item">
            <a class="page-link" data-element="pager-link" href="#">
                <span>Pagina successiva</span>
            </a>
        </li>
    </ul>
 </nav>

La paginazione dei servizi può essere fatta anche su una pagina dedicata, diversa dalla pagina di primo livello «Servizi». In questo caso la pagina di primo livello «Servizi» deve avere un link con data-element="pager-link" che punta alla pagina con i link ai servizi.

La mancata individuazione di almeno un link attraverso il data-element="service-link" porta all’impossibilità di esecuzione dell’audit.

Controllo della presenza e ordine delle voci nelle “Schede servizio”:

Per le pagine di terzo livello di servizi è necessaria la presenza del data-element="page-index" nell’indice della pagina identificato dal tag <ul>. Da questo indice vengono caricate le voci che si trovano dentro i tag <a> di ogni riga dell’indice indicata dal tag <li>. Le voci per le quali viene controllata la presenza nell’indice e il loro ordinamento sono:

  • «A chi è rivolto»
  • «Come fare»
  • «Cosa serve»
  • «Cosa si ottiene»
  • «Tempi e scadenze»
  • «Accedi al servizio»,
  • «Condizioni di servizio»
  • «Contatti»

Per queste voci viene anche controllata la presenza di contenuto nella relativa sezione in pagina. Se la sezione non viene individuata la relativa voce risulterà mancante nella reportistica. In particolare:

  • «A chi è rivolto»: viene controllata la presenza di un tag <p> contenuto nel <div> con data-element="service-addressed" e che questo abbia almeno 3 caratteri;
  • «Come fare»: viene controllata la presenza di un tag <p> contenuto nel <div> con data-element="service-how-to" e che questo abbia almeno 3 caratteri;
  • «Cosa serve»: viene controllata la presenza di un tag <p> contenuto nel <div> con data-element="service-needed" e che questo abbia almeno 3 caratteri;
  • «Cosa si ottiene»: viene controllata la presenza di un tag <p> contenuto nel <div> con data-element="service-achieved" e che questo abbia almeno 3 caratteri;
  • «Tempi e scadenze»: per confermare la presenza in pagina della relativa sezione è sufficiente sia presente uno di questi 2 componenti: «Testo»(è necessario un <p> contenuto nel <div> con data-element=»service-calendar-text» e che questo abbia almeno 3 caratteri in un testo al di fuori del componente calendario) e/o «Calendario» (un componente calendario contenuto in un tag <div> con data-element=»service-calendar-list»);
  • «Accedi al servizio»: per confermare la presenza in pagina della relativa sezione è sufficiente sia presente uno di questi 3 componenti: «Prenota appuntamento» (un tag <button> con data-element="service-booking-access" per il bottone che porta alla pagina di prenotazione appuntamenti), «Accesso online» (un tag <button> con data-element="service-online-access" per il bottone che porta alla pagina di accesso online) e/o «Accesso generico» (un tag HTML con data-element="service-generic-access" per un componente diverso da quelli sopra identificati);
  • «Condizioni di servizio»: viene controllata la presenza di un tag <a> con data-element="service-file";
  • «Contatti»: viene controllata la presenza di un tag <div> con data-element="service-area" che identifica i contatti.

Viene inoltre controllata la presenza di altri componenti al di fuori dell’indice:

  • «Categoria del servizio»: viene controllata la presenza di un tag HTML con data-element="breadcrumb" che identifica la breadcrumb. In questo componente vengono individuati i testi relativi ai vari <li> e viene controllata la presenza di almeno 3 caratteri nel testo successivo a «Servizi»;
  • «Titolo»: viene controllata la presenza di un tag HTML con data-element="service-title" che identifica il titolo del servizio e che questo abbia almeno 3 caratteri;
  • «Stato»: viene controllata la presenza di un tag HTML con data-element="service-status" che identifica lo stato del servizio;
  • «Descrizione breve»: viene controllata la presenza di un tag HTML con data-element="service-description" che identifica la descrizione del servizio e che questo abbia almeno 3 caratteri;
  • «Unità organizzativa responsabile»: viene controllata la presenza di un tag HTML con data-element="service-area" che identifica l’area responsabile del servizio e che questo abbia almeno 3 caratteri;
  • «Argomenti»: viene controllata la presenza di almeno un tag <a> con data-element="service-topic" che identificano gli argomenti del servizio (es. Turismo).

Esempio:

(pagina di terzo livello “Scheda servizio”)
. . .
<ul data-element="page-index">
   <li><a href="#who-needs"><span>A chi è rivolto</span></a></li>
   <li><a href="#description"><span>Descrizione</span></a></li>
   <li><a href="#how-to"><span>Come fare</span></a></li>
   <li><a href="#needed"><span>Cosa serve</span></a></li>
   <li><a href="#obtain"><span>Cosa si ottiene</span></a></li>
   <li><a href="#deadlines"><span>Tempi e scadenze</span></a></li>
   <li><a href="#costs"><span>Quanto costa</span></a></li>
   <li><a href="#submit-request"><span>Accedi al servizio</span></a></li>
   <li><a href="#more-info"><span>Ulteriori informazioni</span></a></li>
   <li><a href="#conditions"><span>Condizioni di servizio</span></a></li>
   <li><a href="#contacts"><span>Contatti</span></a></li>
</ul>
. . .
<script type="application/ld+json" data-element="metatag"></script>
. . .
<nav>
   <ol data-element="breadcrumb">
       <li><a href="#"><span>Home</span></a></li>
       <li><a href="#"><span>Servizi</span></a></li>
       <li><a href="#"><span>Categoria servizio</span></a></li>
       <li><a><span>Titolo servizio</span></a></li>
   </ol>
</nav>
. . .
<div>
   <h1 data-element="service-title">Titolo del servizio</h1>
   <ul><li>
      <div data-element="service-status"><span>Servizio non attivo</span></div>
   </li></ul>
   <p data-element="service-description">Biglietti di Natale per tutti </p>
</div>
. . .
<section>
   <h2>A chi è rivolto</h2>
   <div data-element="service-addressed"><p>. . .</p></div>
</section>
<section>
   <h2>Descrizione</h2>
</section>
<section>
   <h2>Come fare</h2>
   <div data-element="service-how-to"><p>. . .</p></div>
</section>
<section>
   <h2>Cosa serve</h2>
   <div data-element="service-needed"><p>. . .</p></div>
</section>
<section>
   <h2>Cosa si ottiene</h2>
   <div data-element="service-achieved"><p>. . .</p></div>
</section>
<section>
   <div>
       <h2>Tempi e scadenze</h2>
       <div data-element="service-calendar-text"><p>. . .</p></div>
       <div class="calendar-vertical data-element="service-calendar-list">
          . . .
       </div>
   </div>
</section>
<section>
   <h2>Quanto costa</h2>
   <div data-element="service-cost"><p>. . .</p></div>
</section>
<section>
   <h2>Accedi al servizio</h2>
   <p data-element="service-generic-access">. . .</p>
   <button type="button" onclick="location.href='#';"
           data-element="service-booking-access">
       <span class="">Prenota appuntamento</span>
   </button>
</section>
. . .
<section >
   <h2>Condizioni di servizio</h2>
   <div><a href="#" data-element="service-file">. . .</a></div>
</section>
. . .
<section>
   <h2>Contatti</h2>
   <div><p>
           <a href="#" data-element="service-area">Unità organizzativa</a>
       </p>
       <div class="card-text"><p>. . .</p></div>
   </div>
   <span>Argomenti:</span>
   <ul><li>
           <a href="#" data-element="service-topic"><span>Turismo</span></a>
   </li></ul>
</section>
. . .
<div>
   <h2>Contatta il comune</h2>
   <ul>
       <li><a href="#"><span>Leggi le domande frequenti</span></a></li>
       <li><a href="#" data-element="contacts">. . .</a></li>
       <li><a><span>Numero verde</span></a></li>
       <li><a href="#" data-element="appointment-booking">
               <span>Prenota appuntamento</span>
           </a>
       </li>
   </ul>
</div>

Nota

Le voci controllate in questo criterio sono case sensitive, cioè devono coincidere anche nella distinzione tra maiuscole e minuscole.

Criterio C.SI.1.4 - Utilizzo di temi per CMS (Content Management System)

Condizioni di successo: per superare il test effettuato dall’app, se è in uso il tema CMS del modello per i Comuni, la versione utilizzata è uguale o superiore alla 1.0. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: viene verificato l’uso del tema CMS del modello e la versione in uso ricercando uno specifico testo all’interno di tutti i file .CSS presenti in pagina.

Il testo ricercato nei file .css è:

/*!
Theme Name: [nome_tema]
Author: [nome_autore]
Description: Design Comuni Italia [testo_descrizione_tema che deve contenere la parola “WordPress” o “Drupal”]
Version: [numero_versione]
License: [nome_licenza]
Text Domain: design_comuni_italia
*/

Nota

Qualora il test non dovesse identificare correttamente il tema CMS e la versione in uso, riprova la verifica disabilitando il post processing del CSS (minificazione o inlining).

Criterio C.SI.1.5 - Vocabolari controllati

Condizioni di successo: per superare il test effettuato dall’app, gli argomenti utilizzati appartengono alla lista indicata all’interno del documento di architettura dell’informazione del modello Comuni alla voce «Tassonomia argomenti» o al vocabolario controllato EuroVoc ed è presente un link in homepage (chiamato ad esempio, «Tutti gli argomenti») che porta a una pagina con l’elenco completo degli argomenti. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: gli argomenti identificati all’interno della pagina contenente l’elenco degli argomenti vengono confrontati con l’elenco di voci presente nel documento di architettura dell’informazione e con il vocabolario controllato EuroVoc, ricercandoli usando specifici attributi «data-element».

Requisiti tecnici: In homepage, all’interno di un tag <a>, deve esserci l’attributo data-element="all-topics" che riporta alla pagina template-argomenti.html. In template-argomenti deve esserci una lista di argomenti (tag <a>) con l’attributo data-element="topic-element" che contengono del testo con il nome dell’argomento.

Esempi:

<a href=»/template-argomenti.html»
  <span> Tutti gli argomenti</span>
</a>

<a href="#" data-element="topic-element"><h3>Animale domestico</h3></a>

Criterio C.SI.1.6 - Voci di menù di primo livello

Condizioni di successo: per superare il test effettuato dall’app, le voci del menù di primo livello del sito sono esattamente quelle indicate nel documento di architettura dell’informazione e sono nell’ordine indicato (ovvero «Amministrazione», «Novità», «Servizi», «Vivere il Comune» oppure «Vivere [nome del Comune]») e tutte le pagine raggiungibili dal menu di primo livello portano a pagine interne al dominio del Comune. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando uno specifico attributo data-element, vengono identificate le voci presenti nel menù del sito e il loro ordine, confrontandole con quanto indicato nella Documentazione del modello Comuni.

Viene verificata la presenza e la sequenzialità delle seguenti voci:

  • Amministrazione
  • Novità
  • Servizi
  • Vivere il Comune o Vivere {nome_Comune}

Inoltre, viene verificato che tutte le pagine raggiungibili dal menu di primo livello portino a pagine interne al dominio del Comune.

Requisiti tecnici: In template-homepage deve esserci un <ul> con l’attributo data-element=”main-navigation” che contenga degli <li> e degli <a> in cui ci sono le label (può contenere altri tag).

Esempio:

<ul data-element="main-navigation">
  <li>
    <a>
      <span>Amministrazione</span>
    </a>
  </li>

Criterio C.SI.1.7 - Titoli delle pagine di secondo livello

Condizioni di successo: per superare il test effettuato dall’app, i titoli delle pagine di secondo livello corrispondono a quelli indicati nel capitolo «Conformità al modello Comuni» della Documentazione del Modello Comuni. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando specifici attributi data-element, viene verificato che i titoli delle card usate per rimandare alle pagine di secondo livello siano corretti e presenti sulle rispettive pagine genitore di primo livello. Nel caso della pagina di primo livello «Vivere il Comune», viene verificato che i titoli delle pagine di secondo livello raggiungibili da questa siano corretti. Nel conteggio vengono incluse anche le pagine di secondo livello raggiungibili da pagine di primo livello non indicate nella documentazione.

I titoli che vengono verificati sono:

  • Per la sezione Amministrazione, “Organi di governo”, “Aree amministrative”, “Uffici”, “Enti e fondazioni”, “Politici”, “Personale amministrativo”, “Documenti e dati”;
  • Per la sezione Novità, “Notizie”, “Comunicati”, “Avvisi”
  • Per la sezione Servizi, “Educazione e formazione”, “Salute, benessere e assistenza”, “Vita lavorativa”, “Mobilità e trasporti”, “Catasto e urbanistica”, “Anagrafe e stato civile”, “Turismo”, “Giustizia e sicurezza pubblica”, “Tributi, finanze e contravvenzioni”, “Cultura e tempo libero”, “Ambiente”, “Imprese e commercio”, “Autorizzazioni”, “Appalti pubblici”, “Agricoltura e pesca”;
  • Per la sezione Vivere il Comune o Vivere {nome_comune}, “Luoghi”, “Eventi”.

Requisiti tecnici:

Caricamento pagine primo livello:

In homepage, per poter identificare i link alle pagine di primo livello, nel menù principale identificato dal tag <div class=»navbar»> i link alle pagine di primo livello devono contenere all’interno del tag <a class=»nav-link»> i seguenti attributi:

  • «Amministrazione»: data-element="management"
  • «Novità»: data-element="news"
  • «Servizi»: data-element="all-services"
  • «Vivere il Comune»: data-element="live"
  • Eventuali voci aggiuntive: data-element=”custom-submenu”

L’assenza di uno dei data-element (ad eccezione di quelli relativi a eventuali voci aggiuntive) porta all’impossibilità di esecuzione dell’audit in quanto non sarà possibile recuperare il link.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>

Caricamento voci di secondo livello:

  • «Amministrazione»: nella pagina di primo livello, le card sotto la voce “Categoria” dovranno contenere un tag <a> con data-element=”management-category-link” dal quale verrà prelevato il testo. La mancata individuazione di almeno una voce attraverso questo data-element porta all’impossibilità di esecuzione dell’audit;
  • «Novità»: nella pagina di primo livello, le card sotto la voce “Categoria” dovranno contenere un tag <a> con data-element=”news-category-link” dal quale verrà prelevato il testo. La mancata individuazione di almeno una voce attraverso questo data-element porta all’impossibilità di esecuzione dell’audit;
  • «Servizi»: nella pagina di primo livello, le card sotto la voce “Categoria” dovranno contenere un tag <a> con data-element=”service-category-link” dal quale verrà prelevato il testo. La mancata individuazione di almeno una voce attraverso questo data-element porta all’impossibilità di esecuzione dell’audit;
  • «Vivere il Comune»: la pagina di primo livello dovrà contenere due bottoni. Il bottone che porta alla pagina di secondo livello «Eventi» dovrà contenere data-element="live-button-events" e il bottone che porta alla pagina di secondo livello «Luoghi» dovrà contenere data-element="live-button-locations". Per entrambi i bottoni il data-element dovrà essere posizionato sul tag <button> e il link alla pagina di secondo livello dovrà essere presente o all’interno dell’attributo «onclick» o all’interno di un attributo «href». In queste pagine di secondo livello dovrà essere presente un tag HTML con data-element=”page-name” che identifica il titolo della pagina. La mancata individuazione di almeno una voce attraverso questo data-element porta all’impossibilità di esecuzione dell’audit;
  • Eventuali voci aggiuntive: nel caso il sito avesse voci di menù di primo livello aggiuntive esse dovranno contenere il data-element=”custom-submenu”. In queste pagine è necessario inserire il data-element=”custom-category-link” per le card sotto la voce “Categoria”.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>


(pagina primo livello “Amministrazione”)
. . .
<div class="card-body">
   <a href="#" data-element="management-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Novità”)
. . .
<div class="card-body">
   <a href="#" data-element="news-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <a href="#" data-element="service-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Vivere il Comune”)
. . .
<button type="button" data-element="live-button-events" onclick="location.href='#';">
   <span class="">Tutti gli eventi</span>
</button>
. . .
<button type="button" data-element="live-button-locations" onclick="location.href='#';">
   <span class="">Tutti i luoghi</span>
</button>


(pagina secondo livello “Eventi”)
. . .
<h1 data-element="page-name">Eventi</h1>


(pagina secondo livello “Luoghi”)
. . .
<h1 data-element="page-name">Luoghi</h1>
. . .

Criterio C.SI.2.1 - Prenotazione appuntamenti

Condizioni di successo: per superare il test effettuato dall’app, la funzionalità di prenotazione di un appuntamento è accessibile dalla sezione di funzionalità trasversali delle schede servizio e della pagina di primo livello «Servizi», permette al cittadino di indicare/fornire le informazioni richieste, e, se è presente il pulsante di Prenotazione appuntamento come modalità di accesso al servizio all’interno di una scheda servizio, la funzionalità circoscrive la scelta degli uffici disponibili a quelli competenti per il servizio selezionato e la funzionalità indica come argomento pre-selezionato il titolo del servizio. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando specifici attributi «data-element», viene verificata la presenza del componente «Prenota appuntamento» all’interno della sezione di funzionalità trasversali delle schede servizio analizzate e della pagina di primo livello «Servizi». Viene inoltre indicato se è stato rilevato il pulsante di accesso alla funzionalità di prenotazione appuntamento all’interno della sezione «Accedi al servizio» delle schede servizio. La verifica viene eseguita sulla pagina di primo livello “Servizi” e su N pagine di terzo livello “Scheda servizio”.

Requisiti tecnici:

Caricamento pagina primo livello:

In homepage, per poter identificare il link alla pagina di primo livello «Servizi», nel menù principale identificato dal tag <div class=»navbar»> il link alla pagina deve contenere, all’interno del tag <a class=»nav-link»>, il data-element="all-services".

L’assenza del data-element porta all’impossibilità di esecuzione dell’audit in quanto non sarà possibile recuperare il link.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>

Caricamento pagine di terzo livello «Scheda servizio»:

Per il caricamento di queste pagine di terzo livello è necessario che il data-element alla pagina di primo livello «Servizi» sia correttamente posizionato all’interno del link della pagina di primo livello nel menù principale.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di terzo livello “Scheda servizio”. Se nella pagina è presente un bottone che permette di caricare altri link ai servizi attraverso una chiamata AJAX esso dovrà contenere il data-element="load-other-cards".

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<button type="button" onclick="handleOnClick(`script`)" data-element="load-other-cards" >
   <span class="">Carica altri risultati</span>
</button>

Se invece i link ai servizi sono organizzati tramite paginazione è necessario inserire il data-element="pager-link" in tutti i link <a> per cambiare pagina, incluso quello per caricare i link successivi.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<nav class="pagination-wrapper">
    <ul class="pagination">
        <li class="page-item">
            <a aria-label="Vai alla pagina 1" class="page-link" data-element="pager-link" href="#">
                1
            </a>
        </li>
        <li class="page-item">
            <a aria-label="Vai alla pagina 2" class="page-link" data-element="pager-link" href="#"></a>
                2
            </a>
        </li>
        . . .
        <li class="page-item">
            <a class="page-link" data-element="pager-link" href="#">
                <span>Pagina successiva</span>
            </a>
        </li>
    </ul>
 </nav>

La paginazione dei servizi può essere fatta anche su una pagina dedicata, diversa dalla pagina di primo livello «Servizi». In questo caso la pagina di primo livello «Servizi» deve avere un link con data-element="pager-link" che punta alla pagina con i link ai servizi.

La mancata individuazione di almeno un link attraverso il data-element="service-link" porta all’impossibilità di esecuzione dell’audit.

Controllo presenza prenotazione appuntamenti:

Nella pagina di primo livello “Servizi”, identificata grazie al data-element="all-services", dovrà contenere un tag <a> con data-element="appointment-booking".

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagine primo livello “Servizi”)
. . .
<li>
   <a href="#" data-element="appointment-booking"></a>
</li>
. . .

Ogni “Scheda servizio”, identificata dal data-element="service-link", dovrà contenere un tag <a> con data-element="appointment-booking" e in aggiunta può contenere un bottone con data-element="service-booking-access".

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagine primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>


(pagina di terzo livello “Scheda servizio”)
. . .
<li>
   <a href="#" data-element="appointment-booking"></a>
</li>
. . .
<button type="button" onclick="location.href='#';" data-element="service-booking-access">
   <span class="">Prenota appuntamento</span>
</button>
. . .

Criterio C.SI.2.2 - Richiesta di assistenza / contatti

Condizioni di successo: per superare il test effettuato dall’app, i contatti dell’ufficio preposto all’erogazione del servizio sono presenti in tutte le schede servizio. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando specifici attributi data-element, viene verificata la presenza della voce «Contatti» all’interno dell’indice e nel corpo della pagina delle schede servizio analizzate, ricercando specifici attributi «data-element». La verifica viene eseguita su N pagine di primo livello “Scheda servizio”.

Requisiti tecnici:

Caricamento pagine di terzo livello «Scheda servizio»:

Per il caricamento di queste pagine di terzo livello è necessario che il data-element alla pagina di primo livello «Servizi» sia correttamente posizionato all’interno del link della pagina di primo livello nel menù principale.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di terzo livello “Scheda servizio”. Se nella pagina è presente un bottone che permette di caricare altri link ai servizi attraverso una chiamata AJAX esso dovrà contenere il data-element="load-other-cards".

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<button type="button" onclick="handleOnClick(`script`)" data-element="load-other-cards" >
   <span class="">Carica altri risultati</span>
</button>

Se invece i link ai servizi sono organizzati tramite paginazione è necessario inserire il data-element="pager-link" in tutti i link <a> per cambiare pagina, incluso quello per caricare i link successivi.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<nav class="pagination-wrapper">
    <ul class="pagination">
        <li class="page-item">
            <a aria-label="Vai alla pagina 1" class="page-link" data-element="pager-link" href="#">
                1
            </a>
        </li>
        <li class="page-item">
            <a aria-label="Vai alla pagina 2" class="page-link" data-element="pager-link" href="#"></a>
                2
            </a>
        </li>
        . . .
        <li class="page-item">
            <a class="page-link" data-element="pager-link" href="#">
                <span>Pagina successiva</span>
            </a>
        </li>
    </ul>
 </nav>

La paginazione dei servizi può essere fatta anche su una pagina dedicata, diversa dalla pagina di primo livello «Servizi». In questo caso la pagina di primo livello «Servizi» deve avere un link con data-element="pager-link" che punta alla pagina con i link ai servizi.

La mancata individuazione di almeno un link attraverso il data-element="service-link" porta all’impossibilità di esecuzione dell’audit.

Controllo sui contatti:

All’interno della pagina di terzo livello “Scheda servizio” deve esserci tag <ul> con data-element="page-index" contenente altri tags <li> con la label “Contatti”. All’interno della pagina la sezione che identifica i contatti deve contenere un componente che abbia l’attributo data-element=”service-area”.

Esempio:

(pagina di terzo livello “Scheda servizio”)
. . .
<ul data-element="page-index">
. . .
  <li>
    <a>
      <span>Contatti</span>
    </a>
  </li>
. . .
<div>
   <p class="card-title">
       <a href="#" data-element="service-area">Unità organizzativa</a></p>
   <div class="card-text">
       <p>. . .</p>       
   </div>
</div>

Criterio C.SI.2.3 - Richiesta di assistenza / domande frequenti

Condizioni di successo: per superare il test effettuato dall’app, nel footer del sito è presente un link contenente le espressioni «FAQ» oppure «domande frequenti» che invia a una pagina che contiene le domande frequenti. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: tramite ricerca di uno specifico attributo data-element, viene verificata la presenza del link nel footer dell’homepage che invii ad una pagina esistente e che il testo del link contenga almeno una delle espressioni richieste, senza fare distinzione tra caratteri minuscoli o maiuscoli.

Requisiti tecnici: All’interno del footer della pagina (tag <footer>) deve esserci un tag <a> che contiene l’href alla sezione FAQ. Il tag <a> deve avere l’attributo data-element="faq". (L’<a> può essere contenuto in altri tag, esempio <li>)

Esempio:

<a href="#" data-element="faq">Leggi le FAQ</a>

Criterio C.SI.2.4 - Segnalazione disservizio

Condizioni di successo: per superare il test effettuato dall’app, nel footer del sito è presente un link contenente le espressioni «disservizio» oppure «segnala disservizio» oppure «segnalazione disservizio» che permette di segnalare un disservizio tramite email o funzionalità dedicato. Se viene usata una funzionalità dedicata di segnalazione disservizio, devono essere presenti i campi richiesti nella Documentazione del modello. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando uno specifico attributo data-element, viene verificata la presenza del link nel footer dell’homepage che invii ad una pagina esistente e che il testo del link contenga almeno una delle espressioni richieste, senza fare distinzione tra caratteri minuscoli o maiuscoli.

Requisiti tecnici: All’interno del footer della pagina (tag <footer>) deve esserci un tag <a> che contiene l’href alla Segnalazione disservizio. Il tag <a> deve avere l’attributo data-element="report-inefficiency". (L’<a> può essere contenuto in altri tag, esempio <li>)

Esempio:

<a href="#" data-element="report-inefficiency">Segnalazione disservizio</a>

Criterio C.SI.2.5 - Valutazione dell’esperienza d’uso, chiarezza delle pagine informative

Condizioni di successo: per superare il test effettuato dall’app, la funzionalità per valutare la chiarezza informativa è presente su tutte le pagine di primo e secondo livello del sito e rispetta tutte le caratteristiche e i passaggi richiesti. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando specifici attributi data-element, viene verificata la presenza del componente di valutazione nelle pagine di primo e di secondo livello, controllando che la funzionalità abbia le caratteristiche richieste nella documentazione. La verifica viene eseguita su N pagine di primo livello e su N pagine di secondo livello.

Requisiti tecnici:

Caricamento pagine primo livello:

In homepage, per poter identificare i link alle pagine di primo livello, nel menù principale identificato dal tag <div class=»navbar»> i link alle pagine di primo livello devono contenere all’interno del tag <a class=»nav-link»> i seguenti attributi:

  • «Amministrazione»: data-element=»management»
  • «Novità»: data-element=»news»
  • «Servizi»: data-element=»all-services»
  • «Vivere il Comune»: data-element=»live»
  • Eventuali voci aggiuntive: data-element=”custom-submenu”

L’assenza di uno dei data-element (ad eccezione di quelli relativi a eventuali voci aggiuntive) porta all’impossibilità di esecuzione dell’audit in quanto non sarà possibile recuperare il link.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>

Caricamento pagine di secondo livello:

Per il caricamento delle pagine di secondo livello è necessario che i data-element alle pagine di primo livello siano correttamente posizionati all’interno dei link delle pagine di primo livello nel menù principale.

La pagina di primo livello «Amministrazione», identificata grazie al data-element="management", dovrà contenere il data-element="management-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Novità», identificata grazie al data-element="news", dovrà contenere il data-element="news-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Vivere il comune», identificata grazie al data-element="live", dovrà contenere due bottoni. Il bottone che porta alla pagina di secondo livello «Eventi» dovrà contenere data-element="live-button-events" e il bottone che porta alla pagina di secondo livello «Luoghi» dovrà contenere data-element="live-button-locations". Per entrambi i bottoni il data-element dovrà essere posizionato sul tag <button> e il link alla pagina di secondo livello dovrà essere presente o all’interno dell’attributo «onclick» o all’interno di un attributo «href». La mancata individuazione di almeno un link attraverso questi data-element porta all’impossibilità di esecuzione dell’audit.

Nel caso fossero presenti delle voci aggiuntive di primo livello esse vengono identificate attraverso il data-element=”custom-submenu”. In ognuna di queste pagine è necessaria la presenza del data-element=”custom-category-link” all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>


(pagina primo livello “Amministrazione”)
. . .
<div class="card-body">
   <a href="#" data-element="management-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Novità”)
. . .
<div class="card-body">
   <a href="#" data-element="news-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <a href="#" data-element="service-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Vivere il Comune”)
. . .
<button type="button" data-element="live-button-events" onclick="location.href='#';">
   <span class="">Tutti gli eventi</span>
</button>
. . .
<button type="button" data-element="live-button-locations" onclick="location.href='#';">
   <span class="">Tutti i luoghi</span>
</button>

Controllo componente di valutazione:

All’interno delle pagine di primo e secondo livello verrà analizzato il componente che contiene l’attributo data-element=”feedback”. La presenza di questo componente è obbligatoria per il risultato positivo di questo audit.

Di questo componente con data-element=”feedback” vengono analizzate le sue parti:

  • Domanda iniziale: individuato attraverso l’attributo data-element=”feedback-title”. Questo è da inserire all’interno dell’<h2> che contiene la domanda iniziale;
  • Scala di valutazione: individuati attraverso l’attributo data-element=”feedback-rate-{N}” nella <label> del input. {N} viene sostituito con il valore di quel input. (es: data-element= “feedback-rate-1”, associato al valore minimo “1”);
  • Componente di follow up positivo: questo componente comprende tutte le parti per permettere all’utente di fornire un feedback positivo. Esso viene individuato attraverso l’attributo data-element=”feedback-rating-positive” nel <fieldset> che contiene domanda e risposte. Per la domanda viene inserito l’attributo data-element=”feedback-rating-question” nella <legend> contente la domanda. Per le risposte viene inserito l’attributo data-element=”feedback-rating-answer” nella <label> contenente ogni risposta.
  • Componente di follow up negativo: questo componente comprende tutte le parti per permettere all’utente di fornire un feedback negativo. Esso viene individuato attraverso l’attributo data-element=”feedback-rating-negative” nel <fieldset> che contiene domanda e risposte. Per la domanda viene inserito l’attributo data-element=”feedback-rating-question” nella <legend> contente la domanda. Per le risposte viene inserito l’attributo data-element=”feedback-rating-answer” nella <label> contenente ogni risposta;
  • Campo di testo libero: individuato attraverso l’attributo data-element=”feedback-input-text” dentro <input> della casella di testo per fornire una risposta libera alla fine del feedback.

Esempio:

<div data-element="feedback">
   . . .
   <h2 data-element="feedback-title">
       Quanto sono chiare le informazioni su questa pagina?
   </h2>
   <fieldset>
       <input type="radio" value="5">
       <label data-element="feedback-rate-5">
           <span>Valuta 5 stelle su 5</span>
       </label>
       <input type="radio" value="4">
       <label data-element="feedback-rate-4">
           <span>Valuta 4 stelle su 5</span>
       </label>
       <input type="radio" value="3">
       <label data-element="feedback-rate-3">
           <span>Valuta 3 stelle su 5</span>
       </label>
       <input type="radio" value="2">
       <label data-element="feedback-rate-2">
           <span>Valuta 2 stelle su 5</span>
       </label>
       <input type="radio" value="1">
       <label data-element="feedback-rate-1">
           <span>Valuta 1 stelle su 5</span>
       </label>
   </fieldset>
   . . .
   <fieldset data-element="feedback-rating-positive">
       <h3><legend data-element="feedback-rating-question">
           Quali sono stati gli aspetti che hai preferito?
       </legend></h3>
       <label data-element="feedback-rating-answer">
           Le indicazioni erano chiare
       </label>
       <label data-element="feedback-rating-answer">
           Le indicazioni erano complete
       </label>
       <label data-element="feedback-rating-answer">
           Capivo sempre che stavo procedendo correttamente
       </label>
       <label data-element="feedback-rating-answer">
           Non ho avuto problemi tecnici
       </label>
       <label data-element="feedback-rating-answer">
           Altro
       </label>
   </fieldset>
   . . .
   <fieldset data-element="feedback-rating-negative">
       <h3><legend data-element="feedback-rating-question">
           Dove hai incontrato le maggiori difficoltà?
       </legend></h3>
       <label data-element="feedback-rating-answer">
           A volte le indicazioni non erano chiare
       </label>
       <label data-element="feedback-rating-answer">
           A volte le indicazioni non erano complete
       </label>
       <label data-element="feedback-rating-answer">
           A volte non capivo se stavo procedendo correttamente
       </label>
       <label data-element="feedback-rating-answer">
           Ho avuto problemi tecnici
       </label>
       <label data-element="feedback-rating-answer">
           Altro</label>
   </fieldset>
   . . .
   <fieldset>
       <h3><legend class="d-block d-lg-inline">
           Vuoi aggiungere altri dettagli?
       </legend></h3>
       <label>Dettaglio</label>
       <input type="text" data-element="feedback-input-text">
   </fieldset>
</div>

Criterio C.SI.2.6 - Valutazione dell’esperienza d’uso, chiarezza informativa della scheda di servizio

Condizioni di successo: per superare il test effettuato dall’app, la funzionalità per valutare la chiarezza informativa è presente su tutte le schede servizio e rispetta tutte le caratteristiche e passaggi richiesti. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando specifici attributi data-element, viene verificata la presenza del componente di valutazione all’interno delle schede servizio, controllando che la funzionalità abbia le caratteristiche richieste nella documentazione. La verifica viene eseguita su N pagine di terzo livello “Scheda servizio”.

Requisiti tecnici:

Caricamento pagine di terzo livello «Scheda servizio»:

Per il caricamento di queste pagine di terzo livello è necessario che il data-element alla pagina di primo livello «Servizi» sia correttamente posizionato all’interno del link alla pagina di primo livello nel menù principale.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di terzo livello “Scheda servizio». Se nella pagina è presente un bottone che permette di caricare altri link ai servizi attraverso una chiamata AJAX esso dovrà contenere il data-element="load-other-cards".

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<button type="button" onclick="handleOnClick(`script`)" data-element="load-other-cards" >
   <span class="">Carica altri risultati</span>
</button>

Se invece i link ai servizi sono organizzati tramite paginazione è necessario inserire il data-element="pager-link" in tutti i link <a> per cambiare pagina, incluso quello per caricare i link successivi.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<nav class="pagination-wrapper">
    <ul class="pagination">
        <li class="page-item">
            <a aria-label="Vai alla pagina 1" class="page-link" data-element="pager-link" href="#">
                1
            </a>
        </li>
        <li class="page-item">
            <a aria-label="Vai alla pagina 2" class="page-link" data-element="pager-link" href="#"></a>
                2
            </a>
        </li>
        . . .
        <li class="page-item">
            <a class="page-link" data-element="pager-link" href="#">
                <span>Pagina successiva</span>
            </a>
        </li>
    </ul>
 </nav>

La paginazione dei servizi può essere fatta anche su una pagina dedicata, diversa dalla pagina di primo livello «Servizi». In questo caso la pagina di primo livello «Servizi» deve avere un link con data-element="pager-link" che punta alla pagina con i link ai servizi.

La mancata individuazione di almeno un link attraverso il data-element="service-link" porta all’impossibilità di esecuzione dell’audit.

Controllo componente di valutazione:

All’interno delle pagine di primo e secondo livello verrà analizzato il componente che contiene l’attributo data-element=”feedback”. La presenza di questo componente è obbligatoria per il risultato positivo di questo audit.

Di questo componente con data-element=”feedback” vengono analizzate le sue parti:

  • Domanda iniziale: individuato attraverso l’attributo data-element=”feedback-title”. Questo è da inserire all’interno dell’<h2> che contiene la domanda iniziale.
  • Scala di valutazione: individuati attraverso l’attributo data-element=”feedback-rate-{N}” nella <label> del input. {N} viene sostituito con il valore di quel input. (es: data-element= “feedback-rate-1”, associato al valore “1”);
  • Componente di follow up positivo: questo componente comprende tutte le parti per permettere all’utente di fornire un feedback positivo. Esso viene individuato attraverso l’attributo data-element=”feedback-rating-positive” nel <fieldset> che contiene domanda e risposte. Per la domanda viene inserito l’attributo data-element=”feedback-rating-question” nella <legend> contente la domanda. Per le risposte viene inserito l’attributo data-element=”feedback-rating-answer” nella <label> contenente ogni risposta;
  • Componente di follow up negativo: questo componente comprende tutte le parti per permettere all’utente di fornire un feedback negativo. Esso viene individuato attraverso l’attributo data-element=”feedback-rating-negative” nel <fieldset> che contiene domanda e risposte. Per la domanda viene inserito l’attributo data-element=”feedback-rating-question” nella <legend> contente la domanda. Per le risposte viene inserito l’attributo data-element=”feedback-rating-answer” nella <label> contenente ogni risposta;
  • Campo di testo libero: individuato attraverso l’attributo data-element=”feedback-input-text” dentro <input> della casella di testo per fornire una risposta libera alla fine del feedback.

Esempio:

<div data-element="feedback">
   . . .
   <h2 data-element="feedback-title">
       Quanto sono chiare le informazioni su questa pagina?
   </h2>
   <fieldset>
       <input type="radio" value="5">
       <label data-element="feedback-rate-5">
           <span>Valuta 5 stelle su 5</span>
       </label>
       <input type="radio" value="4">
       <label data-element="feedback-rate-4">
           <span>Valuta 4 stelle su 5</span>
       </label>
       <input type="radio" value="3">
       <label data-element="feedback-rate-3">
           <span>Valuta 3 stelle su 5</span>
       </label>
       <input type="radio" value="2">
       <label data-element="feedback-rate-2">
           <span>Valuta 2 stelle su 5</span>
       </label>
       <input type="radio" value="1">
       <label data-element="feedback-rate-1">
           <span>Valuta 1 stelle su 5</span>
       </label>
   </fieldset>
   . . .
   <fieldset data-element="feedback-rating-positive">
       <h3><legend data-element="feedback-rating-question">
           Quali sono stati gli aspetti che hai preferito?
       </legend></h3>
       <label data-element="feedback-rating-answer">
           Le indicazioni erano chiare
       </label>
       <label data-element="feedback-rating-answer">
           Le indicazioni erano complete
       </label>
       <label data-element="feedback-rating-answer">
           Capivo sempre che stavo procedendo correttamente
       </label>
       <label data-element="feedback-rating-answer">
           Non ho avuto problemi tecnici
       </label>
       <label data-element="feedback-rating-answer">
           Altro
       </label>
   </fieldset>
   . . .
   <fieldset data-element="feedback-rating-negative">
       <h3><legend data-element="feedback-rating-question">
           Dove hai incontrato le maggiori difficoltà?
       </legend></h3>
       <label data-element="feedback-rating-answer">
           A volte le indicazioni non erano chiare
       </label>
       <label data-element="feedback-rating-answer">
           A volte le indicazioni non erano complete
       </label>
       <label data-element="feedback-rating-answer">
           A volte non capivo se stavo procedendo correttamente
       </label>
       <label data-element="feedback-rating-answer">
           Ho avuto problemi tecnici
       </label>
       <label data-element="feedback-rating-answer">
           Altro</label>
   </fieldset>
   . . .
   <fieldset>
       <h3><legend class="d-block d-lg-inline">
           Vuoi aggiungere altri dettagli?
       </legend></h3>
       <label>Dettaglio</label>
       <input type="text" data-element="feedback-input-text">
   </fieldset>
</div>

Criterio C.SI.3.2 - Dichiarazione di accessibilità

Condizioni di successo: per superare il test effettuato dall’app, il sito presenta una voce nel footer che riporta a una dichiarazione di accessibilità AgID valida per il sito. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando uno specifico attributo data-element, viene verificata la presenza di un link nel footer dell’homepage che riporti a una pagina esistente, che l’url della pagina di destinazione inizi con «https://form.agid.gov.it/view/» e che la pagina contenga l’url del sito del Comune.

Requisiti tecnici: All’interno del footer della pagina (tag <footer>) deve esserci un tag <a> che contiene l’href alla dichiarazione di accessibilità. Il tag <a> deve avere l’attributo data-element="accessibility-link". (L’<a> può essere contenuto in altri tag, esempio <li>)

Esempio:

<a href="#" data-element="accessibility-link">Dichiarazione di accessibilità</a>

Criterio C.SI.3.3 - Informativa privacy

Condizioni di successo: per superare il test effettuato dall’app, il sito presenta una voce nel footer che riporta a una pagina sicura riguardante l’informativa sulla privacy. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando uno specifico attributo data-element, viene verificata la presenza di un link nel footer dell’homepage che riporti a una pagina esistente e con certificato HTTPS valido e attivo.

Requisiti tecnici: All’interno del footer della pagina (tag <footer>) deve esserci un tag <a> che contiene l’href alla privacy policy. Il tag <a> deve avere l’attributo data-element="privacy-policy-link". (L’<a> può essere contenuto in altri tag, esempio <li>)

Esempio:

<a href="#" data-element="privacy-policy-link">Informativa privacy</a>

Criterio C.SI.3.4 - Licenza e attribuzione

Condizioni di successo: per superare il test effettuato dall’app, il sito del Comune pubblica dati, documenti o informazioni con licenza aperta CC-BY 4.0, la licenza viene comunicata nella pagina delle “note legali“ raggiungibile da un link nel footer del sito e all’interno della pagina delle “note legali” è presente la sezione “Licenza dei contenuti” con la dicitura richiesta. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando uno specifico attributo data-element, viene verificato che la pagina delle note legali sia raggiungibile dal footer dell’homepage e che questa contenga una sezione intitolata «Licenza dei contenuti» riportante la seguente dicitura

“In applicazione del principio open by default ai sensi dell’articolo 52 del decreto legislativo 7 marzo 2005, n. 82 (CAD) e salvo dove diversamente specificato (compresi i contenuti incorporati di terzi), i dati, i documenti e le informazioni pubblicati sul sito sono rilasciati con licenza CC-BY 4.0. Gli utenti sono quindi liberi di condividere (riprodurre, distribuire, comunicare al pubblico, esporre in pubblico), rappresentare, eseguire e recitare questo materiale con qualsiasi mezzo e formato e modificare (trasformare il materiale e utilizzarlo per opere derivate) per qualsiasi fine, anche commerciale con il solo onere di attribuzione, senza apporre restrizioni aggiuntive.”

Requisiti tecnici:

All’interno del footer della homepage (tag <footer>) deve esserci un tag <a> che contiene l’href alla pagina delle note legali. Il tag <a> deve avere l’attributo data-element="legal-notes". L’<a> può essere contenuto in altri tag, esempio <li>.

All’interno della pagina individuata da questo link dovrà essere presente un tag HTML con l’attributo data-element=”legal-notes-section” da inserire nell’<h> contenente il titolo della sezione da analizzare e uno o più tag <p> con attributo data-element=”legal-notes-body” inseriti in ogni <p> contenente il testo della sezione da analizzare.

Esempio:

(homepage)
. . .
<footer>
   . . .
   <li>
       <a href="#" data-element="legal-notes">Note legali</a>
   </li>
   . . .
</footer>


(pagina delle "Note legali")
. . .
<div>
   <h1 data-element="legal-notes-section">
       Licenza dei contenuti
   </h1>
   <p data-element="legal-notes-body">
       . . .
   </p>
   <p data-element="legal-notes-body">
       . . .
   </p>
</div>

Criterio C.SI.4.1 - Velocità e tempi di risposta

Condizioni di successo: per superare il test effettuato dall’app, tutte le pagine del sito presentano almeno un punteggio di prestazioni pari a 50 quando testate in modalità “mobile” con Lighthouse. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: l’homepage del sito viene testata in modalità “mobile” con Lighthouse.

Criterio C.SI.5.1 - Certificato HTTPS

Condizioni di successo: per superare il test effettuato dall’app, il sito utilizza un certificato https valido e non obsoleto. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: viene verificato che il certificato https dell’homepage sia valido e attivo.

Criterio C.SI.5.2 - Dominio istituzionale

Condizioni di successo: per superare il test effettuato dall’app, il sito comunale è raggiungibile senza necessità di inserimento del sottodominio “www.” e utilizza il sottodominio «comune.» seguito da uno dei possibili domini utilizzabili, secondo la seguente struttura: (1) per i Comuni non capoluogo di provincia, comune.[nome comune].[sigla provincia].it o comune.[nome comune].[nome esteso provincia].it (Esempi: comune.anzio.rm.it o comune.anzio.roma.it) o (2) per i Comuni capoluogo di provincia, comune.[nome capoluogo].it o comune.[nome capoluogo].[sigla della provincia].it (Esempi: comune.roma.it o comune.roma.rm.it). Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: tramite ricerca di specifici attributi «data-element», viene verificato che il dominio utilizzato nelle pagine analizzate rispetti la struttura richiesta dal criterio di conformità e che le pagine siano raggiungibili senza necessità di inserimento del sottodominio «www.». La verifica viene svolta sulla homepage, N pagine di primo livello, N pagine di secondo livello, N pagine di terzo livello “Scheda servizio” e nella pagina di accesso all’area riservata.

Nello specifico, le pagine di secondo livello analizzate sono:

  • Per la sezione Amministrazione, “Organi di governo”, “Aree amministrative”, “Uffici”, “Enti e fondazioni”, “Politici”, “Personale amministrativo”, “Documenti e dati”;
  • Per la sezione Novità, “Notizie”, “Comunicati”, “Avvisi”
  • Per la sezione Servizi, “Educazione e formazione”, “Salute, benessere e assistenza”, “Vita lavorativa”, “Mobilità e trasporti”, “Catasto e urbanistica”, “Anagrafe e stato civile”, “Turismo”, “Giustizia e sicurezza pubblica”, “Tributi, finanze e contravvenzioni”, “Cultura e tempo libero”, “Ambiente”, “Imprese e commercio”, “Autorizzazioni”, “Appalti pubblici”, “Agricoltura e pesca”;
  • Per la sezione Vivere il Comune o Vivere {nome_comune}, “Luoghi”, “Eventi”.

Requisiti tecnici:

Caricamento pagina di accesso all’area riservata:

In homepage, se è presente un link alla pagina di accesso all’area riservata, questo deve contenere il data-element="personal-area-login" nel tag <a> contenente il link alla pagina.

Esempio:

(homepage)
. . . 
<a href="#" data-element="personal-area-login" >
   <span>Accedi all'area personale</span>
</a>

Caricamento pagine primo livello:

In homepage, per poter identificare i link alle pagine di primo livello, nel menù principale identificato dal tag <div class=»navbar»> i link alle pagine di primo livello devono contenere all’interno del tag <a class=»nav-link»> i seguenti attributi:

  • «Amministrazione»: data-element="management"
  • «Novità»: data-element="news"
  • «Servizi»: data-element="all-services"
  • «Vivere il Comune»: data-element="live"
  • Eventuali voci aggiuntive: data-element=”custom-submenu”

L’assenza di uno dei data-element (ad eccezione di quelli relativi a eventuali voci aggiuntive) porta all’impossibilità di esecuzione dell’audit in quanto non sarà possibile recuperare il link.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>

Caricamento pagine di secondo livello:

Per il caricamento delle pagine di secondo livello è necessario che i data-element alle pagine di primo livello siano correttamente posizionati all’interno dei link delle pagine di primo livello nel menù principale.

La pagina di primo livello «Amministrazione», identificata grazie al data-element="management", dovrà contenere il data-element="management-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Novità», identificata grazie al data-element="news", dovrà contenere il data-element="news-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-category-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello. La mancata individuazione di almeno un link attraverso questo data-element porta all’impossibilità di esecuzione dell’audit.

La pagina di primo livello «Vivere il comune», identificata grazie al data-element="live", dovrà contenere due bottoni. Il bottone che porta alla pagina di secondo livello «Eventi» dovrà contenere data-element="live-button-events" e il bottone che porta alla pagina di secondo livello «Luoghi» dovrà contenere data-element="live-button-locations". Per entrambi i bottoni il data-element dovrà essere posizionato sul tag <button> e il link alla pagina di secondo livello dovrà essere presente o all’interno dell’attributo «onclick» o all’interno di un attributo «href». La mancata individuazione di almeno un link attraverso questi data-element porta all’impossibilità di esecuzione dell’audit.

Nel caso fossero presenti delle voci aggiuntive di primo livello esse vengono identificate attraverso il data-element=”custom-submenu”. In ognuna di queste pagine è necessaria la presenza del data-element=”custom-category-link” all’interno dei tag <a> contenenti i link di atterraggio alle pagine di secondo livello.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   <li><a href="#" data-element="management">Amministrazione</a></li>
   <li><a href="#" data-element="news">Novità</a></li>
   <li><a href="#" data-element="all-services">Servizi</a></li>
   <li><a href="#" data-element="live">Vivere il Comune</a></li>
</ul>


(pagina primo livello “Amministrazione”)
. . .
<div class="card-body">
   <a href="#" data-element="management-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Novità”)
. . .
<div class="card-body">
   <a href="#" data-element="news-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <a href="#" data-element="service-category-link">
       <h3>Title</h3>
   </a>
   <p>. . .</p>
</div>


(pagina primo livello “Vivere il Comune”)
. . .
<button type="button" data-element="live-button-events" onclick="location.href='#';">
   <span class="">Tutti gli eventi</span>
</button>
. . .
<button type="button" data-element="live-button-locations" onclick="location.href='#';">
   <span class="">Tutti i luoghi</span>
</button>

Caricamento pagine di terzo livello «Scheda servizio»:

Per il caricamento di queste pagine di terzo livello è necessario che il data-element alla pagina di primo livello «Servizi» sia correttamente posizionato all’interno del link della pagina di primo livello nel menù principale.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di terzo livello “Scheda servizio”. Se nella pagina è presente un bottone che permette di caricare altri link ai servizi attraverso una chiamata AJAX esso dovrà contenere il data-element="load-other-cards".

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<button type="button" onclick="handleOnClick(`script`)" data-element="load-other-cards" >
   <span class="">Carica altri risultati</span>
</button>

Se invece i link ai servizi sono organizzati tramite paginazione è necessario inserire il data-element="pager-link" in tutti i link <a> per cambiare pagina, incluso quello per caricare i link successivi.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<nav class="pagination-wrapper">
    <ul class="pagination">
        <li class="page-item">
            <a aria-label="Vai alla pagina 1" class="page-link" data-element="pager-link" href="#">
                1
            </a>
        </li>
        <li class="page-item">
            <a aria-label="Vai alla pagina 2" class="page-link" data-element="pager-link" href="#"></a>
                2
            </a>
        </li>
        . . .
        <li class="page-item">
            <a class="page-link" data-element="pager-link" href="#">
                <span>Pagina successiva</span>
            </a>
        </li>
    </ul>
 </nav>

La paginazione dei servizi può essere fatta anche su una pagina dedicata, diversa dalla pagina di primo livello «Servizi». In questo caso la pagina di primo livello «Servizi» deve avere un link con data-element="pager-link" che punta alla pagina con i link ai servizi.

La mancata individuazione di almeno un link attraverso il data-element="service-link" porta all’impossibilità di esecuzione dell’audit.

Raccomandazione R.SI.1.1 - Metatag

Condizioni di successo: per superare il test effettuato dall’app, le voci delle schede servizio presentano tutti i metatag richiesti dal modello. Le condizioni complete di successo, tolleranza e fallimento per il superamento della raccomandazione sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: tramite ricerca di specifici attributi data-element, viene verificata la presenza e correttezza dei metatag su N pagine di terzo livello “Scheda servizio”.

I metatag ricercati sono i seguenti:

  • il titolo del servizio nell’attributo json name;
  • il l’attributo materie del servizio nell’attributo json serviceType;
  • il nome del comune nell’attributo json serviceOperator>name;
  • l’attributo copertura geografica nell’attributo json areaServed>name;
  • il testo a chi è rivolto nell’attributo json audience>audienceType;
  • il link canale digitale nell’attributo json availableChannel>serviceUrl;
  • l’attributo titolo dell’unità organizzativa (es ufficio o area) responsabile del servizio (attributo Struttura responsabile del servizio) nell’attributo json availableChannel>serviceLocation>name;
  • l’attributo indirizzo dell’oggetto luogo associato al’attributo canale fisico del servizio nell’attributo json availableChannel>serviceLocation>address>streetAdress;
  • l’attributo CAP dell’oggetto luogo associato al’attributo canale fisico del servizio nell’attributo json availableChannel>serviceLocation>address>postalCode;
  • il nome del comune nell’attributo json availableChannel>serviceLocation>address>addressLocality.

Requisiti tecnici:

Caricamento e verifica nelle pagine di terzo livello «Scheda servizio»:

Per il caricamento di queste pagine di terzo livello è necessario che il data-element alla pagina di primo livello «Servizi» sia correttamente posizionato all’interno del link della pagina di primo livello nel menù principale.

La pagina di primo livello «Servizi», identificata grazie al data-element="all-services", dovrà contenere il data-element="service-link" all’interno dei tag <a> contenenti i link di atterraggio alle pagine di terzo livello “Scheda servizio”. Se nella pagina è presente un bottone che permette di caricare altri link ai servizi attraverso una chiamata AJAX esso dovrà contenere il data-element="load-other-cards".

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<button type="button" onclick="handleOnClick(`script`)" data-element="load-other-cards" >
   <span class="">Carica altri risultati</span>
</button>

All’interno dell’HTML delle pagine “Scheda servizio” deve esserci un attributo <script> che contiene come valore un JSON di metatag. Il tag <script> deve avere l’attributo data-element="metatag".

Esempio:

<script data-element="metatag" type="application/ld+json">
 {
   "name": "Iscrizione alla Scuola dell’infanzia",
   "serviceType": "Educazione e formazione",
   "serviceOperator": {
     "name": "Lorem"
   },
   "areaServed": {
     "name": "Lorem ipsum"
   },
   "audience": {
     "name": ""
   },
   "availableChannel": {
     "serviceUrl": "Lorem ipsum",
     "serviceLocation": {
       …
     }
   }
 }

Se invece i link ai servizi sono organizzati tramite paginazione è necessario inserire il data-element="pager-link" in tutti i link <a> per cambiare pagina, incluso quello per caricare i link successivi.

Esempio:

(homepage)
. . . 
<ul data-element="main-navigation">
   . . .
   <li><a href="#" data-element="all-services">Servizi</a></li>
   . . .
</ul>


(pagina primo livello “Servizi”)
. . .
<div class="card-body">
   <h3>
       <a href="#" data-element="service-link">Titolo</a>
   </h3>
   <p >. . .</p>
</div>
. . .
<nav class="pagination-wrapper">
    <ul class="pagination">
        <li class="page-item">
            <a aria-label="Vai alla pagina 1" class="page-link" data-element="pager-link" href="#">
                1
            </a>
        </li>
        <li class="page-item">
            <a aria-label="Vai alla pagina 2" class="page-link" data-element="pager-link" href="#"></a>
                2
            </a>
        </li>
        . . .
        <li class="page-item">
            <a class="page-link" data-element="pager-link" href="#">
                <span>Pagina successiva</span>
            </a>
        </li>
    </ul>
 </nav>

La paginazione dei servizi può essere fatta anche su una pagina dedicata, diversa dalla pagina di primo livello «Servizi». In questo caso la pagina di primo livello «Servizi» deve avere un link con data-element="pager-link" che punta alla pagina con i link ai servizi.

La mancata individuazione di almeno un link attraverso il data-element="service-link" porta all’impossibilità di esecuzione dell’audit.

Test aggiuntivi - Localizzazione IP

Condizioni di successo: per superare il test effettuato dall’app, l’indirizzo IP fa riferimento a un datacenter localizzato su territorio europeo. Le condizioni complete di successo, tolleranza e fallimento per il superamento della raccomandazione sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: viene verificato che la localizzazione dell’IP rientri all’interno di uno dei confini degli stati membri dell’UE

Requisiti tecnici e modalità di verifica per il modello scuole

Di seguito sono riportati i criteri di conformità e le raccomandazioni verificabili tramite App di valutazione dell’adesione al modello scuole.

Per il corretto funzionamento dell’App di valutazione, è necessario inserire dei data attribute all’interno dei tag HTML del sito. Questi vengono indicati separatamente per ognuno dei criteri. Alcuni data attribute valgono per più criteri.

La chiave generale dei data attribute è data-element=* e va inserita all’interno dei tag HTML.

Nota

I data attribute, dove possibile, sono già presenti nei materiali forniti da Designers Italia, sia all’interno dei template HTML che del tema CMS messi a disposizione. Rimane tuttavia responsabilità dell’ente verificare che siano correttamente inseriti dovunque richiesto.

Nota

Per tutto ciò che è un URL, per esempio l’informativa privacy, l’App controlla anche che l’URL nell’href del componente non sia nullo e, per alcuni casi specifici, che sia in HTTPS (vedi dettagli audit) e che riporti ad una pagina “funzionante”..

Nota

Per tutto ciò che viene controllato sulla base di un vocabolario si utilizzano controlli non case-sensitive.

Importante

I requisiti tecnici qui riportati sono necessari, oltre che per il funzionamento dell’App di valutazione, anche per lo svolgimento delle verifiche da parte del DTD per il rilascio dei fondi della misura 1.4.1. A questo proposito il sito scolastico, una volta pubblicato, deve anche essere funzionante durante gli orari notturni e raggiungibile dagli indirizzi IP 15.160.11.200, 15.160.250.158 e 18.102.41.229 (è necessario che questi indirizzi non vengano bloccati da un eventuale firewall).

Criterio C.SC.1.1 - Coerenza dell’utilizzo dei font

Condizioni di successo: per superare il test effettuato dall’app, tutti i titoli (heading) e tutti i paragrafi delle pagine del sito in lingua italiana utilizzano esclusivamente i font Titillium Web, Lora o Roboto Mono come font di default. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando specifici attributi data-element, nelle pagine analizzate viene verificato che i font di default siano quelli richiesti all’interno di tutti gli <h> e <p>. La verifica viene svolta sulla homepage, N pagine di primo livello, N pagine di secondo livello, N pagine di terzo livello “Scheda servizio”.

Requisiti tecnici:

Caricamento pagine di primo livello:

In homepage, nel menù principale identificato dal tag <ul> i link alle pagine di primo livello devono contenere, all’interno del tag <a>, il data-element="overview" (sulla voce «Panoramica»). Questo deve accadere per tutte le voci richieste («Scuola», «Servizi», «Novità», «Didattica») e per tutte le voci aggiuntive inserite nel menù di primo livello, permettendo di identificare i link alle pagine di primo livello. L’assenza del data-element in ognuna delle 4 voci richieste porta all’impossibilità di esecuzione dell’audit in quanto non sarà possibile recuperare i link.

Caricamento pagine di secondo livello:

In homepage, nel menù principale i sotto-menù (menù di secondo livello) che contengono i link alle pagine di secondo livello devono contenere, all’interno del tag <ul>, i seguenti attributi:

  • «Scuola»: data-element="school-submenu"
  • «Servizi»: data-element="services-submenu"
  • «Novità»: data-element="news-submenu"
  • «Didattica»: data-element="teaching-submenu"
  • Eventuali voci aggiuntive: data-element=”custom-submenu”

All’interno di questi sotto-menù i link alle pagine di secondo livello dovranno essere contenuti in tag <a> dentro i tag <li> del menù.

La mancata individuazione di almeno un link per ogni sotto-menù (ad eccezione di quelli relativi a eventuali voci aggiuntive) attraverso questi data-element porta all’impossibilità di esecuzione dell’audit.

Caricamento pagine di terzo livello «scheda servizio» :

In homepage, nel sotto-menù della voce di primo livello «Servizi», ognuno dei link a pagine di secondo livello deve contenere il data-element="service-type" nel tag <a>.

Nelle pagine a cui ognuno di questi link rimanda, dovrà essere presente il data-element=“service-link” nei tag <a> contenenti i link alle pagine di terzo livello “schede servizio”. Se la pagina possiede un paginatore è necessaria la presenza di un tag <a> con data-element=“pager-link” per permettere di visualizzare i link a tutte le schede servizio.

La mancata individuazione di almeno un link attraverso il data-element=“service-link” porta all’impossibilità di esecuzione dell’audit.

Esempi

Menu principale:

<ul data-element="menu">
   <li>
       <a>Scuola</a>
       <ul data-element="school-submenu">
           <li>
               <div>
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="">Presentazione</a></li>
           <li><a href="#"data-element="school-locations">I luoghi</a></li>
           <li><a href="#">Le persone</a></li>
           <li><a href="#">I numeri della scuola</a></li>
           <li><a href="#">Le carte della scuola</a></li>
           <li><a href="#">Organizzazione</a></li>
           <li><a href="#">La storia</a></li>
       </ul>
   </li>
   <li>
       <a>Servizi</a>
       <ul data-element="services-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#" data-element="service-type">Personale scolastico</a>
           </li>
           <li>
               <a href="#" data-element="service-type">Famiglie e studenti</a>
           </li>
           <li><a href="#">Percorsi di studio</a></li>
       </ul>
   </li>
   <li>
       <a>Novità</a>
       <ul data-element="news-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#">Le notizie</a></li>
           <li><a href="#">Le circolari</a></li>
           <li><a href="#">Calendario eventi</a></li>
           <li><a href="#">Albo online</a></li>
       </ul>
   </li>
   <li>
       <a>Didattica</a>
       <ul data-element="teaching-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#">Offerta formativa</a></li>
           <li><a href="#">Le schede didattiche</a></li>
           <li><a href="#">I progetti delle classi</a></li>
       </ul>
   </li>
</ul>

Pagina di primo livello «Servizi»:

<article class="card">
   <div class="card-body">
       <div class="card-article-img">
           <svg></svg>
       </div>
       <div class="card-article-content">
           <h2><a href="#" data-element="service-link">Titolo del servizio</a></h2>
           <p>Descrizione del servizio</p>
       </div>
   </div>
</article>


. . . 


<nav class="pagination-wrapper">
   <div class="pagination">
       <ul class="pagination">
           <li ><span>1</span></li>
           <li class="page-item">
               <a href="#" 
                  aria-label="Vai alla pagina 2" 
                  data-element="pager-link">2</a>
           </li>
           <li class="page-item">
               <a href="#" 
                  data-element="pager-link">
                       <span>Pagina successiva</span></a>
           </li>
       </ul>
   </div>
</nav>

Criterio C.SC.1.2 - Libreria di elementi di interfaccia

Condizioni di successo: per superare il test effettuato dall’app, in tutte le pagine del sito viene utilizzata la libreria Bootstrap Italia, la libreria Bootstrap Italia è presente nel tag <head> delle pagine del sito e la versione in uso è uguale o superiore alla 1.6. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: in ogni pagina analizzata viene verificata la presenza della libreria Bootstrap Italia e la versione in uso, individuando la proprietà CSS –bootstrap-italia-version all’interno del selettore :root o la variabile globale window.BOOTSTRAP_ITALIA_VERSION.

Inoltre ogni pagina analizzata deve presentare almeno una tra le seguenti classi CSS di Bootstrap Italia:

  • .row
  • .col
  • .card
  • .container
  • .variable-gutters
  • .section
  • .font-serif
  • .font-sans-serif
  • .font-monospace
  • .lead
  • .it-list
  • .link-list
  • .link-list-wrapper
  • .list-item
  • .text-primary
  • .text-secondary

La verifica viene svolta sulla homepage, N pagine di primo livello, N pagine di secondo livello e N pagine di terzo livello “Scheda servizio”.

Requisiti tecnici:

Nota

Qualora il test dovesse fallire e tutti i data-element necessari sono presenti, riprova la verifica disabilitando il post processing del CSS (minificazione o inlining).

Caricamento pagine di primo livello:

In homepage, nel menù principale identificato dal tag <ul> i link alle pagine di primo livello devono contenere, all’interno del tag <a>, il data-element="overview" (sulla voce «Panoramica»). Questo deve accadere per tutte le voci richieste («Scuola», «Servizi», «Novità», «Didattica») e per tutte le voci aggiuntive inserite nel menù di primo livello, permettendo di identificare i link alle pagine di primo livello. L’assenza del data-element in ognuna delle 4 voci richieste porta all’impossibilità di esecuzione dell’audit in quanto non sarà possibile recuperare i link.

Caricamento pagine di secondo livello:

In homepage, nel menù principale i sotto-menù (menù di secondo livello) che contengono i link alle pagine di secondo livello devono contenere, all’interno del tag <ul>, i seguenti attributi:

  • «Scuola»: data-element="school-submenu"
  • «Servizi»: data-element="services-submenu"
  • «Novità»: data-element="news-submenu"
  • «Didattica»: data-element="teaching-submenu"
  • Eventuali voci aggiuntive: data-element=”custom-submenu”

All’interno di questi sotto-menù i link alle pagine di secondo livello dovranno essere contenuti in tag <a> dentro i tag <li> del menù.

La mancata individuazione di almeno un link per ogni sotto-menù (ad eccezione di quelli relativi a eventuali voci aggiuntive) attraverso questi data-element porta all’impossibilità di esecuzione dell’audit.

Caricamento pagine di terzo livello «Scheda servizio»:

In homepage, nel sotto-menù della voce di primo livello «Servizi», ognuno dei link a pagine di secondo livello deve contenere il data-element="service-type" nel tag <a>.

Nelle pagine a cui ognuno di questi link rimanda, dovrà essere presente il data-element=“service-link” nei tag <a> contenenti i link alle pagine di terzo livello “schede servizio”. Se la pagina possiede un paginatore è necessaria la presenza di un tag <a> con data-element=“pager-link” per permettere di visualizzare i link a tutte le schede servizio.

La mancata individuazione di almeno un link attraverso il data-element=“service-link” porta all’impossibilità di esecuzione dell’audit.

Esempi

Menu principale:

<ul data-element="menu">
   <li>
       <a>Scuola</a>
       <ul data-element="school-submenu">
           <li>
               <div>
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="">Presentazione</a></li>
           <li><a href="#"data-element="school-locations">I luoghi</a></li>
           <li><a href="#">Le persone</a></li>
           <li><a href="#">I numeri della scuola</a></li>
           <li><a href="#">Le carte della scuola</a></li>
           <li><a href="#">Organizzazione</a></li>
           <li><a href="#">La storia</a></li>
       </ul>
   </li>
   <li>
       <a>Servizi</a>
       <ul data-element="services-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#" data-element="service-type">Personale scolastico</a>
           </li>
           <li>
               <a href="#" data-element="service-type">Famiglie e studenti</a>
           </li>
           <li><a href="#">Percorsi di studio</a></li>
       </ul>
   </li>
   <li>
       <a>Novità</a>
       <ul data-element="news-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#">Le notizie</a></li>
           <li><a href="#">Le circolari</a></li>
           <li><a href="#">Calendario eventi</a></li>
           <li><a href="#">Albo online</a></li>
       </ul>
   </li>
   <li>
       <a>Didattica</a>
       <ul data-element="teaching-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#">Offerta formativa</a></li>
           <li><a href="#">Le schede didattiche</a></li>
           <li><a href="#">I progetti delle classi</a></li>
       </ul>
   </li>
</ul>

Pagina di primo livello «Servizi»:

<article class="card">
   <div class="card-body">
       <div class="card-article-img">
           <svg></svg>
       </div>
       <div class="card-article-content">
           <h2><a href="#" data-element="service-link">Titolo del servizio</a></h2>
           <p>Descrizione del servizio</p>
       </div>
   </div>
</article>


. . . 


<nav class="pagination-wrapper">
   <div class="pagination">
       <ul class="pagination">
           <li ><span>1</span></li>
           <li class="page-item">
               <a href="#" 
                  aria-label="Vai alla pagina 2" 
                  data-element="pager-link">2</a>
           </li>
           <li class="page-item">
               <a href="#" 
                  data-element="pager-link">
                       <span>Pagina successiva</span></a>
           </li>
       </ul>
   </div>
</nav>

Criterio C.SC.1.3 - Utilizzo di temi per CMS (Content Management System)

Condizioni di successo: per superare il test effettuato dall’app, se è in uso il tema CMS del modello scuole, la versione utilizzata è uguale o superiore alla 2.0. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: viene verificato l’uso del tema CMS del modello e la versione in uso ricercando uno specifico testo all’interno di tutti i file .CSS presenti in pagina.

Il testo ricercato nei file .css è:

/*!
Theme Name: [nome_tema]
Author: [nome_autore]
Description: Design Scuole Italia [descrizione_tema che contiene la parola “WordPress”]
Version: [numero_versione]
License: [nome_licenza]
Text Domain: design_scuole_italia
*/

Nota

Qualora il test non dovesse identificare correttamente il tema CMS e la versione in uso, riprova la verifica disabilitando il post processing del CSS (minificazione o inlining).

Criterio C.SC.1.4 - Voci di menù di primo livello

Condizioni di successo: per superare il test effettuato dall’app, le voci del menù di primo livello del sito sono esattamente quelle indicate nel documento di architettura dell’informazione e sono nell’ordine indicato (ovvero Scuola, Servizi, Novità, Didattica) e tutte le pagine raggiungibili dal menu di primo livello appartengono al dominio della scuola. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: tramite ricerca di uno specifico attributo data-element, vengono identificate le voci presenti nel menù del sito, il loro ordine e confrontate con quanto indicato nella Documentazione del modello scuole, applicando una tolleranza di massimo 3 voci aggiuntive. Inoltre, viene verificato che tutte le pagine raggiungibili dal menu di primo livello portino a pagine interne al dominio del sito della scuola.

Requisiti tecnici: Nell’elemento del menù, il tag <ul> deve avere l’attributo data-element=”menu” ed essere composto da <li> e <a>.

Esempio:

<ul data-element="menu">
   <li>
       <a>Scuola</a>
       . . .
   </li>
   <li>
       <a>Servizi</a>
       . . .
   </li>
   <li>
       <a>Novità</a>
       . . .
   </li>
   <li>
       <a>Didattica</a>
       . . .
   </li>
</ul>

Criterio C.SC.1.5 - Voci di menu di secondo livello

Condizioni di successo: per superare il test effettuato dall’app, tutte le voci del menù di secondo livello usate fanno riferimento alla voce di primo livello corrispondente secondo quanto indicato nella Documentazione del modello scuole e tutte le pagine raggiungibili dal menu di secondo livello appartengono al dominio della scuola. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando specifici attributi data-element, vengono verificate le voci di secondo livello usate rispetto ad ognuna delle voci di primo livello del menù. Nel conteggio vengono incluse anche le voci di secondo livello riferite a voci di primo livello non indicate nella documentazione. Inoltre, viene verificato che tutte le pagine raggiungibili dal menu di secondo livello portino a pagine interne al dominio del sito della scuola.

Requisiti tecnici: In homepage, nel menù principale i sotto-menù (menù di secondo livello) che contengono i link alle pagine di secondo livello devono contenere, all’interno del tag <ul>, i seguenti attributi:

  • «Scuola»: data-element="school-submenu"
  • «Servizi»: data-element="services-submenu"
  • «Novità»: data-element="news-submenu"
  • «Didattica»: data-element="teaching-submenu"
  • Eventuali voci aggiuntive: data-element=”custom-submenu”

Attraverso questi data-element vengono caricate le voci dei sotto-menù per eseguire il controllo richiesto. La mancata individuazione di almeno una voce (ad eccezione delle voci aggiuntive) per ogni sotto-menù porta all’impossibilità di esecuzione dell’audit.

Esempio:

<ul data-element="menu">
   <li>
       <a>Scuola</a>
       <ul data-element="school-submenu">
           <li>
               <div>
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="">Presentazione</a></li>
           <li><a href="#"data-element="school-locations">I luoghi</a></li>
           <li><a href="#">Le persone</a></li>
           <li><a href="#">I numeri della scuola</a></li>
           <li><a href="#">Le carte della scuola</a></li>
           <li><a href="#">Organizzazione</a></li>
           <li><a href="#">La storia</a></li>
       </ul>
   </li>
   <li>
       <a>Servizi</a>
       <ul data-element="services-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#" data-element="service-type">Personale scolastico</a>
           </li>
           <li>
               <a href="#" data-element="service-type">Famiglie e studenti</a>
           </li>
           <li><a href="#">Percorsi di studio</a></li>
       </ul>
   </li>
   <li>
       <a>Novità</a>
       <ul data-element="news-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#">Le notizie</a></li>
           <li><a href="#">Le circolari</a></li>
           <li><a href="#">Calendario eventi</a></li>
           <li><a href="#">Albo online</a></li>
       </ul>
   </li>
   <li>
       <a>Didattica</a>
       <ul data-element="teaching-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#">Offerta formativa</a></li>
           <li><a href="#">Le schede didattiche</a></li>
           <li><a href="#">I progetti delle classi</a></li>
       </ul>
   </li>
</ul>

Criterio C.SC.2.1 - Informativa privacy

Condizioni di successo: per superare il test effettuato dall’app, il sito presenta una voce nel footer che riporta a una pagina sicura riguardante l’informativa sulla privacy. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: tramite ricerca di uno specifico attributo data-element, viene verificata la presenza di un link nel footer che riporti a una pagina esistente e con certificato HTTPS valido e attivo.

Requisiti tecnici: Il tag <a> deve avere l’attributo data-element=”privacy-policy-link” e contenere un “href” (può essere contenuto in altri tag, ad esempio <li> …). Il tag deve essere presente all’interno del tag <footer>.

Esempio:

<footer>
…
<li>
<a href="#" data-element="privacy-policy-link">Informativa privacy</a>
</li>
…
</footer>

Criterio C.SC.2.2 - Dichiarazione di accessibilità

Condizioni di successo: per superare il test effettuato dall’app, il sito presenta una voce nel footer che riporta a una dichiarazione di accessibilità AGID valida per il sito. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando uno specifico attributo data-element, viene verificata la presenza del link nel footer dell’homepage, che riporti a una pagina esistente, che l’url della pagina di destinazione inizi con «https://form.agid.gov.it/view/» e che la pagina contenga l’url del sito della scuola.

Requisiti tecnici: All’interno del footer dell’homepage (tag <footer>) deve esserci un tag <a> che contiene l’href alla dichiarazione di accessibilità. Il tag <a> deve avere l’attributo data-element="accessibility-link". L’<a> può essere contenuto in altri tag, esempio <li>.

Esempio:

<footer>
…
  <li>
    <a href="#" data-element="accessibility-link">Dichiarazione di accessibilita</a>
  </li>
…
</footer>

Criterio C.SC.3.1 - Certificato HTTPS

Condizioni di successo: per superare il test effettuato dall’app, il sito utilizza un certificato https valido e non obsoleto. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: viene verificato che il certificato https dell’homepage sia valido e attivo.

Raccomandazione R.SC.1.1 - Vocabolari controllati

Condizioni di successo: per superare il test effettuato dall’app, gli argomenti utilizzati appartengono alla lista indicata all’interno del documento di architettura dell’informazione del modello scuole alla voce «Le parole della scuola» e l’elenco completo degli argomenti utilizzati è presente nella pagina dei risultati di ricerca. Le condizioni complete di successo, tolleranza e fallimento per il superamento del criterio di conformità sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: tramite ricerca di specifici attributi data-element, gli argomenti identificati all’interno della funzione di ricerca del sito vengono confrontati con l’elenco di voci presente nel documento di architettura dell’informazione.

Requisiti tecnici: Il bottone (<button>) «cerca» in homepage deve avere l’attributo data-element=”search-modal-button” in modo da poterne simulare l’apertura. Il tag <input> di testo deve avere attributo data-element=”search-modal-input” in modo da poter essere inserito testo di ricerca. Infine, il bottone per cercare (avvia ricerca) deve avere data-element=”search-submit”. La pagina risultati ricerca deve contenere un listato di argomenti <ul> con attributo data-element=”all-topics” contenente degli <li> (può contenere altri tag).

Esempio:

<button type="button" data-element="search-modal-button">
<input data-element="search-modal-input" placeholder="Cerca servizi, notizie o documenti">
<button type="button data-element="search-submit">
 
<ul data-element="all-topics">
  <li>
    <div class="custom">
       <label class="custom-control-label"> Verso il liceo</label>
    </div>
  </li>
  <li>
    <div class="custom">
       <label class="custom-control-label">Comunicati</label>
    </div>
  </li>
…
</ul>

Raccomandazione R.SC.1.2 - Schede informative di servizio

Condizioni di successo: per superare il test effettuato dall’app, nelle schede informative di servizio le voci obbligatorie e i relativi contenuti sono presenti e sono nell’ordine corretto. Le condizioni complete di successo, tolleranza e fallimento per il superamento della raccomandazione sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando specifici attributi «data-element», la presenza e l’ordine delle voci richieste viene verificato ricercandoli all’interno della pagina e dell’indice. Per essere ritenute valide, le voci devono avere contenuti associati della tipologia indicata all’interno del documento di architettura dell’informazione. La verifica viene svolta su N pagine di terzo livello “Scheda servizio”.

Requisiti tecnici:

Caricamento pagine di terzo livello «Scheda servizio»:

In homepage, nel sotto-menù della voce di primo livello «Servizi», ognuno dei link a pagine di secondo livello deve contenere il data-element="service-type" nel tag <a>.

Nelle pagine a cui ognuno di questi link rimanda, dovrà essere presente il data-element=“service-link” nei tag <a> contenenti i link alle pagine di terzo livello “schede servizio”. Se la pagina possiede un paginatore è necessaria la presenza di un tag <a> con data-element=“pager-link” per permettere di visualizzare i link a tutte le schede servizio.

La mancata individuazione di almeno un link attraverso il data-element=“service-link” porta all’impossibilità di esecuzione dell’audit.

Controllo della presenza e ordine delle voci nella scheda servizio:

All’interno delle pagine di terzo livello «schede servizio» è necessaria la presenza del data-element="page-index" nell’indice della pagina identificato dal tag <ul>. Da questo indice vengono caricate le voci che si trovano dentro i tag <a> di ogni riga dell’indice indicata dal tag <li>. Le voci per le quali viene controllata la presenza nell’indice e il loro ordinamento sono:

  • «Cos’è»
  • «Come si accede al servizio»
  • «Cosa serve»
  • «Tempi e scadenze»
  • «Contatti»
  • «Ulteriori informazioni»

Per queste voci (ad eccezione di «Contatti») viene anche controllata la presenza di contenuto nella relativa sezione in pagina. Se la sezione non viene individuata la relativa voce risulterà mancante nella reportistica. In particolare:

  • «Cos’è»: viene controllata la presenza di un tag <p> contenuto nel <div> con data-element="service-what-is" e che questo abbia almeno 3 caratteri;
  • «Come si accede al servizio»: per confermare la presenza in pagina della relativa sezione è sufficiente sia presente uno di questi 3 componenti: «Prenota appuntamento» (un tag <button> con data-element="service-booking-access" per il bottone che porta alla pagina di prenotazione appuntamenti), «Accesso online» (un tag <button> con data-element="service-online-access" per il bottone che porta alla pagina di accesso online) e/o «Accesso generico» (un tag HTML con data-element="service-generic-access" per un componente diverso da quelli sopra identificati);
  • «Cosa serve»: viene controllata la presenza di un tag <p> contenuto nel <div> con data-element="service-needed" e che questo abbia almeno 3 caratteri;
  • «Tempi e scadenze»: per confermare la presenza in pagina della relativa sezione è sufficiente sia presente uno di questi 2 componenti: «Testo» (è necessario un <p> contenuto nel <div> con data-element=“service-calendar-text” e che questo abbia almeno 3 caratteri in un testo al di fuori del componente calendario) e/o «Calendario» (un componente calendario contenuto in un tag <div> con data-element=“service-calendar-list”).
  • «Ulteriori informazioni»: viene controllata la presenza di un tag <p> contenuto nel <div> con data-element="service-more-info" e che questo abbia almeno 3 caratteri.

Viene inoltre controllata la presenza di altri componenti al di fuori dell’indice:

  • «Titolo»: viene controllata la presenza di un tag HTML con data-element="service-title" che identifica il titolo del servizio e che questo abbia almeno 3 caratteri;
  • «Tipologia servizio»: viene controllata la presenza di un tag HTML con data-element="breadcrumb" che identifica la breadcrumb. In questo componente vengono individuati i testi relativi ai vari <li> e viene controllata la presenza di almeno 3 caratteri nel testo successivo a «Servizi»;
  • «Tassonomie argomenti»: viene controllata la presenza di almeno un tag <a> con data-element="topic-list" che identificano gli argomenti del servizio;
  • «Descrizione breve»: viene controllata la presenza di un tag HTML con data-element="service-description" che identifica la descrizione del servizio e che questo abbia almeno 3 caratteri;
  • «A cosa serve»: viene controllata la presenza di un tag HTML con data-element="used-for" e che questo abbia almeno 3 caratteri;
  • «Luogo» (contenuto nella sezione «Come si accede al servizio»): all’interno dell’elemento individuato da data-element="places" vengono cercate coppie di label e corrispondente valore, dove le label sono di tipo <div><span>…</span></div> e i valori sono di tipo <div><p>…</p></div>; ogni label deve sempre avere un corrispondente valore, anche se vuoto. Le label possono avere i seguenti valori: «Indirizzo», «Orari», «Gps», “Email”, “PEC” e “Telefono”. Per quanto riguarda le coordinate GPS viene controllato che l’URL della mappa contenga il valore “map” (in modo da coprire più servizi di mappe possibili) mentre per quanto riguarda gli orari viene controllato tramite Regexp che il valore della label “Orari” contenga un orario in formato in ore, minuti oppure ore, minuti e secondi;
  • «Struttura responsabile del servizio» (contenuta nella sezione «Contatti»): viene controllata la presenza di un tag <a> con data-element="structures" che identifica la struttura responsabile per il servizio;
  • «Metadati»: viene controllata la presenza di «pubblicato» o «revisione» nel testo del tag HTML con data-element="metadata". Il testo viene trasformato in minuscolo durante il controllo.

Esempi:

Menu principale:

<ul data-element="menu">
   <li>
       <a>Scuola</a>
       <ul data-element="school-submenu">
           <li>
               <div>
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="">Presentazione</a></li>
           <li><a href="#"data-element="school-locations">I luoghi</a></li>
           <li><a href="#">Le persone</a></li>
           <li><a href="#">I numeri della scuola</a></li>
           <li><a href="#">Le carte della scuola</a></li>
           <li><a href="#">Organizzazione</a></li>
           <li><a href="#">La storia</a></li>
       </ul>
   </li>
   <li>
       <a>Servizi</a>
       <ul data-element="services-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#" data-element="service-type">Personale scolastico</a>
           </li>
           <li>
               <a href="#" data-element="service-type">Famiglie e studenti</a>
           </li>
           <li><a href="#">Percorsi di studio</a></li>
       </ul>
   </li>
   <li>
       <a>Novità</a>
       <ul data-element="news-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#">Le notizie</a></li>
           <li><a href="#">Le circolari</a></li>
           <li><a href="#">Calendario eventi</a></li>
           <li><a href="#">Albo online</a></li>
       </ul>
   </li>
   <li>
       <a>Didattica</a>
       <ul data-element="teaching-submenu">
           <li class="menu-title">
               <div class="h3">
                   <a href="#" data-element="overview">Panoramica</a>
               </div>
           </li>
           <li><a href="#">Offerta formativa</a></li>
           <li><a href="#">Le schede didattiche</a></li>
           <li><a href="#">I progetti delle classi</a></li>
       </ul>
   </li>
</ul>

Pagina di primo livello «Servizi»:

<article class="card">
   <div class="card-body">
       <div class="card-article-img">
           <svg></svg>
       </div>
       <div class="card-article-content">
           <h2><a href="#" data-element="service-link">Titolo del servizio</a></h2>
           <p>Descrizione del servizio</p>
       </div>
   </div>
</article>


. . . 


<nav class="pagination-wrapper">
   <div class="pagination">
       <ul class="pagination">
           <li ><span>1</span></li>
           <li class="page-item">
               <a href="#" 
                  aria-label="Vai alla pagina 2" 
                  data-element="pager-link">2</a>
           </li>
           <li class="page-item">
               <a href="#" 
                  data-element="pager-link">
                       <span>Pagina successiva</span></a>
           </li>
       </ul>
   </div>
</nav>

Indice della pagina «Scheda servizio»:

<aside>
   <div>
       <a><span>Indice della pagina</span></a>
   </div>
   <div>
       <ul data-element="page-index">
           <li><a>Cos'è</a></li>
           <li><a>Come si accede al servizio</a></li>
           <li><a>Cosa serve</a></li>
           <li><a>Tempi e scadenze</a></li>
           <li><a>Casi particolari</a></li>
           <li><a>Contatti</a></li>
           <li><a>Ulteriori informazioni</a></li>
       </ul>
   </div>
</aside>

Corpo della pagina «Scheda servizio»:

<section>
   <div>
       <div>
           <div>
               <div>
                   <h1 data-element="service-title">Titolo del servizio</h1>
                   <p data-element="service-description">Descrizione del servizio</p>
               </div>
           </div>
          
. . .


           <div class="col-lg-3 col-md-4 offset-lg-1">
               <aside >
                   <h2>Argomenti</h2>
                   <div class="badges">
                       <a href="#" data-element="topic-list">Argomento</a>
                   </div>
               </aside>
           </div>
       </div>
   </div>
</section>


. . .

«Luogo» (contenuto nella sezione «Come si accede al servizio»):

<ul data-element="places>
  <li>
    <div><span>Indirizzo</span></div>
    <div><p>Via Garibaldi</p></div>
  </li>
  <li>
    <div><span>GPS</span></div>
    <div><p></p></div>
  </li>
  <li>
    <div><span>Orari</span></div>
    <div><p>dalle 8:30 alle 17:00</p></div>
  </li>
  ...
</ul>

Raccomandazione R.SC.2.2 - Licenza e attribuzione

Condizioni di successo: per superare il test effettuato dall’app, il sito della scuola pubblica dati, documenti o informazioni con licenza aperta CC-BY 4.0, la licenza viene comunicata nella pagina delle “note legali“ raggiungibile da un link nel footer del sito e all’interno della pagina delle “note legali” è presente la sezione “Licenza dei contenuti” con la dicitura richiesta. Le condizioni complete di successo, tolleranza e fallimento per il superamento della raccomandazione sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: ricercando uno specifico attributo «data-element», viene verificato che la pagina delle note legali sia raggiungibile dal footer e che questa contenga una sezione intitolata «Licenza dei contenuti» riportante la seguente dicitura

“In applicazione del principio open by default ai sensi dell’articolo 52 del decreto legislativo 7 marzo 2005, n. 82 (CAD) e salvo dove diversamente specificato (compresi i contenuti incorporati di terzi), i dati, i documenti e le informazioni pubblicati sul sito sono rilasciati con licenza CC-BY 4.0. Gli utenti sono quindi liberi di condividere (riprodurre, distribuire, comunicare al pubblico, esporre in pubblico), rappresentare, eseguire e recitare questo materiale con qualsiasi mezzo e formato e modificare (trasformare il materiale e utilizzarlo per opere derivate) per qualsiasi fine, anche commerciale con il solo onere di attribuzione, senza apporre restrizioni aggiuntive.”

Requisiti tecnici: All’interno del footer della pagina (tag <footer>) deve esserci un tag <a> che contiene l’href alla pagina delle note legali. Il tag <a> deve avere l’attributo data-element=»legal-notes». L’<a> può essere contenuto in altri tag, esempio <li>. All’interno della pagina individuata da questo link dovrà essere presente un tag HTML con l’attributo data–element=”legal-notes-section” da inserire nel <h> contenente il titolo della sezione da analizzare e uno o più tag <p> con attributo data-element=”legal-notes-body” inseriti in ogni <p> contenente il testo della sezione da analizzare.

Esempi:

<footer>
…
<li>
<a href="#" data-element="legal-notes">Note legali/a>
</li>
…
</footer>

<div>
   <h1 data-element="legal-notes-section">
       Licenza dei contenuti
   </h1>
   <p data-element="legal-notes-body">
       . . .
   </p>
   <p data-element="legal-notes-body">
       . . .
   </p>
</div>

Raccomandazione R.SC.3.1 - Velocità e tempi di risposta

Condizioni di successo: per superare il test effettuato dall’app, il sito presenta livelli di prestazioni (media pesata di 6 metriche standard) pari o superiori a 50. Le condizioni complete di successo, tolleranza e fallimento per il superamento della raccomandazione sono dettagliate nella documentazione del modello sui criteri di conformità per la misura 1.4.1.

Modalità di verifica: l’homepage del sito viene testata in modalità “mobile” con Lighthouse.

Test aggiuntivo Localizzazione IP

Condizioni di successo: per superare il test effettuato dall’app, l’indirizzo IP fa riferimento a un datacenter localizzato su territorio europeo.

Modalità di verifica: viene verificato che la localizzazione dell’IP rientri all’interno di uno dei confini degli stati membri dell’Unione Europea.

Changelog

Il registro delle modifiche apportate alla documentazione dell’App di valutazione.

Per consultare la versione aggiornata del changelog, assicurati di aver selezionato la versione «versione-attuale» della documentazione dal menu a tendina in alto.

29 novembre 2024

Aggiornati i capitoli «Installazione e uso dell’app» e «Report e risultati» con le nuove indicazioni a seguito del rilascio di un’aggiornamento dell’applicazione.

26 luglio 2023

5. Requisiti tecnici e modalità di verifica per il modello Comuni - Criterio C.SI.1.3 - Schede informative di servizio per il cittadino - Corretto l’esempio pagina di terzo livello Scheda servizio della sezione Controllo della presenza e ordine delle voci nelle “Schede servizio”, dove era indicata erroneamente la presenza del data-element <div data-element=»service-extended-description»><p>…</p></div> per l’elemento <h2>Descrizione</h2>.

6 luglio 2023

4. Installazione e uso delle app - Aggiunta l’indicazione che per il corretto funzionamento dell’app su Windows, è necessario utilizzare Windows 10 o superiori, oppure Windows Server 2016 o superiori.

5. Requisiti tecnici e modalità di verifica per il modello Comuni - Criterio C.SI.1.3 - Schede informative di servizio per il cittadino - Per le condizioni di servizio, Per le condizioni di servizio, veniva erroneamente indicato che l’app controlla che l’elemento fosse un link. Viene controllato solamente che sia presente il data-element.

5. Requisiti tecnici e modalità di verifica per il modello Comuni - Criterio C.SI.5.2 - Dominio istituzionale - Aggiornato il link all’elenco dei domini utilizzabili.