Test di un'applicazione Oracle JET per l'accesso facilitato: ispezione visiva

Introduzione

La sezione Web Content Accessibility Guidelines (WCAG) 2.2 contiene più di sessanta criteri per la creazione di un'applicazione Web accessibile. In questo percorso di apprendimento, ci concentreremo su un sottoinsieme di questi criteri che si concentra principalmente su:

Questo tutorial si concentra su dove inizia il test di un'app: l'ispezione visiva. Questa esercitazione e le due successive, Test di un'applicazione Oracle JET per l'accesso facilitato solo da tastiera e Esecuzione della convalida del lettore di schermo su un'applicazione Oracle JET, illustrano le procedure di test necessarie. È necessario completare queste tre esercitazioni di test in ordine prima di continuare il percorso di apprendimento.

Il primo passo per valutare l'accessibilità di un'app Web è eseguire una revisione visiva dell'app. Durante la revisione, cercare i seguenti elementi:

Obiettivi

In questa esercitazione verrà descritto come eseguire un test di accessibilità manuale di un'applicazione Web, nonché come la struttura di audit Oracle JavaScript può essere utile per la ricerca di problemi di accessibilità.

Prerequisiti

Task 1: Preparazione dell'applicazione Starter

In questo percorso di apprendimento viene utilizzata un'app iniziale di Oracle JET 13.0 Nav Drawer.

  1. Nella posizione nel file system in cui si desidera che l'applicazione risieda, estrarre il file scaricato ACCLearningPath.zip in una cartella ACCLearningPath.

  2. Aprire una finestra di terminale e verificare che sia installata la versione più recente dell'interfaccia a riga di comando (CLI, Command-Line Interface) di Oracle JET (è richiesta la release 13.0 o successiva).

    $ ojet --version

    Se viene visualizzata la versione più recente dell'interfaccia della riga di comando di Oracle JET, l'installazione è corretta. In caso contrario, eseguire la reinstallazione utilizzando il comando npm install per la piattaforma.

    • Per Windows:

       $ npm install -g @oracle/ojet-cli

    • Per i sistemi Mac e Linux:

       $ sudo npm install -g @oracle/ojet-cli

      Al termine dell'installazione, nell'interfaccia CLI di Oracle JET viene visualizzato un riepilogo di tutte le modifiche.

  3. Passare alla directory ACCLearningPath e ripristinare gli strumenti dell'applicazione Oracle JET.

    $ ojet restore

  4. Eseguire l'applicazione.

    $ ojet serve

    Gli strumenti Oracle JET eseguono l'applicazione in un browser Web locale. Il browser si apre alla pagina Introduzione dell'app, con la scheda Panoramica caricata. L'app è pronta per l'uso.

    Lascia aperta la finestra del terminale e il browser in modo che l'app si aggiorni automaticamente con qualsiasi modifica apportata.

Task 2: Audit dell'applicazione

Oracle JET Audit Framework (JAF) è una utility della riga di comando e un'API di supporto progettata per eseguire l'audit dei file di un'applicazione Oracle JET, in base alle opzioni di runtime che trova in un file di configurazione. I messaggi diagnostici restituiti dall'audit di un'applicazione derivano da set di regole integrati specifici della versione della release JET dell'applicazione. Tuttavia, il framework di audit è estensibile e gli utenti possono estendere le proprie capacità scrivendo regole personalizzate.

Gli audit JAF di Oracle possono aiutare a identificare accessibilità e altri problemi nelle tue app, anche se non troveranno tutti i problemi di accessibilità che affronteremo nell'app ACCLearningPath. Ecco perché, oltre ad eseguire l'audit dell'applicazione, è necessario seguire la procedura e i passi descritti in questo percorso di apprendimento Identifica problemi di accesso facilitato per trovare e risolvere i problemi di accessibilità. Un audit JAF dovrebbe essere eseguito fin dall'inizio per rendere l'app di esempio accessibile, al fine di identificare potenziali problemi nella tua app prima di iniziare il tuo lavoro. Per ulteriori informazioni su Oracle JAF, vedere Uso ed estensione di Oracle JET Audit Framework.

Scaricare e utilizzare Oracle JAF in modalità CLI per verificare la presenza di problemi di accessibilità.

  1. Utilizzare npm per installare l'interfaccia CLI Oracle JAF.

    Aprire una finestra di terminale e controllare le versioni installate di Oracle JAF.

    $ ojaf -v

    Se non è installato o se la versione di JAF non è la release corrente, disinstallare le versioni precedenti e installare la versione più recente.

    $ npm uninstall -g @oracle/oraclejet-audit

    $ npm install -g @oracle/oraclejet-audit

  2. Passare alla directory ACCLearningPath dell'applicazione e utilizzare il flag della riga di comando --init per inizializzare una configurazione JAF predefinita.

    $ ojaf --init

    Lo scaffold degli strumenti rappresenta il file di configurazione JAF predefinito oraclejafconfig.json nella directory ACCLearningPath e definisce le impostazioni di configurazione predefinite basate sul file di configurazione dell'applicazione JET oraclejetconfig.json, anch'esso situato nella directory radice dell'applicazione.

  3. Aprire oraclejafconfig.json nell'editor e assicurarsi che il valore della proprietà jetVer sia corretto per la versione di JET su cui si desidera eseguire l'audit (ad esempio, 13.0, 13.1 e così via).

    "builtinJetRules": true,
   "jetVer": "13.0",

    È possibile personalizzare l'audit dell'applicazione aggiungendo o modificando le proprietà JAF nel file oraclejafconfig.json. Una descrizione completa delle opzioni di configurazione è disponibile in Informazioni sulle proprietà dei file di configurazione Oracle JAF.

  4. Prima di eseguire il controllo dell'applicazione per la prima volta, è possibile confermare la configurazione predefinita per i file che JAF eseguirà il controllo utilizzando il flag della riga di comando --dryrun.

    $ ojaf --dryrun

    Un'esecuzione manuale non esegue l'audit dell'applicazione, ma conferma i file da sottoporre ad audit in base alle impostazioni di configurazione JAF correnti.

    Nota: è possibile ottenere un elenco completo dei flag della riga di comando immettendo il comando ojaf --help.

  5. Eseguire un audit dell'applicazione immettendo il comando per richiamare la utility di audit JAF.

    $ ojaf

  6. Quando si esegue l'audit, Oracle JAF ricerca nella directory oraclejafconfig.json e crea un report di audit.

    Il report elenca i problemi di violazione delle regole rilevati nell'app e le relative posizioni nei file dell'app. Inoltre, il report include un riepilogo dei problemi riscontrati e delle relative severità, delle regole controllate e dei file controllati.

    JAF - Report audit

    Nell'elenco dei problemi del report di audit, tenere presente il problema blocker a livello di severità trovato nel file departments.html: 'aria-label' or 'aria-labelledby' missing on <oj-film-strip>.

    Manca una proprietà aria-label dal componente film-strip nell'app, che può impedire a un lettore di schermo di accedere all'identità del componente. Questo è uno dei problemi di accessibilità che affronteremo in tutorial successivi.

Questa è la fine della discussione su Oracle JAF in questo percorso di apprendimento. Al termine dell'audit dell'applicazione, ricordarsi di eliminare la cartella jaftmp@ e il file oraclejafconfig.json dalla directory ACCLearningPath.

Task 3: Esamina struttura pagina

La struttura della pagina è il punto di partenza logico per l'ispezione visiva di un'app. Le intestazioni HTML forniscono un profilo del contenuto della pagina senza concentrarsi su specifiche. I lettori di schermo forniscono collegamenti per consentire agli utenti di spostarsi rapidamente tra le intestazioni contrassegnate correttamente.

Utilizzare l'app ACCLearningPath per rivedere la struttura della pagina.

  1. Nell'app in esecuzione, determinare se le sezioni delle pagine sono identificate dalle intestazioni.

    Il testo delle intestazioni è più grande o ha uno stile diverso rispetto al testo normale nella pagina. Creare intestazioni HTML vere utilizzando i tag <h1> tramite <h6>.

  2. Determinare se il testo di ciascuna intestazione descrive in modo adeguato il contenuto associato.

    Esaminare la scheda Panoramica della pagina Introduzione. Il terzo pannello all'estrema destra ha l'intestazione Spaziatura testo. Il contenuto di questo pannello riguarda la regolazione della spaziatura del testo. Questa voce costituisce pertanto un esempio di un'intestazione sufficientemente descrittiva.

  3. Utilizzare la scheda Elementi DevTools di Chrome per determinare se le intestazioni sono vere intestazioni HTML o testo progettato per assomigliarle.

    • Fare clic con il pulsante destro del mouse sull'intestazione Pagina Introduzione e selezionare Ispeziona dal menu di scelta rapida per visualizzare la struttura Modello oggetto documento (DOM) della pagina.

      L'elemento evidenziato nella struttura DOM, visualizzato nel riquadro DevTools Elementi, utilizza il metodo corretto per creare un'intestazione HTML.

       <h4>The Introduction Page</h4>

    • Chiudere DevTools, quindi fare clic con il pulsante destro del mouse sull'intestazione La pagina Risorse e selezionare Ispeziona dal menu di scelta rapida.

      L'elemento evidenziato in questa struttura DOM ha uno stile testo simile a un'intestazione HTML.

       <span class="h4Style">The Resources Page</span>

      Un lettore di schermo non rileverà questo codice come intestazione. Gli utenti del lettore di schermo spesso navigano in una pagina in base alle intestazioni e il testo con stile simile alle intestazioni viene ignorato. Nei passaggi seguenti, si correggerà l'intestazione codificata in modo errato. Lascia l'app in esecuzione e il browser aperto per osservare come le seguenti modifiche influiscono sull'app.

  4. Passare alla cartella ACCLearningPath/src/js/views e aprire overview.html nell'editor di codice.

  5. Individuare il tag <span class="h4Style">.

  6. Sostituire il tag <span class="h4Style"> con un tag <h4>.

  7. Sostituire il tag </span> con un tag </h4>.

  8. Salvare il file e visualizzare le modifiche apportate all'applicazione nel browser.

Task 4: Esamina titolo pagina

Un'ispezione visiva dell'app include una valutazione dell'efficacia del titolo della pagina.

Navigare attraverso l'app iniziale in esecuzione ed esaminare ogni titolo della pagina.

  1. Determina se il titolo della pagina identifica chiaramente la pagina, la scheda e il nome dell'applicazione.

  2. Determinare se il titolo della pagina cambia durante la navigazione tra le pagine o tra le schede della pagina Introduzione.

    Il titolo della pagina dovrebbe essere modificato per ogni nuova pagina o scheda visualizzata. Ad esempio, quando si seleziona Introduzione nel menu principale in alto a destra della pagina, il titolo deve leggere "Introduzione" e quando si seleziona Risorse, il titolo deve leggere "Risorse".

    Il titolo della pagina Introduzione dovrebbe includere sia la parola "Introduzione" che il nome della scheda attualmente selezionata. Quando si seleziona una scheda diversa dalla barra delle schede, il titolo dovrebbe cambiare per riflettere la nuova scheda selezionata.

    • Introduzione - Panoramica
    • Introduzione - Organizzazione
    • Introduzione - Dipendenti
    • Introduzione - Reparti

    Allo stesso modo, il titolo della pagina Risorse dovrebbe includere la parola "Risorse".

    Si noterà che il titolo della pagina non cambia quando si naviga tra pagine o schede. Questo problema verrà risolto in un'esercitazione successiva.

Quando ci sono contenuti ripetuti come collegamenti di navigazione e loghi nell'intestazione di pagina di un'applicazione Web, includere un collegamento di navigazione skip. Gli standard di settore suggeriscono che il collegamento di navigazione di salto dovrebbe essere nascosto dalla vista fino a quando non è accessibile tramite tabulazione.

Verifica l'esistenza del collegamento di navigazione skip nell'app in esecuzione nel browser.

  1. Nell'app, premere <Ctrl+L> per spostare lo stato attivo sulla barra degli indirizzi.

  2. Premere <Tab> per visualizzare e ricevere lo stato attivo del collegamento di navigazione skip.

    Poiché non viene visualizzato alcun collegamento di navigazione skip, lo stato attivo passa al primo elemento attivabile nella pagina: john.hancock@oracle.com nel menu utente in alto a destra della pagina. Gli elementi attivabili ("focusable") sono definiti in modo più dettagliato nell'esercitazione Accessibilità solo tastiera.

    Durante il test è stato determinato che per l'applicazione iniziale non è stato implementato alcun collegamento di navigazione skip.

    Esistono tre passaggi per aggiungere il collegamento di navigazione skip:

    1. Aggiungere il collegamento al file index.html.
    2. Aggiungere una classe di stile al file app.css per nascondere il collegamento ignora navigazione fino a quando non viene eseguito il tabulazione.
    3. Aggiungere gli ancoraggi di destinazione ai file intro.html e resources.html.

Aggiornare il file index.html

Il file index.html definisce la struttura generale dell'applicazione Web Oracle JET. Il collegamento di navigazione skip deve essere inserito in questa pagina.

  1. Passare alla directory ACCLearningPath/src e aprire index.html in un editor di codice.

  2. Individuare il tag <body>.

    <body class="oj-web-applayout-body">
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

  3. Inserire un collegamento con destinazione #main tra il tag <body> e il commento che lo segue.

    <body class="oj-web-applayout-body">
   <a class="hideSkipNav" href="#main">Skip to main content</a>
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

    La classe hideSkipNav renderà invisibile il collegamento finché l'utente non inizia nella parte superiore della pagina e non preme <Tab>.

  4. Salvare e chiudere index.html. Il file dovrebbe avere un aspetto simile a index-html.txt.

Aggiornare il file app.css

Abbiamo fatto riferimento alla classe di stile hideSkipNav nel file index.html. Ora dobbiamo definirlo in app.css. Tutte le definizioni di stile personalizzate si trovano in questo file.

  1. Passare alla cartella ACCLearningPath/src/css e modificare app.css.

  2. Aggiungere la classe e le proprietà di stile .hideSkipNav alla fine del file.

    .hideSkipNav { 
   position: absolute;
   left: -1000px; }

.hideSkipNav:focus {
   position: unset;
   left: 0px; }

  3. Salvare e chiudere app.css. Il file deve avere un aspetto simile a app-css.txt.

Aggiornare i file HTML delle pagine

Poiché la destinazione del collegamento di navigazione di salto deve trovarsi nella parte superiore del contenuto principale di ogni pagina, aggiungere i tag di ancoraggio di destinazione alle pagine Introduzione e Risorsa.

  1. Passare alla cartella ACCLearningPath/src/js/views e modificare il file intro.html.

  2. Individuare <div> con la classe oj-hybrid-padding.

    <div class="oj-hybrid-padding">
   <div id="mainContainer">

  3. Inserire il tag di ancoraggio e l'intestazione h2 tra i due tag <div>.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Introduction</h2>
</a>
   <div id="mainContainer">

    Il codice aggiunto fornisce non solo la destinazione del collegamento di navigazione skip, ma anche un'intestazione h2 per migliorare la struttura della pagina.

  4. Salvare e chiudere intro.html. L'aspetto del file dovrebbe essere simile a quello di intro-html.txt.

  5. Aprire resources.html nell'editor di codice e individuare <div> con la classe oj-hybrid-padding.

    <div class="oj-hybrid-padding">
   <ul>

  6. Inserire il tag di ancoraggio e l'intestazione h2 tra i tag <div> e <ul>.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Resources</h2>
</a>
   <ul>

  7. Salvare e chiudere resources.html. Il file deve avere un aspetto simile a quello di resources-html.txt.

  8. Nell'app in esecuzione, premere <Ctrl+L> per spostare lo stato attivo sulla barra degli indirizzi.

  9. Fare clic su <Tab> per visualizzare il collegamento di navigazione skip e ricevere lo stato attivo.

  10. Premere <Enter> per attivare il collegamento di navigazione Ignora.

    Il focus passa quindi al contenuto principale della pagina.

    Dopo aver testato la funzionalità del collegamento di navigazione di salto, passare all'elemento successivo dell'ispezione visiva.

Task 6: Controllo dell'uso di colore e posizione

I pulsanti sono parte integrante delle direzioni che spostano un utente da una pagina o da un'azione all'altra. Gli sviluppatori migliorano l'aspetto e la funzionalità di una pagina con l'uso di pulsanti colorati. "Premere il pulsante verde per continuare" è un'istruzione comune. Tuttavia, senza un'adeguata etichettatura, gli utenti ipovedenti non possono seguire queste e simili istruzioni.

Il pannello centrale della pagina Panoramica contiene una barra degli strumenti con tre pulsanti colorati, nonché un paio di istruzioni per premere i pulsanti in base al colore e alla posizione. Un utente cieco o daltonico non è in grado di distinguere tra i pulsanti perché non hanno etichette o altre caratteristiche distintive. Questa serie di pulsanti non soddisfa i criteri di successo 1.3.3 e 1.4.1.

Uso delle istruzioni di colore

Ciascuno dei pulsanti colorati nel pannello centrale deve avere un'etichetta di testo associata. Le seguenti modifiche aggiungeranno nomi di colore come etichette ai pulsanti.

  1. Passare alla cartella ACCLearningPath/src/js/views e modificare il file overview.html.

  2. Individuare il set di tre elementi oj-button.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">
</oj-button>

  3. Modificare i pulsanti nel codice per creare gli identificatori di colore.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">Green
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">Red
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">Purple
</oj-button>

  4. Salvare overview.html e verificare che i pulsanti dispongano ora di etichette di testo appropriate.

    Il file dovrebbe avere un aspetto simile a quello di overview-html.txt.

Task 7: Verifica leggibilità

La fase finale dell'ispezione visiva è specifica per gli utenti con scarsa visibilità. Determinare se la regolazione della spaziatura tra linee, parole e caratteri o la modifica del livello di zoom della pagina aumenta o diminuisce la leggibilità.

Useremo la pagina Panoramica per illustrare questi criteri e verificare la spaziatura del testo e lo zoom nell'app.

Verifica spaziatura testo e zoom

  1. Nell'app in esecuzione, esaminare il pannello più a destra della pagina, denominato Spaziatura testo. Il pannello contiene due sezioni. Confrontare il testo in entrambe le sezioni per assicurarsi che tutto il testo sia presente.

    La parte superiore del pannello contiene testo con spaziatura normale. La parte inferiore contiene lo stesso testo con spaziatura aumentata di caratteri, parole e righe.

    Se nessuno dei caratteri della sezione inferiore è distorto, ritagliato o sovrapposto, la pagina soddisfa il criterio di successo 1.4.12.

  2. Aumentare il livello di zoom del browser al 200%. Fare clic sull'icona di ingrandimento della lente nella barra degli strumenti, quindi fare clic sul segno + per aumentare lo zoom.

    Se tutto il testo è leggibile e il testo viene avvolto correttamente all'interno di ogni pannello, la pagina soddisfa il criterio di successo 1.4.4 con ingrandimento al 200%.

    • Il riflusso del criterio di riuscita 1.4.10 afferma: "Il contenuto può essere presentato senza perdita di informazioni o funzionalità e senza richiedere lo scorrimento in due dimensioni per:
      • contenuto a scorrimento verticale con una larghezza equivalente a 320 pixel CSS;
      • Contenuto a scorrimento orizzontale a un'altezza equivalente a 256 pixel CSS. Ad eccezione delle parti del contenuto che richiedono un layout bidimensionale per l'uso o il significato.

    La pagina dovrebbe riformattare per richiedere lo scorrimento in una sola direzione. Una pagina viene scorrevole orizzontalmente o verticalmente, ma non in entrambe le direzioni. Il criterio di successo 1.4.10 semplifica l'utilizzo delle pagine.

  3. Aumenta lo zoom al 400%.

  4. Esaminare la pagina per l'aspetto delle barre di scorrimento. Se vengono visualizzate sia le barre di scorrimento orizzontali che quelle verticali, la pagina non soddisfa questo criterio.

La fase di test iniziale è completa.

Passo successivo

Passare all'esercitazione successiva in questo modulo.

Questa esercitazione fa parte del modulo Identifica problemi di accesso facilitato.

È possibile tornare alla pagina principale del percorso di apprendimento per l'accesso facilitato per accedere a tutti i moduli sull'accesso facilitato.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di formazione gratuiti sul canale YouTube di Oracle Learning. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare Oracle Help Center.