Esegui convalida lettore di schermo su un'applicazione Oracle JET

Introduzione

Quando si utilizza un lettore di schermo con un'applicazione Web, viene utilizzato il termine convalida anziché la parola test. C'è una risposta definitiva con un test; la convalida implica più di una risposta giusta. Il risultato della convalida cambia leggermente man mano che le versioni del browser e del lettore di schermo cambiano.

La sezione Web Content Accessibility Guidelines (WCAG) 2.2 contiene più di sessanta criteri per la creazione di un'applicazione Web accessibile. In questo tutorial, ci concentreremo su un sottoinsieme di questi criteri che si occupano esclusivamente di utilizzare un lettore di schermo per navigare in un'app.

Idealmente, una revisione dello screen-reader di un'app viene eseguita senza l'uso di un mouse e con lo schermo spento o coperto.

Impara a fare affidamento sull'output parlato dal lettore di schermo piuttosto che su ciò che accade visivamente sullo schermo. Ciò che viene visto e sentito può essere drasticamente diverso. Essere consapevoli del fatto che l'ascolto di lettori di schermo può rappresentare una sfida per coloro che non hanno familiarità con loro.

Obiettivi

In questo tutorial, imparerai come convalidare un'app web con un lettore di schermo e familiarizzare con le voci del lettore di schermo.

Prerequisiti

Task 1: Scaricare e installare un lettore di schermo

I due lettori di schermo più utilizzati su Windows sono Job Access With Speech (JAWS) di Vispero e NonVisual Desktop Access (NVDA) di NVAccess.

Nota: l'autore di questo percorso di apprendimento preferisce l'output del lettore di schermo JAWS. Anche se il contenuto di questo tutorial specifica JAWS, non esitate a utilizzare JAWS o NVDA.

Usa JAWS

Con una durata di oltre vent'anni, JAWS è uno dei primi lettori di schermo ad entrare nel mercato della tecnologia assistiva. Una vasta gamma di voci da cui scegliere consente un'esperienza di ascolto più personalizzata. La funzionalità JAWS supporta i messaggi ARIA (Accessible Rich Internet App) e strutture web complesse, e secondo l'autore, è spesso più robusto di altri lettori di schermo. JAWS offre gratuitamente un periodo dimostrativo di 40 minuti, il che è sufficiente per questo tutorial.

Scarica l'ultima release di JAWS e installala. Ricordarsi sempre di avviare JAWS prima di avviare il browser per eseguire la convalida.

Usa NVDA

NVDA è disponibile gratuitamente. È open source e alimentato da Python. Gli utenti spesso preferiscono le voci disponibili con NVDA, e le recensioni testa a testa di JAWS e NVDA rivelano che NVDA legge più accuratamente le pagine web. JAWS può indovinare-leggere un'etichetta, mentre NVDA legge rigorosamente da markup. Due caratteristiche principali di NVDA sono i suoi piccoli requisiti di risorse e la sua portabilità. Installarlo su un'unità flash per eseguire il software su altri dispositivi.

Scaricare l'ultima release di NVDA e installarla.

Task 2: Preparazione per convalida lettore di schermo

Esistono diversi criteri di successo WCAG 2.2 per la convalida del lettore di schermo.

Tutti gli elementi grafici devono avere etichette di testo. Se viene fornito testo alternativo per un grafico, il lettore di schermo dovrebbe annunciare il testo alternativo.

Questo criterio è stato introdotto nella precedente esercitazione sull'ispezione visiva perché le intestazioni fanno parte della struttura della pagina. Nel contesto dell'utilizzo dei lettori di schermo, il criterio di successo 1.3.1 si riferisce all'associazione delle etichette ai controlli e all'associazione delle intestazioni di riga o colonna alle celle di dati.

Quando si convalida una pagina, chiedersi: quando si sposta una cella per cella in una tabella, il lettore di schermo annuncia le intestazioni di colonna e riga insieme alle coordinate e al contenuto della cella?

Il lettore di schermo dovrebbe annunciare il nome, il ruolo, lo stato e il valore dei controlli man mano che questi ultimi ottengono lo stato attivo. Nome è l'etichetta del controllo. Ruolo è il tipo di controllo. Stato definisce se il controllo è selezionato, selezionato, espanso o compresso. Valore è il contenuto effettivo del controllo.

Verificare che il lettore di schermo annunci il testo del collegamento mentre riceve lo stato attivo. Assicurarsi che il testo sia sufficiente per identificare lo scopo del collegamento.

Il testo di un'etichetta visibile di un componente deve essere incluso nelle informazioni sull'etichetta fornite alla tecnologia assistiva. Se il componente utilizza un attributo aria-label, il testo dell'etichetta aria deve includere il testo dell'etichetta visibile anche se l'etichetta visibile è un grafico.

Il lettore di schermo dovrebbe annunciare tutti i messaggi di stato visualizzati nella pagina. I messaggi notificano all'utente una modifica alla pagina o il completamento di un processo.

JAWS e NVDA possono presentare il materiale in modo diverso, ma ogni lettore di schermo deve comunicare determinate informazioni sugli elementi della pagina:

Task 3: utilizzare JAWS per convalidare la scheda Dipendenti

Se si utilizza JAWS o NVDA, il processo di convalida del lettore di schermo è simile. L'obiettivo della convalida è garantire che gli elementi della pagina siano letti con precisione. Il processo può sembrare noioso, ma entrambi i lettori di schermo hanno tasti speciali per consentire agli utenti di navigare più rapidamente in un'app Web tramite intestazione, collegamento o controllo modulo.

Quando si utilizza uno dei due lettori di schermo, utilizzare una tastiera di grandi dimensioni perché i lettori di schermo utilizzano il tastierino numerico sul lato destro della tastiera per controlli speciali.

Utilizzare il lettore di schermo e l'app di avvio per convalidare la scheda Dipendenti della pagina Introduzione.

  1. Avviare JAWS o NVDA.

    È sempre consigliabile avviare il lettore di schermo prima di aprire il browser. Questa procedura garantisce che vengano effettuate tutte le connessioni necessarie tra il lettore di schermo e il browser.

  2. Eseguire l'app iniziale.

    $ ojet serve

    Il browser si apre alla pagina Introduzione dell'app e si è pronti per iniziare la convalida.

    Entrambi i lettori di schermo dovrebbero iniziare a leggere quando la pagina è completamente caricata.

  3. Nell'app in esecuzione, utilizzare il mouse per fare clic sulla scheda Dipendenti. Dopo questo passaggio, non utilizzare il mouse.

    Scheda Dipendenti

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

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

  6. Premere <Tab>. JAWS legge: "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 Dipendenti selezionata. 3 di 4."

  9. Premere <Tab>. JAWS dice, "Tabella con 6 colonne e più di 13 righe…" Il lettore di schermo continuerà a leggere le intestazioni e i dati della tabella.

    Nessuno dei due lettori di schermo fornisce informazioni complete su ciò che la tabella contiene.

    Il criterio di successo 4.1.2 specifica che le etichette che identificano lo scopo devono accompagnare una tabella. Aggiungere un'etichetta descrittiva alla tabella.

  10. Passare alla cartella ACCLearningPath/src/js/views e aprire il file employees.html.

  11. Individuare il tag <oj-table>.

          
  <oj-table id="table"
     class="table-size"
     first-selected-row="{{selectedRow}}"
     . . .
  </oj-table>

  12. Modificare la tag per includere un attributo aria-label.

          
  <oj-table id="table"
     class="table-size"
     first-selected-row="{{selectedRow}}"
     aria-label="Employees Table"
     . . .
  </oj-table>

  13. Salvare e chiudere il file. Il file dovrebbe avere un aspetto simile a employees-html.txt

  14. Ripetere i passaggi da 3 a 9 per verificare che aria-label venga pronunciato quando la tabella riceve lo stato attivo. Questo <Tab> iniziale nella tabella pone lo stato attivo sulla prima intestazione di colonna e JAWS dice: "Tabella con 6 colonne e più di 13 righe. Tabella dei dipendenti. Intestazione colonna 1. Matricola dipendente."

  15. Premere <down arrow>. Il focus si sposta nella cella della tabella nella riga 1, colonna 1. JAWS dice: "Riga 1. 7839. Non selezionato. Colonna 1. Matricola dipendente. 7839".

    Un utente non disabilitato fa clic in un punto qualsiasi della riga per selezionarlo. Tuttavia, un utente solo con tastiera preme la barra spaziatrice per selezionare la riga.

  16. Premere <right arrow> per passare alla seconda colonna. JAWS leggerà: "Colonna 2. Nome utente King."

    Premere il tasto freccia per spostare una cella nella direzione del tasto freccia selezionato. JAWS deve leggere il nuovo numero di riga o colonna e l'intestazione a seconda che lo spostamento sia verticale o orizzontale nella tabella. Ad esempio, JAWS legge il numero di riga e il valore della colonna Numero dipendente della riga quando si naviga verticalmente nella tabella.

  17. Premere nuovamente <right arrow> per passare alla colonna Titolo. JAWS dice: "Colonna 3. Titolo Presidente".

  18. Premere <down arrow>. JAWS dice: "Riga 2. 7698. Non selezionato. Responsabile del titolo".

Task 4: Convalida modifica dati tabella

  1. Nell'app in esecuzione, premere <Home> per passare alla prima colonna e riga della tabella. Quindi premere <Space> per selezionare la riga, quindi premere <F2> per attivare o disattivare la riga in modalità attivabile.

    Quando nella tabella è presente un elemento tabulabile, ad esempio il pulsante Modifica nell'ultima colonna della riga, premendo <F2> si sposta lo stato attivo sul primo elemento tabulabile. JAWS sposta lo stato attivo sul pulsante Modifica e dice "Modifica pulsante. Per attivare, premere Invio."

  2. Premere <Enter>. JAWS apre il modulo Modifica dipendente e dice: "Modifica dipendente. ID dipendente: 7839…" JAWS continuerà a leggere le informazioni del dipendente nel modulo fino a quando non viene premuto un tasto.

    Pagina Dipendenti con finestra di dialogo Modifica dipendente

  3. Premere <Tab> per spostare lo stato attivo nel campo Nome dipendente. JAWS afferma: "Modifica del nome del dipendente. King. Digita il testo."

  4. Digitare un nuovo nome, quindi premere <Tab>. JAWS dice: "Modifica della qualifica. Presidente. Digita il testo."

  5. Premere <Tab>. JAWS dice: "Data assunzione modifica di sola lettura. il 16 novembre 1981."

  6. Premere <Tab>. JAWS dice: "Salario modifica spinbox. 5.000. Immettere un numero maggiore o uguale a 0. Per impostare il valore, utilizzare i tasti freccia o digitare il valore."

  7. Premere <Tab>. JAWS dice: "Salva pulsante. Per attivare, premere Invio."

  8. Premere <Enter> per attivare il pulsante Salva. JAWS leggerà un messaggio di stato simile per il tuo salvataggio: "Categoria messaggio: conferma. Aggiornamenti salvati. Le modifiche per il dipendente Onegin sono state salvate. Percorso di apprendimento dell'accessibilità". Gli utenti del lettore di schermo devono essere a conoscenza delle informazioni che riguardano il titolo della pagina, la visualizzazione dell'area dei messaggi e la conferma del salvataggio. Chiudere la casella del messaggio.

    Pagina Dipendenti con casella messaggio di conferma

Task 5: Utilizzare un lettore di schermo per convalidare la grafica con etichetta

Sia JAWS che NVDA hanno un tasto di scelta rapida per individuare la grafica etichettata. Premere <Shift+G> per spostare lo stato attivo sul successivo grafico con etichetta nella pagina. Il logo Oracle è l'unico grafico della pagina Introduzione. Focus passa al logo e JAWS afferma "Oracle Logo Graphic".

Passo successivo

Questa esercitazione conclude il modulo Identifica problemi di accesso facilitato in questo percorso di apprendimento sull'accesso facilitato alle applicazioni Web.

È possibile passare all'esercitazione successiva nel percorso di apprendimento Personalizza gli eventi del ciclo di vita connesso nel modulo Convalida e correzione dell'accesso facilitato alle applicazioni.

È inoltre possibile tornare alla pagina principale del percorso di apprendimento accessibilità per accedere a tutti i moduli relativi all'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.