5. 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.
Nota
I data attribute, dove possibile, sono già presenti nei materiali forniti da Designers Italia, sia all’interno dei template HTML che dei CMS messi a disposizione. Rimane tuttavia responsabilità dell’ente verificare che siano correttamente inseriti dove richiesto.
La chiave generale dell’attribute è data-element=* e va inserita all’interno dei tag HTML.
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 (vedi dettagli audit) e che riporti ad una pagina “funzionante”.
NB: Per tutto ciò che viene controllato sulla base di un vocabolario si utilizzano controlli non case-sensitive.
5.1. Criterio C.SI.1.1¶
Condizioni di successo: il sito utilizza almeno i font Titillium Web e Lora.
Modalità di verifica: tramite ricerca dello specifico attributo data-element, viene verificata la presenza dei font all’interno di una scheda servizio casualmente selezionata.
Template HTML su cui si effettua scraping: template-homepage.html, template-servizi.html, template-dettaglio-servizio.html
Requisiti tecnici: In homepage all’interno di un tag <a> deve esserci l’attributo data-element="all-services" che riporta alla pagina con il listato servizi. All’interno della pagina servizi i servizi devono essere degli <a> con l’attributo data-element="service-link" che riportano al dettaglio servizio.
5.2. Criterio C.SI.1.2¶
Condizioni di successo: il sito usa la libreria Bootstrap Italia in una versione uguale o superiore alla 2.0.
Modalità di verifica: 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.
5.3. Criterio C.SI.1.3¶
Condizioni di successo: nelle schede informative di servizio le voci indicate come obbligatorie sono presenti e sono nell’ordine corretto.
Modalità di verifica: viene verificato se le voci indicate come obbligatorie all’interno del documento di architettura dell’informazione sono presenti. Inoltre viene verificato se le voci obbligatorie presenti nell’indice della pagina sono nell’ordine corretto. La verifica viene effettuata su una scheda servizio casualmente selezionata, ricercando le voci indicate nella documentazione del modello tramite specifici attributi data-element.
Template HTML su cui si effettua scraping: template-homepage.html, template-servizi.html, template-dettaglio-servizio.html
Requisiti tecnici: In homepage, all’interno di un tag <a>, deve esserci l’attributo data-element="all-services" che riporta alla pagina con il listato servizi. All’interno della pagina servizi i servizi devono essere degli <a> con l’attributo data-element="service-link" che riportano al dettaglio servizio.
Esempio:
<li>
<a href="/template-servizi.html">
<span>Servizi</span>
</a>
</li>
<div>
<h3>
<a href="/ template-dettaglio-servizio.html" data-element="service-link">Abbandono di rifiuti in aree private</a>
</h3>
<p>Titolo servizio</p>
</div>
All’interno della scheda servizio devono esserci i seguenti attributi:
data-element="page-index": Per controllo sequenzialità (e presenza) voci – deve essere un tag <ul> con l’attributo che contiene altri <li> e degli <a>. Voci controllate: «A chi è rivolto», «Come fare», «Cosa serve», «Cosa si ottiene», «Tempi e scadenze»;data-element=”breadcrumb”: Controllo presenza della categoria del servizio - viene controllata la breadcrumb <ul>/<ol> con attributo data-element=”breadcrumb” che contiene i tag <li> che possono contenere altri tag;data-element="service-title": Controllo presenza titolo – può essere un qualsiasi tag che contenga testo (h1, p etc..);data-element="service-description": Controllo presenza descrizione – può essere un qualsiasi tag che contenga testo (h1, p etc..);data-element="service-status": Controllo status del servizio – può essere un qualsiasi tag che contenga testo (h1, p etc..). La label deve contenere ALMENO il testo: attivo/disattivo/non attivo;data-element="service-topic": Controllo tag – un tag <a> che può contenere anche altri tag;data-element="service-area": Controllo presenza area responsabile del servizio - un tag <a> che contiene l’attributo.
Voci delle quali viene verificata la presenza: titolo del servizio, categoria del servizio (contenuto breadcrumb), stato del servizio, descrizione breve, “A chi è rivolto”, “Come fare”, “Cosa serve”, “Cosa si ottiene”, “Tempi e scadenze”, “Accedi al servizio” (Canale fisico), “Condizioni di servizio”, “Contatti”, «Unità Organizzativa responsabile» e argomenti.
Voci delle quali viene verificata la presenza e sequenzialità all’interno dell’indice della pagina: “A chi è rivolto”, “Come fare”, “Cosa serve”, “Cosa si ottiene”, “Tempi e scadenze”, “Accedi al servizio”, “Condizioni di servizio” e “Contatti”.
Esempi:
<ul data-element="page-index">
<li>
<a>
<span>Contatti</span>
</a>
</li>
<h1 data-element="service-title">Iscrizione alla Scuola dell’infanzia</h1>
<p data-element="service-description">Descrizione</p>
<span data-element="service-status">Servizio attivo</span>
<a href="#" data-element="service-topic">
<div>
<span>Famiglia</span>
</div>
</a>
<a data-element="service-area">Area Lavori pubblici</a>
5.4. Criterio C.SI.1.4¶
Condizioni di successo: se è in uso il tema CMS del modello per i Comuni, la versione utilizzata è uguale o superiore alla 1.0.
Modalità di verifica: viene verificata la versione indicata nel file style.css ricercando la chiave «Text Domain: design_comuni_italia».
5.5. Criterio C.SI.1.5¶
Condizioni di successo: 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.
Modalità di verifica: 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 e con il vocabolario controllato EuroVoc, usando nella ricerca specifici attributi data-element.
Template HTML su cui si effettua scraping: template-homepage.html, template-argomenti.html
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>
5.6. Criterio C.SI.1.6¶
Condizioni di successo: 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).
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 nel documento di architettura dell’informazione, applicando una tolleranza di massimo 3 voci aggiuntive.
Template HTML su cui si effettua scraping: template-homepage.html
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>
5.7. Criterio C.SI.1.7¶
Condizioni di successo: i titoli delle pagine di secondo livello corrispondono a quelli indicati nel documento di architettura dell’informazione del modello Comuni.
Modalità di verifica: tramite ricerca di uno specifico attributo data-element, vengono confrontati i titoli delle categorie di servizi presentati nella pagina di primo livello «Servizi» con i titoli richiesti dal modello nell’elenco Tassonomia categorie dei servizi del documento di architettura dell’informazione.
Template HTML su cui si effettua scraping: template-homepage.html, template-servizi.html
Requisiti tecnici: In homepage, la voce di menù “Servizi” deve essere un tag <a> con un un attributo data-element="all-services". L’href della voce Servizi deve riportare alla pagina template-servizi.html. All’interno della pagina, sotto la voce “Categoria” le card devono contenere degli <a> con l’attributo data-element="service-category-link". Verrà prelevato il titolo testuale della card.
Esempi:
<a href=”/template-servizi.html"data-element="service">Servizi</a>
<a data-element="service-page" href="/template-servizi-servizio.html">
<h3 class="card-title t-primary title-xlarge">Agricoltura e pesca</h3>
</a>
5.8. Criterio C.SI.2.1¶
Condizioni di successo: la funzionalità di prenotazione di un appuntamento presso lo sportello è presente in tutte le schede servizio che lo richiedono.
Modalità di verifica: tramite ricerca di uno specifico attributo data-element, viene verificata la presenza del componente «Prenota appuntamento» all’interno di una scheda servizio selezionata casualmente. Questo test non ha una condizione di fallimento in quanto dipende dal servizio specifico. analizzato; Template HTML su cui si effettua scraping: template-homepage.html, template-servizi.html, template-dettaglio-servizio.html
Requisiti tecnici: In homepage, all’interno di un tag <a>, deve esserci l’attributo data-element="all-services" che riporta alla pagina con il listato servizi. All’interno della pagina “Servizi” i servizi devono essere degli <a> con l’attributo data-element="service-link" che riportano al dettaglio servizio. Nella pagina dettaglio servizio deve esserci un tag <a> che contiene l’attributo data-element="appointment-booking". Il tag può essere contenuto in altri (esempio: <li>).
Esempio:
<li>
<a href="#" data-element="appointment-booking">
<svg class="icon icon-primary icon-sm">
</svg><span>Prenota appuntamento</span>
</a>
</li>
5.9. Criterio C.SI.2.2¶
Condizioni di successo: i contatti dell’ufficio preposto all’erogazione del servizio sono presenti in tutte le schede servizio.
Modalità di verifica: tramite ricerca di uno specifico attributo data-element, viene verificata la presenza della voce «Contatti» all’interno dell’indice di una scheda servizio selezionata casualmente.
Template HTML su cui si effettua scraping: template-homepage.html, template-servizi.html, template-dettaglio-servizio.html
Requisiti tecnici: In homepage, all’interno di un tag <a>, deve esserci l’attributo data-element="all-services" che riporta alla pagina con il listato servizi. All’interno della pagina servizi, i servizi devono essere degli <a> con l’attributo data-element="service-link" che riportano al dettaglio servizio. All’interno della pagina di dettaglio servizio deve esserci un attributo data-element="page-index" – deve essere un tag <ul> – con l’attributo che contiene altri <li> che contenga la label “Contatti”.
Esempio:
<ul data-element="page-index">
<li>
<a>
<span>Contatti</span>
</a>
</li>
5.10. Criterio C.SI.2.3¶
Condizioni di successo: nel footer del sito è presente un link contenente le espressioni «FAQ» oppure «domande frequenti» che invia a una pagina di domande frequenti.
Modalità di verifica: tramite ricerca di uno specifico attributo data-element, viene verificata la presenza del link nel footer 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.
Template HTML su cui si effettua scraping: template-homepage.html
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>
5.11. Criterio C.SI.2.4¶
Condizioni di successo: nel footer del sito è presente un link per la segnalazione di un disservizio che contenga le espressioni «disservizio» oppure «segnala disservizio» oppure «segnalazione disservizio».
Modalità di verifica: tramite ricerca di uno specifico attributo data-element, viene verificata la presenza del link nel footer 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.
Template HTML su cui si effettua scraping: template-homepage.html
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>
5.12. Criterio C.SI.2.5¶
Condizioni di successo: la funzionalità per valutare la chiarezza informativa è presente su tutte le pagine di primo e secondo livello del sito;
Modalità di verifica: tramite ricerca di uno specifico attributo data-element, viene verificata la presenza del componente su una pagina di primo livello selezionata casualmente e su una pagina di secondo livello selezionata casualmente a partire dalla pagina «Servizi».
Template HTML su cui si effettua scraping: template-homepage.html, template-servizi.html, template-servizi-servizio.html
Requisiti tecnici: In homepage all’interno del menù le voci di primo livello devono essere degli <a> con i seguenti tag: data-element="management", data-element="all-services", data-element="news", data-element="live". L’href deve riportare alle pagine di primo livello in cui deve esserci un componente (un wrapper) come un <div> che contiene l’attributo data-element="feedback".
L’href della voce Servizi deve riportare alla pagina template-servizi.html. All’interno della pagina, sotto la voce “Categoria” le card devono contenere degli <a> con l’attributo data-element="service-category-link" che riportano alla pagina di secondo livello servizio in cui deve esserci un componente (un wrapper) come un <div> che contiene l’attributo data-element="feedback".
Esempi:
<a href=”/template-servizi.html" data-element="all-services">Servizi</a>
<a data-element="service-category-link" href="/template-servizi-servizio.html">
<h3 class="card-title t-primary title-xlarge">Agricoltura e pesca</h3>
</a>
<div data-element="feedback">
<div>
<div>
<h2>Quanto sono utili le informazioni in questa pagina?</h2>
</div>
5.13. Criterio C.SI.3.1¶
Condizioni di successo: il sito presenta solo cookie idonei come definito dalla normativa.
Modalità di verifica: viene verificato che il dominio dei cookie identificati sia corrispondente al dominio del sito web. Se nella pagina analizzata non vengono rilevati cookie non verrà generata una tabella di risultati.
5.14. Criterio C.SI.3.2¶
Condizioni di successo: il sito presenta una voce nel footer che riporta alla dichiarazione di accessibilità di AGID valida.
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 che sia quella contenente la dichiarazione di accessibilità (il link deve iniziare con «https://form.agid.gov.it/view/»).
Template HTML su cui si effettua scraping: template-homepage.html
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>
5.15. Criterio C.SI.3.3¶
Condizioni di successo: il sito presenta una voce nel footer che riporta all’informativa privacy.
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.
Template HTML su cui si effettua scraping: template-homepage.html
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>
5.16. Criterio C.SI.5.1¶
Condizioni di successo: il sito utilizza un certificato https valido e non obsoleto secondo le raccomandazioni AGID.
Modalità di verifica: viene verificato che il certificato https del sito sia valido e attivo.
Template HTML su cui si effettua scraping: template-homepage.html
Requisiti tecnici: In homepage all’interno di un tag <a> deve esserci l’attributo data-element="personal-area-login".
Esempio:
<a href="#" data-element=”personal-area-login”>
<span> Accedi all'area personale</span>
</a>
5.17. Criterio C.SI.5.2¶
Condizioni di successo: il sito comunale è raggiungibile senza necessità di inserimento del sottodominio “www.” e utilizza il sottodominio «comune.» immediatamente seguito da uno dei domini istituzionali per il Comune presente nell’Elenco Nomi a Dominio Riservati Per i Comuni Italiani (es: comune.anzio.roma.it) o dal nome del Comune se coincidente con il nome del capoluogo di provincia (es: comune.roma.it).
Modalità di verifica: viene verificato che il dominio utilizzato dal sito sia presente nell’Elenco Nomi a Dominio Riservati per i Comuni Italiani o sia un nome di capoluogo di provincia e che immediatamente prima di questo sia utilizzato il sottodominio «comune.».
Template HTML su cui si effettua scraping: template-homepage.html
Requisiti tecnici: In homepage all’interno di un tag <a> deve esserci l’attributo data-element="personal-area-login".
Esempio:
<a href="#" data-element=”personal-area-login”>
<span> Accedi all'area personale</span>
</a>
5.18. Raccomandazione R.SI.1.1¶
Condizioni di successo: le voci delle schede servizio presentano tutti i metatag richiesti dal modello.
Modalità di verifica: tramite ricerca di uno specifico attributo data-element, viene verificata la presenza e correttezza dei metatag indicati nella sezione «Dati strutturati e interoperabilità» della documentazione in una scheda servizio selezionata casualmente.
Template HTML su cui si effettua scraping: template-homepage.html, template-servizi.html, template-dettaglio-servizio.html
Requisiti tecnici: In homepage all’interno di un tag <a> deve esserci l’attributo data-element="all-services" che riporta alla pagina con il listato servizi. All’interno della pagina servizi i servizi devono essere degli <a> con l’attributo data-element="service-link" che riportano al dettaglio servizio. All’interno dell’HTML della pagina 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": "P1Y",
"serviceOperator": {
"name": "Lorem"
},
"areaServed": {
"name": "Lorem ipsum"
},
"audience": {
"name": ""
},
"availableChannel": {
"serviceUrl": "Lorem ipsum",
"serviceLocation": {
…
}
}
}