Test della navigazione da tastiera in componenti complessi di Oracle JET

Introduzione

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

Obiettivi

In questa esercitazione verrà illustrato come identificare e correggere i problemi di accesso facilitato nella scheda Reparti dell'applicazione ACCLearningPath.

Prerequisiti

Un ambiente di sviluppo impostato per creare applicazioni Oracle JET con il runtime JavaScript, Node.js e l'interfaccia della riga di comando Oracle JET release 13.0 (o successiva) installata
Accesso a Oracle JET Developer Cookbook
Accesso alla Guida di Oracle JET Keyboard and Gesture
Completamento dell'esercitazione precedente in questo percorso di apprendimento, Verificare l'accessibilità della tabella e del messaggio dei componenti di Oracle JET

Task 1: Revisione della struttura di pagina

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.
Fare clic sulla scheda Reparti nella barra delle schede e valutare la struttura della pagina. La pagina Reparti è costituita da tre pannelli in cui ciascun pannello visualizza i dati di reparto utilizzando vari componenti di Oracle JET.

Descrizione dell'immagine departments_tab_before.png
Passare alla cartella ACCLearningPath/src/js/views e aprire il file departments.html in un editor di codice.

Individuare il tag <div> principale nel file.

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

Inserire un'intestazione h3 tra le 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%;">

Individuare il tag <div> che definisce il pannello centrale contenente una pellicola.

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

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

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

Individuare il tag <div> che forma 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"
      . . . >

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"
      . . . >

Individuare il tag di apertura <div> che forma 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"
      . . . >

Inserire un'intestazione h4 tra le tag di apertura <div> e <oj-chart>. 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"
      . . . >

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

Descrizione dell'immagine departments_tab_after.png

Task 2: Esecuzione di un test solo da tastiera

La seconda parte della revisione dell'accesso facilitato consiste nell'eseguire un test di sola tastiera della scheda Reparti dell'applicazione.

Premere <Ctrl+L> per impostare lo stato attivo sulla barra degli indirizzi.
Premere <Tab>. Sposta lo stato attivo sul collegamento Ignora navigazione.
Premere <Tab>. Lo stato attivo si sposta su john.hancock@oracle.com nel menu utente in alto a destra nella pagina.
Premere <Tab>. Lo stato attivo si sposta su Introduzione nel menu di navigazione immediatamente sotto il menu utente.
Premere <Tab>. Lo stato attivo si sposta sulla panoramica nella barra delle schede.
Premere <Tab>. L'evidenziazione passa alla contabilità nella barra delle icone.
Premere <right arrow> per passare alla voce successiva, Research, nella barra delle icone.
Premere <left arrow> per tornare a Accounting nella barra delle icone.
Premere <right arrow> tre volte. Lo stato attivo passa all'ultima voce nella barra delle applicazioni, Operazioni.
Premere <Tab>. Il focus viene spostato alla prima cella del corpo dati nella griglia dati, sotto la colonna Id. Il valore della cella con stato attivo è 10.
Premere <right arrow>. Lo stato attivo passa a Contabilità sotto la seconda colonna della griglia dati, Nome.
Premere <right arrow>. Lo stato attivo passa a New York nella colonna finale della griglia dati, Location.

Il profilo dell'elemento attivo viene visualizzato intorno alla cella contenente il nome della città.
Premere <F2>. Il profilo di messa a fuoco si restringe in modo da racchiudere solo il testo New York nella cella.

Secondo la documentazione della tastiera per l'elemento <oj-data-grid>, usare <F2> per rendere fruibile il contenuto della cella. La chiave della 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.
Premere <Enter> per attivare il collegamento New York. Una nuova finestra del browser si apre su una pagina di Google Maps di New York.
Premere <Ctrl+F4> per chiudere la finestra di Google Maps.
Premere <Esc>. Il contorno dello stato attivo si estende attorno alla cella che contiene New York nella terza colonna.

Secondo la documentazione della tastiera relativa all'elemento <oj-data-grid>, utilizzare <Esc> per uscire dalla modalità con interazione in modo da poter continuare a passare ad altri componenti.
Premere <Tab>. Il focus viene spostato sulla prima barra del grafico a barre.

La parte finale della revisione dell'accesso facilitato è la convalida del lettore di schermo. I passi di convalida riportati di seguito si basano sull'utilizzo del lettore di schermo JAWS, ma i risultati saranno simili se si utilizza il lettore di schermo NVDA.

Nella finestra del terminale, uscire dall'applicazione in esecuzione premendo <Ctrl+C> e, se richiesto, immettere y.
Avviare il lettore di schermo e 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à completamente caricata.
Fare clic sulla scheda Reparti nella barra delle schede. Non utilizzare il mouse dopo questo punto.
Premere <Ctrl+L> per impostare lo stato attivo sulla barra degli indirizzi.
Premere <Tab>. JAWS legge, "Passa al contenuto principale. Stesso collegamento alla pagina."
Premere <Tab>. JAWS dice, "Area banner. Barra degli strumenti. Menu pulsante john.hancock@oracle.com. Premere la barra spaziatrice per attivare il menu, quindi spostarsi con i tasti freccia."
Premere <Tab>. JAWS afferma: "Scheda Area di navigazione. Scheda introduttiva selezionata. 1 di 2."
Premere <Tab>. JAWS afferma: "Scheda Area principale. Scheda Reparti selezionata. 4 di 4."
Premere <Tab> per spostare lo stato attivo sulla striscia della pellicola. JAWS dice, "Contabilità. New York. 3 dipendenti. Visualizzazione della pagina 1 di 4."
Premere <Tab> per spostare lo stato attivo sulla griglia dati. JAWS afferma: "Questa è una griglia dati con 4 righe e 3 colonne. ID. Nome. Posizione." Dopo aver letto le intestazioni di colonna, il lettore di schermo legge le celle del corpo dati della tabella da sinistra a destra. Poi legge il focus corrente, "Riga 1. Colonna 1. ID: 10."
Premere <right arrow>. JAWS dice, "Colonna 2. Nome: Contabilità."
Premere <right arrow>. JAWS dice, "Colonna 3. Località: New York. Contiene controlli. È stata raggiunta l'ultima colonna."
Premere <Tab>. JAWS dice, "Visualizzazione dei dati: grafico. Grafico. Serie: Contabilità; Gruppo: Reparto; Valore: USD 3.750,00. Grafico."

Si noti che quando lo stato attivo si sposta tra i pannelli, JAWS non fornisce alcuna indicazione delle intestazioni del pannello. Non c'è nemmeno modo di scorrere la sequenza da pagina a pagina.
Aprire il file departments.html nell'editor di codice.
- Nome, Ruolo e valore del criterio di riuscita 4.1.2 richiede che a ciascuno dei componenti dei tre pannelli sia associata un'etichetta. Le intestazioni level-4 fungono da etichette visibili.
- Etichetta del criterio di operazione riuscita 2.5.3 nel nome richiede l'inclusione dell'intero testo dell'intestazione nell'etichetta. Gli attributi aria-label aggiunti nei seguenti passi da 18 a 23 incorporeranno il testo dell'intestazione del pannello.

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"
   . . . >

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]]"
   . . . >

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"
   . . . >

La modifica finale comporta i controlli di impaginazione per la pellicola nel pannello centrale.

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

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

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

      </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>

Salvare il file. Il file deve avere un aspetto simile a departments-html.txt.
Rieseguire la convalida del lettore di schermo. Assicurarsi che le etichette vengano pronunciate per la barra delle icone, la griglia dati e il grafico e che i controlli di impaginazione siano presenti sotto la barra delle icone.

L'esercitazione finale è stata completata nella serie di percorsi di apprendimento per l'accessibilità dell'applicazione.

Altre risorse di apprendimento

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

Per la documentazione sul prodotto, visitare Oracle Help Center.

Titolo e informazioni sul copyright

Test keyboard navigation in complex Oracle JET components

F34165-02

October 2022