Test della navigazione da tastiera nei componenti complessi di Oracle JET

Introduzione

Questo sarà il nostro primo sguardo alla scheda Dipartimenti nell'app ACCLearningPath. Il processo di revisione descritto nel percorso di apprendimento precedente in questa serie di accessibilità viene seguito per identificare eventuali problemi di accessibilità.

Obiettivi

In questo tutorial, imparerai come identificare e risolvere i problemi di accessibilità nella scheda Dipartimenti dell'app ACCLearningPath.

Prerequisiti

Task 1: Esamina struttura pagina

  1. Nella finestra del terminale, passare alla cartella ACCLearningPath ed eseguire l'applicazione.

    $ ojet serve

    L'app nel browser si aprirà alla pagina Introduzione con la scheda Panoramica caricata.

  2. Fare clic sulla scheda Reparti nella barra delle schede e valutare la struttura della pagina. La pagina Reparti è costituita da tre pannelli, in cui ogni pannello visualizza i dati del reparto utilizzando vari componenti di Oracle JET.

    Scheda Reparti prima

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

  4. Individuare il tag <div> principale nel file.

    <div class="oj-hybrid-padding">
   <div id="mainContainer" class="oj-flex" style="width:100%;">

  5. Inserire un'intestazione h3 tra i due tag <div> per identificare la pagina Reparti.

    <div class="oj-hybrid-padding">
   <h3>Departments</h3>
   <div id="mainContainer" class="oj-flex" style="width:100%;">

  6. Individuare il tag <div> che definisce il pannello centrale contenente una sequenza di filmati.

    <div class="oj-flex-item fs-container">
   <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
      . . . >

  7. Inserire un'intestazione h4 tra i tag <div> e <oj-filmstrip> di apertura per identificare il pannello e fornire un'etichetta visibile per la striscia di pellicola.

    <div class="oj-flex-item fs-container">
   <h4>Departments Film Strip</h4>
   <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
      . . . >

  8. Individuare il tag <div> che costituisce il pannello sinistro contenente una griglia dati.

    <div class="oj-flex-item">
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

  9. Inserire un'intestazione h4 tra i tag <div> e <oj-data-grid> per identificare il pannello e fornire un'etichetta visibile per la griglia dati.

    <div class="oj-flex-item">
   <h4>Departments Data Grid</h4>
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

  10. Individuare il tag <div> di apertura che costituisce il terzo pannello contenente un grafico.

      <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
        . . . >

  11. Inserire un'intestazione h4 tra i tag <div> e <oj-chart> di apertura. Questa intestazione identifica il pannello e funge da etichetta visiva per il grafico.

      <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <h4>Salaries by Department</h4>
     <oj-chart id="pieChart"
        type="bar"
        data="[[chartDataProvider]]"
        animation-on-display="auto"
        animation-on-data-change="auto"
        . . . >

  12. Salvare il file. Nel browser verificare le modifiche apportate alla scheda Reparti dell'applicazione.

    Scheda Reparti dopo

Task 2: Eseguire un test solo da tastiera

La seconda parte della revisione dell'accessibilità consiste nell'eseguire un test solo da tastiera della scheda Reparti dell'app.

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

  2. Premere <Tab>. Lo stato attivo si sposta sul collegamento di navigazione skip.

  3. Premere <Tab>. Focus si sposta su john.hancock@oracle.com nel menu dell'utente in alto a destra nella pagina.

  4. Premere <Tab>. Focus consente di passare a Introduzione nel menu di navigazione immediatamente sotto il menu dell'utente.

  5. Premere <Tab>. Lo stato attivo viene spostato in Panoramica nella barra delle schede.

  6. Premere <Tab>. Focus passa a Contabilità nella barra delle applicazioni.

  7. Premere <right arrow> per passare alla voce successiva, Ricerca, nella barra delle applicazioni.

  8. Premere <left arrow> per tornare a Contabilità nella barra delle applicazioni.

  9. Premere <right arrow> tre volte. Focus passa all'ultima voce nella barra delle applicazioni, Operazioni.

  10. Premere <Tab>. Lo stato attivo passa alla prima cella del corpo dati nella griglia dati, sotto la colonna Id. Il valore della cella focalizzata è 10.

  11. Premere <right arrow>. Focus passa a Contabilità sotto la seconda colonna della griglia dati, Nome.

  12. Premere <right arrow>. Focus passa a New York nella colonna finale della griglia dati, Posizione.

    Si noti che la struttura dello stato attivo viene visualizzata intorno alla cella che contiene il nome della città.

  13. Premere <F2>. La struttura dello stato attivo si restringe per racchiudere solo il testo New York nella cella.

    In base alla documentazione della tastiera dell'elemento <oj-data-grid>, utilizzare <F2> per rendere possibile l'azione del contenuto della cella. Il tasto funzione <F2> consente di avviare le azioni supportate dal componente attivo. In questo caso, la cella contiene un collegamento a Google Maps che verrà attivato.

  14. Premere <Enter> per attivare il collegamento New York. Una nuova finestra del browser si apre su una pagina di Google Maps di New York.

  15. Premere <Ctrl+F4> per chiudere la finestra di Google Maps.

  16. Premere <Esc>. La struttura dello stato attivo si allarga per circondare la cella che contiene New York nella terza colonna.

    In base alla documentazione sulla tastiera dell'elemento <oj-data-grid>, utilizzare <Esc> per uscire dalla modalità con interazione in modo da poter continuare la navigazione verso altri componenti.

  17. Premere <Tab>. Il focus passa alla prima barra del grafico a barre.

Task 3: Esecuzione di una convalida del lettore di schermo

L'ultima parte della verifica dell'accessibilità è la convalida del lettore di schermo. I seguenti passaggi di convalida si basano sull'utilizzo del lettore di schermo JAWS, ma i risultati saranno simili se si utilizza il lettore di schermo NVDA.

  1. Nella finestra del terminale, uscire dall'applicazione in esecuzione premendo <Ctrl+C> e, se richiesto, immettere y.

  2. Avviare il lettore di schermo e quindi riavviare l'applicazione Web.

    $ ojet serve

    L'app si aprirà automaticamente nel browser; il lettore di schermo inizierà a leggere una volta che la pagina sarà stata caricata completamente.

  3. Fare clic sulla scheda Reparti nella barra delle schede. Non utilizzare il mouse dopo questo punto.

  4. Premere <Ctrl+L> per spostare lo stato attivo sulla barra degli indirizzi.

  5. Premere <Tab>. JAWS legge: "Passa al contenuto primario. link della stessa pagina".

  6. Premere <Tab>. JAWS afferma: "Area banner. Barra degli strumenti. Menu pulsante john.hancock@oracle.com. Premere lo spazio per attivare il menu, quindi navigare con i tasti freccia."

  7. Premere <Tab>. JAWS afferma: "Scheda Area di navigazione. Scheda Introduzione selezionata. 1 di 2."

  8. Premere <Tab>. JAWS afferma: "Scheda Area principale. Scheda Reparti selezionata. 4 di 4."

  9. Premere <Tab> per spostare lo stato attivo sulla striscia della pellicola. JAWS dice: "Contabilità. New York. 3 dipendenti. Visualizzazione pagina 1 di 4."

  10. Premere <Tab> per spostare lo stato attivo sulla griglia dati. JAWS afferma: "Questa è una griglia dati con 4 righe e 3 colonne. ID. Nome. Ubicazione." Dopo aver letto le intestazioni di colonna, il lettore di schermo legge le celle del corpo dati della tabella da sinistra a destra. Poi si legge il focus attuale, "Riga 1. Colonna 1. Id: 10."

  11. Premere <right arrow>. JAWS dice: "Colonna 2. Nome: Contabilità."

  12. Premere <right arrow>. JAWS dice: "Colonna 3. Posizione: New York. Contiene controlli È stata raggiunta l'ultima colonna."

  13. Premere <Tab>. JAWS afferma: "Visualizzazione dei dati: grafico. Grafico. Serie: Contabilità; Gruppo: Dipartimento; Valore: USD 3.750,00. Grafico."

    Si noti che quando il focus si sposta tra i pannelli, JAWS non fornisce alcuna indicazione delle intestazioni del pannello. Non c'è nemmeno modo di scorrere la pellicola da una pagina all'altra.

  14. Aprire il file departments.html nell'editor di codice.

  15. Individuare il tag <oj-film-strip> di apertura e aggiungere un attributo aria-label.

      <oj-film-strip id="deptFilmstrip"
     max-items-per-page="1"
     aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
     arrow-visibility="hidden"
     class="demo-stretch-items"
     . . . >

  16. Individuare il tag <oj-data-grid> di apertura e aggiungere un attributo aria-label.

      <oj-data-grid id="datagrid"
     style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
     aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
     data="[[dgDataProvider]]"
     header.column.style="[[getCellWidth]]"
     . . . >

  17. Individuare il tag <oj-chart> di apertura e aggiungere un attributo aria-label.

      <oj-chart id="pieChart"
     type="bar"
     aria-label="Salaries by Department bar chart"
     data="[[chartDataProvider]]"
     animation-on-display="auto"
     animation-on-data-change="auto"
     . . . >

    Il cambiamento finale prevede i controlli di impaginazione per la pellicola nel pannello centrale.

  18. Individuare i tag </oj-film-strip> e </oj-bind-if> di chiusura.

            </oj-film-strip>
     </div>
  </div>
  </oj-bind-if>

  19. Aggiungere il controllo di impaginazione e gli elementi div circostanti tra i tag </div> e </oj-bind-if> di chiusura.

            </oj-film-strip>
     </div>
  </div>
  <div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
     <div class="oj-flex-item">
        <div style="text-align: center;">
        <div style="display: inline-block;margin-top: 4px;">
           <oj-paging-control id="pagingControl"
              aria-controls="deptFilmstrip"
              data="[[pagingModel]]"
              page-size="0"
              page-options='{"type": "dots"}'>
           </oj-paging-control>
        </div>
        </div>
     </div>
  </div>
  </oj-bind-if>

  20. Salvare il file. Il file dovrebbe avere un aspetto simile a departments-html.txt.

  21. Eseguire nuovamente la convalida del lettore di schermo. Assicurarsi che le etichette siano pronunciate per la striscia filmica, la griglia dati e il grafico e che i controlli di impaginazione siano presenti sotto la striscia filmica.

Passo successivo

Questa esercitazione conclude il modulo Convalida e correzione dell'accesso facilitato alle applicazioni in questo percorso di apprendimento sull'accesso facilitato alle applicazioni Web.

È possibile tornare alla pagina principale del percorso di apprendimento per l'accesso facilitato per accedere a tutti i moduli relativi all'accesso facilitato e ad altri percorsi di apprendimento.

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.