Test di un'applicazione Oracle JET per l'accessibilità: ispezione visiva

Introduzione

In WCAG (Web Content Accessibility Guidelines) 2.1 è disponibile una serie di oltre sessanta criteri di successo per la creazione di un'applicazione Web accessibile. In questo percorso di apprendimento, ci concentreremo su un sottoinsieme di questi criteri che si concentrano principalmente su:

Questo tutorial si concentra su dove inizia il test di un'app: l'ispezione visiva. Questa esercitazione e le due seguenti, Test di un'applicazione Oracle JET per l'accessibilità solo tastiera e Esecuzione della convalida del lettore di schermo su un'applicazione Oracle JET, guideranno l'utente nei passi di test necessari. È necessario completare queste tre esercitazioni di test prima di continuare il percorso di apprendimento.

Il primo passo nella valutazione di un'applicazione Web per l'accesso facilitato consiste nell'eseguire una revisione visiva dell'applicazione. Durante la revisione, cercare i seguenti elementi:

Obiettivi

In questa esercitazione viene illustrato come eseguire un test di accessibilità manuale di un'applicazione Web e come Oracle JavaScript Audit Framework può facilitare la ricerca di problemi di accessibilità.

Prerequisiti

Task 1: Preparare l'applicazione iniziale

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

  1. Nella posizione del file system in cui si desidera far risiedere l'applicazione, estrarre la cartella ACCLearningPath.zip scaricata in una cartella ACCLearningPath.

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

    $ ojet --version

    Se viene visualizzata l'ultima versione dell'interfaccia CLI di Oracle JET, l'installazione è corretta. In caso contrario, reinstallare utilizzando il comando npm install per la piattaforma in uso.

    • Per Windows:

      $ npm install -g @oracle/ojet-cli

    • Per sistemi Mac e Linux:

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

      Al termine dell'installazione, l'interfaccia CLI di Oracle JET mostra un riepilogo di tutte le modifiche.

  3. Andare 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'applicazione, con la scheda Panoramica caricata. L'applicazione è pronta per l'uso.

    Lasciare aperta la finestra del terminale e il browser in modo che l'applicazione si aggiorni automaticamente con le modifiche apportate.

Task 2: Audit dell'applicazione

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

Gli audit JAF Oracle consentono di identificare l'accesso facilitato e altri problemi nelle applicazioni, anche se non troveranno tutti i problemi di accessibilità che verranno risolti nell'applicazione ACCLearningPath. Ecco perché, oltre ad eseguire l'audit dell'app, è necessario seguire la procedura e i passaggi descritti in questo percorso di apprendimento Identifica problemi di accesso facilitato per trovare e risolvere i problemi di accesso facilitato. L'audit JAF deve essere eseguito all'inizio per rendere accessibile l'applicazione di esempio, al fine di identificare potenziali problemi nell'applicazione prima di iniziare il lavoro. Per ulteriori informazioni su Oracle JAF, vedere Uso ed estensione della struttura di audit Oracle JET.

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 del terminale e controllare le versioni installate di Oracle JAF.

    $ ojaf -v

    Se non è installato o se la versione di JAF in uso 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 strumento impila il file di configurazione JAF predefinito oraclejafconfig.json nella directory ACCLearningPath e definisce le impostazioni di configurazione predefinite in base al file di configurazione dell'applicazione JET oraclejetconfig.json, che si trova anche 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 per la quale 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 di Oracle JAF.

  4. Prima di eseguire l'audit dell'applicazione per la prima volta, è possibile confermare la configurazione predefinita per i file che JAF eseguirà l'audit 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 a audit in base alle impostazioni di configurazione JAF correnti.

    Nota: è possibile ottenere una lista completa dei flag della riga di comando immettendo il comando ojaf --help.

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

    $ ojaf

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

    Il report elenca i problemi di interruzione delle regole rilevati nell'applicazione e le relative posizioni nei file dell'applicazione. Il report include inoltre un riepilogo dei problemi rilevati e delle relative severità, delle regole sottoposte ad audit e dei file sottoposti ad audit.

    Report audit JAF

    Descrizione dell'immagine jaf-report.png

    Nell'elenco dei problemi del report di audit, prendere nota del 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 nel componente film-strip dell'applicazione, che può impedire a un lettore di schermo di accedere all'identità del componente. Questo è uno dei problemi di accesso facilitato che verranno affrontati nelle esercitazioni successive.

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

Task 3: Esaminare la struttura della pagina

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

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

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

    Il testo dei titoli ha dimensioni maggiori o stili diversi rispetto al testo normale nella pagina. Creare intestazioni HTML vere utilizzando i tag da <h1> a <h6>.

  2. Determinare se il testo di ogni titolo descrive adeguatamente il contenuto associato.

    Esaminare la scheda Panoramica della pagina Introduzione. Il terzo pannello all'estrema destra contiene l'intestazione Spaziatura testo. Il contenuto di questo pannello riguarda la regolazione della spaziatura del testo. Questo titolo costituisce pertanto un esempio di un titolo sufficientemente descrittivo.

  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 DOM (Document Object Model) 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 Pagina Risorse e selezionare Ispeziona dal menu di scelta rapida.

      L'elemento evidenziato in questa struttura DOM presenta uno stile di 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 uno stile simile alle intestazioni viene ignorato. Nei passaggi seguenti, si corregge l'intestazione con codice errato. Lasciare aperta l'applicazione e il browser per osservare l'impatto delle modifiche riportate di seguito sull'applicazione.

  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: rivedere il titolo della pagina

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

Consente di esplorare l'applicazione iniziale in esecuzione e osservare il titolo di ogni 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 quando ci si sposta tra le pagine o tra le schede della pagina Introduzione.

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

    Il titolo della pagina Introduzione deve 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 essere modificato in modo da riflettere la scheda appena selezionata.

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

    Analogamente, il titolo della pagina Risorse deve includere la parola "Risorse".

    Il titolo della pagina non cambia quando ci si sposta tra pagine o schede. Il problema verrà risolto in un'esercitazione successiva.

In presenza di contenuto ripetuto, ad esempio collegamenti di navigazione e logo nell'intestazione della pagina di un'applicazione Web, includere un collegamento skip nav. Gli standard di settore indicano che il collegamento skip nav deve essere nascosto dalla visualizzazione fino a quando non vi si accede tramite tabbing.

Test dell'esistenza del collegamento skip nav nell'applicazione 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 dal collegamento Ignora navigazione.

    Poiché non viene visualizzato alcun collegamento di tipo Ignora navigazione, lo stato attivo passa al primo elemento che può essere attivato nella pagina: john.hancock@oracle.com nel menu utente nella parte superiore destra della pagina. Gli elementi che possono essere attivati ("focusable") sono definiti con maggiore dettaglio nell'esercitazione Accesso facilitato solo per tastiera.

    Durante il test è stato rilevato che per l'applicazione iniziale non è stato implementato alcun collegamento skip nav.

    Per aggiungere il collegamento skip nav, è necessario eseguire le operazioni riportate di seguito.

    1. Aggiungere il collegamento al file index.html.
    2. Aggiungere una classe di stile al file app.css per nascondere il collegamento di salto della navigazione fino a quando non si esegue il tabulazione.
    3. Aggiungere le ancore di destinazione ai file intro.html e resources.html.

Aggiornare il file index.html

Il file index.html definisce la struttura di overarching dell'applicazione Web Oracle JET. In questa pagina è necessario posizionare il collegamento Ignora navigazione.

  1. Andare 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 la relativa destinazione come #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à il collegamento invisibile finché l'utente non inizia nella parte superiore della pagina e preme <Tab>.

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

Aggiornare il file app.css

È stato 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é il target del collegamento skip nav deve trovarsi nella parte superiore del contenuto principale di ogni pagina, aggiungere i tag ancoraggio target sia nella pagina Introduzione che nella pagina Risorsa.

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

  2. Individuare il file <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 skip nav, ma anche un'intestazione h2 per migliorare la struttura della pagina.

  4. Salvare e chiudere intro.html. Il file deve avere un aspetto simile a 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 resources-html.txt.

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

  9. Premere <Tab> per far sì che il collegamento skip nav venga visualizzato e venga attivato.

  10. Premere <Enter> per attivare il collegamento skip nav.

    L'elemento attivo viene quindi spostato sul contenuto principale della pagina.

    Dopo aver testato la funzionalità del collegamento skip nav, passare all'elemento successivo dell'ispezione visiva.

Task 6: Controllo dell'utilizzo di colore e posizione

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

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 cieco non è in grado di distinguere tra i pulsanti perché non ha etichette o altre caratteristiche distintive. Questo set di pulsanti non soddisfa i criteri di operazione riuscita 1.3.3 e 1.4.1.

Istruzioni per l'uso dei colori

Descrizione dell'immagine color_buttons.png

A ciascun pulsante colorato nel pannello centrale deve essere associata un'etichetta di testo. Le modifiche seguenti 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 abbiano etichette di testo appropriate.

    Il file deve avere un aspetto simile a overview-html.txt.

Task 7: Verifica leggibilità

La fase finale dell'ispezione visiva è specifica per gli utenti a bassa visione. Determinare se regolare la spaziatura di riga, parola e carattere o modificare il livello di zoom della pagina aumenta o diminuisce la leggibilità.

Verrà utilizzata la pagina Panoramica per illustrare questi criteri e verificare la spaziatura del testo e lo zoom nell'applicazione.

Verifica spaziatura testo e zoom

Descrizione dell'immagine text_spacing.png

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

    La parte superiore del pannello contiene testo con spaziatura normale. La parte inferiore contiene lo stesso testo con caratteri, parole e spaziature di riga aumentati.

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

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

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

    • In Criterio di successo 1.4.10 Reflow si afferma: "I contenuti possono essere presentati senza perdita di informazioni o funzionalità e senza dover scorrere in due dimensioni per:
      • contenuto di scorrimento verticale a larghezza equivalente a 320 pixel CSS;
      • 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 scartata orizzontalmente o verticalmente, ma non in entrambe le direzioni. Il criterio di successo 1.4.10 semplifica l'utilizzo delle pagine.

  3. Aumentare lo zoom al 400%.

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

La fase di test iniziale è stata completata. L'esercitazione successiva all'interno di questo percorso di apprendimento è Test di un'applicazione Oracle JET per l'accessibilità solo con tastiera.

Altre risorse di apprendimento

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

Per la documentazione sul prodotto, visitare Oracle Help Center.