Docs Italia beta

Documenti pubblici, digitali.

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

6. 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).

6.1. 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>

6.2. 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>

6.3. 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).

6.4. 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>

6.5. 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>

6.6. 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>

6.7. 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>

6.9. 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.

6.10. 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>

6.11. 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>

6.12. 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>

6.13. 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.

6.14. 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.