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.

Le linee guida WCAG (Web Content Accessibility Guidelines) 2.1 descrivono molti dei criteri di successo per la creazione di un'applicazione Web accessibile. Questa esercitazione è incentrata sui criteri che risolvono l'utilizzo specifico della tastiera.

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

Obiettivi

In questa esercitazione viene descritto come eseguire un test di un'applicazione Web basato solo sulla tastiera.

Prerequisiti

Task 1: Preparazione per test di accesso facilitato 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.1 attorno ai quali questa esercitazione tratta diversi concetti specifici.

I criteri di successo menzionati all'inizio di questa sezione riguardano 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'applicazione iniziale.

Si noti il testo "Nessuna eccezione" incluso nelle parentesi del criterio di successo 2.1.3. Ciò significa che l'accesso facilitato dalla tastiera è obbligatorio.

WCAG Guideline 2.1 e il criterio di successo che segue sottolineano l'assoluta necessità di accessibilità da 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à basati solo sulla tastiera si basano unicamente sull'indicatore di messa a fuoco. L'adesione al seguente criterio di successo "Focus Visible" non è negoziabile. Gli utenti disabili non possono navigare in un'applicazione senza focus attivo o quando il posizionamento degli elementi attivi non è chiaro.

Quando si esegue il tabulazione mediante l'applicazione Web, dovrebbe sempre essere presente un indicatore visibile che identifica la posizione dell'elemento attivo. 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 è integrare la funzione con un'esperienza visivamente coinvolgente. Un rettangolo di messa a fuoco spesso distrae dal design; gli sviluppatori spesso lo nascondono o disabilitano e violano il Criterio di Successo 2.4.7.

Rettangolo di messa a fuoco 1

Rettangolo di messa a fuoco 1

Descrizione dell'immagine focus_rec1.png

Rettangolo di messa a fuoco 2

Rettangolo di messa a fuoco 2

Descrizione dell'immagine focus_rec2.png

Individua il punto di focalizzazione nelle due schermate precedenti.

Il primo screenshot, Focus Rectangle 1, rappresenta una pagina con la corretta indicazione del focus. L'indicatore di stato attivo è molto evidente in quanto circonda la scheda Panoramica nella parte superiore sinistra della pagina. Nella seconda schermata, Focus Rectangle 2, non è presente alcun indicatore di stato attivo sulla scheda Panoramica.

Osservare il rettangolo di messa a fuoco durante l'esplorazione dei primi componenti attivabili nella pagina Introduzione.

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

    $ ojet serve

  2. Quando l'applicazione viene aperta nel browser, premere <Ctrl+L> per impostare lo stato attivo sulla barra degli indirizzi, quindi premere <Tab> per spostare lo stato attivo sul collegamento Ignora 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 utente.

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

    Pagina Risorse

    Descrizione dell'immagine resources_page.png

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

    Si noti che non vi è alcuna chiara indicazione del luogo di messa a fuoco. La pagina Risorse non soddisfa il criterio di operazione riuscita 2.4.7.

    Nei passaggi seguenti, si correggerà 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 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 deve 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 una sequenza di schede significative

La parte successiva del test di sola tastiera riguarda l'organizzazione di una pagina mentre l'utente lo attraversa.

L'ordine di messa a fuoco può essere meglio compreso con un'illustrazione. Poiché l'utente passa alla pagina, la posizione dell'elemento attivo non è casuale. Non si sposta da un lato della pagina all'altro e viceversa. Si muove in maniera logica e attesa.

Nel task Verifica l'esistenza di un focus visivo precedente è stato illustrato come l'elemento attivo è stato spostato in ordine previsto tramite il banner della pagina; tuttavia, la pagina Risorse è stata codificata per illustrare un ordine di schede più casuale.

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

  2. Premere <Tab> per spostare lo stato attivo sul collegamento Ometti nav.

  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>. È consigliabile passare a Oracle JET Developer's Guide, ma passare al collegamento Oracle JET Cookbook.

    Il collegamento Oracle JET Developer's Guide non è incluso nella sequenza di schede, che viola i Criteri di operazione riuscita 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 passi 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://docs.oracle.com/en/middleware/developer-tools/jet/13/books.html"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    L'attributo tabindex="-1" estrae 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=OJACC"
   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 impostare lo stato attivo sulla 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. Premere <Tab> per spostare lo stato attivo sul collegamento Oracle JET Developer's Guide.

  14. Continuare a premere <Tab> fino a attivare il collegamento Informazioni su Oracle nel piè di pagina.

    Dopo aver navigato tutti gli elementi attivabili in una pagina, annullare il processo. A volte, quando si passa da una pagina all'altra, il percorso cambia inaspettatamente, vengono visualizzati nuovi elementi o alcuni elementi scompaiono.

  15. Utilizzare <Shift+Tab> per spostarsi in un ordine dal basso verso l'alto per assicurarsi che la sequenza significativa sia 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 funzionalità di Oracle JET è che i relativi componenti sono progettati con l'accesso facilitato solo da tastiera già integrato. Gli sviluppatori che utilizzano Oracle JET possono copiare i componenti direttamente da Oracle JET Cookbook e rilasciarli in posizione. Il codice risultante è accessibile.

Di seguito è riportato un breve elenco di tasti comuni per l'interazione con i componenti HTML standard.

Nota: per alcuni controlli, ad esempio i menu di navigazione, le barre delle schede, i gruppi di pulsanti di scelta e controlli di gruppo simili, potrebbe essere necessario passare da un tasto TAB al controllo e quindi utilizzare i tasti freccia per spostarsi al suo interno.

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

  1. Premere <Ctrl+L> per impostare lo stato attivo sulla barra degli indirizzi.

  2. Premere <Tab> per spostare lo stato attivo sul collegamento Ometti nav.

  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 relativa all'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. Passa a Preferenze.

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

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

  7. Premere <Tab>. Lo stato attivo si sposta su Introduzione nel menu di navigazione principale immediatamente sotto il menu utente.

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

Task 5: Identificazione di una trap da tastiera

L'argomento finale introdotto all'inizio di questo tutorial comporta un concetto noto come trappola da tastiera. Una trap da tastiera si verifica quando un utente non può spostare l'evidenziazione da un elemento della pagina utilizzando <Tab>, <Shift+Tab> o i tasti freccia.

Una trappola da tastiera rende l'intera pagina inutilizzabile per un utente che dispone solo della tastiera. La soluzione più comune per una trap da tastiera consiste nel riavviare l'applicazione.

Diventiamo pratici!

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

Durante il test della pagina Organizzazione dell'applicazione, verificare che vi sia sempre un'indicazione visibile della posizione di messa a fuoco e che la messa a fuoco si muova in un pattern prevedibile.

La pagina che verrà sottoposta a test è accessibile tramite la scheda Organizzazione della pagina Introduzione.

Pagina Organizzazione

Descrizione dell'immagine org_page.png

Utilizzare l'applicazione iniziale per eseguire un test con tastiera della pagina Organizzazione.

  1. Nella pagina Risorse dell'app, premere <Ctrl+L> per impostare lo stato attivo sulla barra degli indirizzi.

  2. Premere <Tab> per spostare lo stato attivo sul collegamento Ometti nav.

  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 della tastiera relativa all'elemento <oj-navigation-list>, usare i tasti <up arrow> e <down arrow> per spostarsi tra gli elementi del menu di navigazione principale.

  5. Premere <Enter> per selezionare Introduzione.

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

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

  7. Premere <Tab> per spostare lo stato attivo sulla vista struttura. Il focus viene posizionato sul primo elemento con stato attivo, ovvero sul nodo Contabilità.

    Secondo la documentazione della tastiera relativa all'elemento <oj-tree-view>, utilizzare i tasti <up arrow> e <down arrow> per spostarsi tra i nodi nella vista struttura.

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

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

    Sul lato destro della pagina verrà visualizzato un modulo con i dettagli del dipendente.

    Scheda Organizzazione con maschera Dettagli dipendente

    Descrizione dell'immagine org_page_form.png

  10. Premere <Tab> per spostare lo stato attivo sul campo ID dipendente.

  11. Premere <Tab> per spostare lo stato attivo sul campo Nome dipendente.

  12. Premere <Tab> per spostare lo stato attivo sul campo Qualifica.

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

    Secondo la documentazione della tastiera relativa all'elemento <oj-date-picker>, premere i tasti freccia per modificare lo stato attivo della data 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 espanso. Premere <Enter> per selezionare una data.

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

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

  16. Premere <Tab> e tentare di spostare lo stato attivo sul campo ID responsabile.

    Dopo aver spostato l'evidenziazione nel campo Stipendio, premere <Tab> o <Shift+Tab> per non spostare l'evidenziazione dal campo? Questo campo dispone di una trap da 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> dove 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 provoca la trap della 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 la procedura descritta nel task Identify a Keyboard Trap precedente per accertarsi che la trap da tastiera sia stata rimossa.

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

    Secondo la documentazione della tastiera per l'elemento <oj-radioset>, utilizzare <up arrow> per selezionare il pulsante precedente nel gruppo. Utilizzare <down arrow> per selezionare il pulsante Avanti nel gruppo.

  5. Premere <Tab> per spostare lo stato attivo sul collegamento Informazioni su Oracle nella sezione del 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.

Ricordarsi di consultare il manuale Oracle JET Keyboard and Gestures Guide se sono presenti domande relative alle tasti da utilizzare o navigare all'interno di un componente di Oracle JET.

Fase di test solo tastiera completata. Passare all'esercitazione finale all'interno di questo percorso di apprendimento, Eseguire la convalida del lettore di schermo su un'applicazione Oracle JET.

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.