Eseguire il test di un'applicazione Oracle JET per l'accesso facilitato solo da tastiera

Introduzione

Questa è la seconda esercitazione del percorso di apprendimento Identifica problemi di accesso facilitato.

La Web Content Accessibility Guidelines (WCAG) 2.2 delinea molti dei criteri di successo per la creazione di un'applicazione Web accessibile. Questa esercitazione si concentra sui criteri che riguardano l'utilizzo di sola tastiera.

Un'app accessibile solo tramite tastiera può essere utilizzata con dispositivi di input alternativi per persone con mobilità limitata o incapacità di manipolare un mouse. Quando le persone possono usare una tastiera, Internet è a portata di mano.

Obiettivi

In questo tutorial, imparerai come eseguire un test di sola tastiera di un'app web.

Prerequisiti

Task 1: Preparazione per test di accessibilità solo da tastiera

L'ispezione visiva fornisce una panoramica della struttura e delle funzionalità di base di una pagina accessibile. Il test di sola tastiera è al centro del test di accessibilità manuale; offre allo sviluppatore l'opportunità di interagire con l'app dal punto di vista di un utente disabile. Il sottoinsieme dei criteri di successo WCAG 2.2 su cui si concentra questo tutorial coinvolge diversi concetti specifici.

I criteri di successo menzionati all'inizio di questa sezione affrontano indirettamente il concetto di elementi focalizzabili, quindi è necessario definire un paio di termini.

Con questi concetti applicabili definiti e spiegati, sei pronto a testare l'app di avvio.

Notare il testo "Nessuna eccezione" incluso tra parentesi del criterio di successo 2.1.3. Ciò significa che l'accessibilità della tastiera è obbligatoria.

WCAG Guideline 2.1 e il criterio di successo che segue sottolineano l'assoluta necessità di accessibilità della tastiera. La tastiera svolge un ruolo fondamentale nel portare la tecnologia a tutti.

Task 2: Verificare l'esistenza di una messa a fuoco visiva

I test di accessibilità solo da tastiera si basano esclusivamente sull'indicatore di messa a fuoco. L'adesione al seguente criterio di successo "Focus Visible" non è negoziabile. Gli utenti disabilitati non possono navigare in un'app senza un focus attivo o quando il posizionamento del focus non è chiaro.

Mentre passi attraverso l'app web, dovrebbe sempre esserci un indicatore visibile che identifichi la posizione del focus. L'indicatore è in genere un rettangolo. La disabilitazione del rettangolo di messa a fuoco causa un errore di questo criterio.

Gli sviluppatori di app sono orgogliosi delle app e dei programmi che scrivono. Il loro obiettivo è quello di integrare la funzione con un'esperienza visivamente coinvolgente. Un rettangolo di messa a fuoco spesso toglie dal design; gli sviluppatori quindi spesso lo nascondono o lo disabilitano e violano il criterio di successo 2.4.7.

Rettangolo focale 1

Rettangolo focale 1

Rettangolo focale 2

Rettangolo focale 2

Individuare il punto di messa a fuoco nelle due schermate precedenti.

Il primo screenshot, Rettangolo di messa a fuoco 1, rappresenta una pagina con una corretta indicazione di stato attivo. L'indicatore di messa a fuoco è molto evidente in quanto circonda la scheda Panoramica in alto a sinistra della pagina. Il secondo screenshot, Rettangolo di messa a fuoco 2, non contiene alcuna indicazione di stato attivo nella scheda Panoramica.

Osservare il rettangolo di messa a fuoco durante la navigazione tra i primi componenti attivabili nella pagina Introduzione.

  1. Se l'app non è già in esecuzione, andare alla cartella ACCLearningPath e avviarla.

    $ ojet serve

  2. Quando l'app viene aperta nel browser, premere <Ctrl+L> per attivare la barra degli indirizzi, quindi premere <Tab> per spostare lo stato attivo sul collegamento Salta navigazione.

  3. Premere <Tab> per spostare lo stato attivo su john.hancock@oracle.com nel menu utente, in alto a destra nella pagina.

  4. Premere <Tab> per spostare lo stato attivo su Introduzione nel menu di navigazione principale immediatamente sotto il menu dell'utente.

  5. Premere <down arrow> per spostare lo stato attivo su Risorse nel menu di navigazione, quindi premere <Enter> per caricare la pagina Risorse.

    Pagina Risorse

  6. Premere <Tab> per spostare lo stato attivo sul collegamento Sito principale di Oracle JET.

    Si noti che non vi è alcuna chiara indicazione della posizione del focus. La pagina Risorse non soddisfa il criterio di successo 2.4.7.

    Nei passaggi seguenti, si risolverà il problema del rettangolo di messa a fuoco assente al fine di rispettare gli standard WCAG.

  7. Passare alla cartella ACCLearningPath/src/js/views e aprire il file resources.html in un editor di codice.

  8. Individuare il collegamento per il sito principale di Oracle JET.

    <li><a style="outline-width:0"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

    Modificare "outline-width:0" in "outline-width:3" nell'attributo style.

    <li><a style="outline-width:3"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

  9. Salvare e chiudere resources.html.

    Il file dovrebbe avere un aspetto simile a resources-html.txt.

  10. Ripetere i passaggi da 2 a 6 per verificare che il rettangolo di messa a fuoco sia ora visibile.

Task 3: Verifica sequenza scheda significativa

La parte successiva alla verifica solo con tastiera prevede l'organizzazione di una pagina man mano che l'utente la controlla.

L'ordine di messa a fuoco può essere meglio compreso con un'illustrazione. Man mano che l'utente visualizza le schede della pagina, la posizione di attivazione non è casuale. Non si sposta da un lato all'altro della pagina e viceversa. Si muove in modo atteso e logico.

Nella precedente attività Verifica dell'esistenza di un focus visivo, è stato possibile vedere come l'elemento attivo si è spostato in un ordine previsto tramite il banner della pagina; tuttavia, la pagina Risorse è stata codificata per illustrare un ordine di schede più casuale.

  1. Nell'app in esecuzione, premere <Ctrl+L> per attivare la barra degli indirizzi.
  2. Premere <Tab> per spostare lo stato attivo sul collegamento di navigazione skip.
  3. Premere <Tab> per spostare lo stato attivo su john.hancock@oracle.com nel menu utente, in alto a destra nella pagina.
  4. Premere <Tab> per spostare lo stato attivo su Introduzione nel menu di navigazione principale.
  5. Premere <Tab> per spostare lo stato attivo sul collegamento Sito principale di Oracle JET nel corpo della pagina.

  6. Premere <Tab>. Focus dovrebbe passare a Oracle JET Developer's Guide, ma invece si sposta al collegamento Oracle JET Cookbook.

    Il collegamento Oracle JET Developer's Guide non si trova nella sequenza di schede, che viola i criteri di successo 2.4.3.

    I passi da 7 a 11 descrivono il metodo necessario per restituire il collegamento Oracle JET Developer's Guide alla posizione corretta nella sequenza di schede. I passaggi da 12 a 16 illustrano come confermare che la correzione ha funzionato.

  7. Nell'editor di codice, individuare il collegamento Oracle JET Developer's Guide nel file resources.html.

    <li><a tabindex="-1"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    L'attributo tabindex="-1" rimuove completamente questo collegamento dall'ordine delle schede della pagina.

  8. Modificare il valore dell'attributo tabindex in 0 per restituire il collegamento alla posizione corretta nella sequenza di schede della pagina.

    <li><a tabindex="0"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

  9. Salvare e chiudere il file. La pagina Risorse del browser viene aggiornata automaticamente con il nuovo contenuto.

  10. Premere <Ctrl+L> per attivare la barra degli indirizzi.

  11. Premere <Tab> tre volte per spostare lo stato attivo su Introduzione nel menu di navigazione.

  12. Premere <Tab> per spostare lo stato attivo sul collegamento Sito principale di Oracle JET.

  13. Fare clic su <Tab> per spostare lo stato attivo al collegamento Oracle JET Developer's Guide.

  14. Continuare a premere <Tab> finché non si attiva il collegamento Informazioni su Oracle nel piè di pagina.

    Dopo aver esplorato tutti gli elementi attivabili su una pagina, invertire il processo. A volte, quando si esegue lo spostamento all'indietro attraverso una pagina, il percorso cambia inaspettatamente, vengono visualizzati nuovi elementi o alcuni elementi scompaiono.

  15. Utilizzare <Shift+Tab> per spostarsi in un ordine bottom-to-top per assicurarsi che la sequenza significativa rimanga vera durante la navigazione inversa nella pagina.

Task 4: Interazione con i controlli

Molti dei controlli utilizzati in questa esercitazione sono controlli specifici di Oracle JET. Una caratteristica di Oracle JET è che i suoi componenti sono progettati con accessibilità solo tastiera già integrata. Gli sviluppatori che utilizzano Oracle JET possono copiare i componenti direttamente da Oracle JET Cookbook e rilasciarli in posizione e il codice risultante è accessibile.

Ad esempio, ecco un breve elenco di tasti comuni per l'interazione con i componenti HTML standard:

Nota: per determinati controlli quali menu di navigazione, barre delle schede, gruppi di pulsanti di opzione e controlli di gruppo simili, potrebbe essere necessario accedere al controllo ed utilizzare i tasti freccia per spostarsi al suo interno.

Utilizzare l'applicazione iniziale in esecuzione per interagire con diversi componenti di Oracle JET.

  1. Premere <Ctrl+L> per attivare la barra degli indirizzi.

  2. Premere <Tab> per spostare lo stato attivo sul collegamento di navigazione skip.

  3. Premere <Tab> per spostare lo stato attivo su john.hancock@oracle.com nel menu utente, in alto a destra nella pagina.

    Secondo la documentazione della tastiera dell'elemento <oj-menu-button>, premere <Space>, <Enter> o <down arrow> per aprire il menu e premere <Escape> per chiudere il menu.

  4. Premere <Space> per espandere il menu utente. Focus si sposta su Preferenze.

  5. Premere <down arrow> per spostarsi verso il basso nell'elenco delle voci di menu.

  6. Premere <Escape> per chiudere il menu utente.

  7. Premere <Tab>. Focus passa a Introduzione nel menu di navigazione principale immediatamente sotto il menu utente.

    Per ulteriori informazioni sulle sequenze di tasti specifiche per ciascun componente Oracle JET, vedere Oracle JET Keyboard and Gesture Guide.

Task 5: identificazione di una trap di tastiera

L'argomento finale introdotto all'inizio di questo tutorial coinvolge un concetto noto come trappola da tastiera. Una trap della tastiera si verifica quando un utente non può spostare lo stato attivo da un elemento della pagina utilizzando <Tab>, <Shift+Tab> o uno qualsiasi dei tasti freccia.

Una trap da tastiera rende l'intera pagina inutilizzabile per un utente che utilizza solo tastiera. La soluzione comune per una trappola da tastiera è riavviare l'applicazione.

Facciamo pratica!

Questa sezione dell'esercitazione fornisce un esempio dettagliato di una metodologia di test solo tastiera.

Durante il test della pagina Organizzazione dell'app, verificare che vi sia sempre un'indicazione visibile della posizione di focalizzazione e che il focus si sposti in un pattern prevedibile.

La pagina che verrà testata è accessibile tramite la scheda Organizzazione nella pagina Introduzione.

Pagina Organizzazione

Utilizzare l'app di avvio per eseguire un test della tastiera della pagina Organizzazione.

  1. Nella pagina Risorse dell'app, premere <Ctrl+L> per attivare la barra degli indirizzi.

  2. Premere <Tab> per spostare lo stato attivo sul collegamento di navigazione skip.

  3. Premere <Tab> per spostare lo stato attivo su john.hancock@oracle.com nel menu utente, in alto a destra nella pagina.

  4. Premere <Tab> per spostare lo stato attivo su Introduzione nel menu di navigazione principale sotto il nome utente.

    Secondo la documentazione sulla tastiera dell'elemento <oj-navigation-list>, utilizzare i tasti <up arrow> e <down arrow> per spostarsi tra gli elementi nel menu di navigazione principale.

  5. Premere <Enter> per selezionare Introduzione.

  6. Premere <Tab>, quindi <right arrow> per spostare lo stato attivo nella scheda Organizzazione nella barra delle schede. Premere <Enter> per caricare la pagina Organizzazione.

    Secondo la documentazione sulla tastiera dell'elemento <oj-tab-bar>, utilizzare i tasti freccia per spostarsi all'interno della barra delle schede.

  7. Premere <Tab> per spostare lo stato attivo nella vista struttura. Focus atterra sul primo elemento con focus, il nodo Contabilità.

    In base alla documentazione della tastiera dell'elemento <oj-tree-view>, utilizzare i tasti <up arrow> e <down arrow> per spostarsi tra i nodi della vista struttura.

  8. Premere <right arrow> per espandere il nodo del gruppo Contabilità nella struttura, quindi premere <left arrow> per comprimere il nodo del gruppo.

  9. Premere due volte <down arrow> per spostare lo stato attivo sul dipendente JONES nel nodo del gruppo RESEARCH. Quindi premere <Enter> per selezionarlo.

    Un modulo verrà visualizzato sul lato destro della pagina con i dettagli del dipendente.

    Scheda Organizzazione con maschera Dettagli dipendente

  10. Premere <Tab> per spostare lo stato attivo nel campo ID dipendente.
  11. Premere <Tab> per spostare lo stato attivo nel campo Nome dipendente.
  12. Premere <Tab> per spostare lo stato attivo nel campo Titolo mansione.

  13. Premere <Tab> per spostare lo stato attivo nel campo Data assunzione e visualizzare una griglia di calendario espansa.

    In base alla documentazione della tastiera dell'elemento <oj-date-picker>, premere i tasti freccia per modificare la data di attivazione all'interno della griglia del calendario.

  14. Premere <down arrow>, quindi utilizzare i tasti freccia per spostare lo stato attivo su una data nel selettore data espansa. Quindi premere <Enter> per selezionare una data.

  15. Premere <Tab> per spostare lo stato attivo nel campo Stipendio.

    Secondo la documentazione della tastiera dell'elemento <oj-input-number>, utilizzare <up arrow> per aumentare il valore dello stipendio e utilizzare <down arrow> per ridurre il valore dello stipendio.

  16. Premere <Tab> e tentare di spostare lo stato attivo nel campo ID manager.

    Una volta spostato l'elemento attivo nel campo Stipendio, premendo <Tab> o <Shift+Tab> non è stato spostato l'elemento attivo fuori dal campo? Questo campo contiene una trap per tastiera. Senza una correzione al codice, l'unico modo per uscire dalla trap è aggiornare la pagina.

Task 6: Rimozione della trap

  1. Passare alla cartella src/js/views e aprire il file organization.html in un editor.

  2. Individuare l'elemento <oj-input-number> in cui id="salary":

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1"
   on-blur="[[setKeyTrap]]">
</oj-input-number>

    Rimuovere l'attributo on-blur che causa la trap da tastiera.

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1">
</oj-input-number>

  3. Salvare il file. Ripetere quindi i passi del task precedente Identify a Keyboard Trap per assicurarsi che la trap della tastiera sia stata rimossa.

  4. Quando si raggiunge il campo Id manager, premere <Tab> per spostare lo stato attivo sui pulsanti di opzione Job.

    In base alla documentazione sulla tastiera dell'elemento <oj-radioset>, utilizzare <up arrow> per selezionare il pulsante precedente nel gruppo. Utilizzare <down arrow> per selezionare il pulsante successivo nel gruppo.

  5. Fare clic su <Tab> per spostare lo stato attivo sul collegamento Informazioni su Oracle nella sezione piè di pagina della pagina.

  6. Invertire il processo. Premere <Shift+Tab> per tornare ai pulsanti di opzione Job. Continuare a premere <Shift+Tab> per tornare alla pagina in john.hancock@oracle.com nel menu utente.

Per qualsiasi domanda sulle sequenze di tasti necessarie per utilizzare o navigare all'interno di un componente Oracle JET, consultare la Guida a tastiera e gesti Oracle JET.

La fase di test solo tastiera è 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.