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 validation anziché il termine test. Esiste una risposta definitiva con un test; la convalida implica più di una risposta corretta. Il risultato della convalida cambia leggermente man mano che le versioni del browser e del lettore di schermo cambiano.

In WCAG (Web Content Accessibility Guidelines) 2.1 è disponibile una serie di oltre sessanta criteri di successo 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, la revisione di un'app da screen-reader viene eseguita senza l'uso di un mouse e con lo schermo spento o coperto.

Imparate a fare affidamento sull'output parlato dal lettore di schermo piuttosto che su ciò che sta accadendo visivamente sullo schermo. Ciò che si vede e si sente può essere drasticamente diverso. Tenere presente che l'ascolto di lettori di schermo può rappresentare una sfida per coloro che non hanno familiarità con loro.

Obiettivi

In questa esercitazione, imparerai come convalidare un'applicazione Web con un lettore di schermo e acquisire familiarità con le voci del lettore di schermo.

Prerequisiti

Task 1: Scaricare e installare un lettore di schermo

I due lettori di schermo più utilizzati in esecuzione 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 questa esercitazione specifica JAWS, è possibile utilizzare JAWS o NVDA.

Usa JAWS

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

Scarica l'ultima release 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 preferiscono spesso 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 dal 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 NVDA e installarla.

Task 2: Prepara per convalida lettore di schermo

Ci sono diversi criteri di successo WCAG 2.1 che indirizzano la convalida del lettore di schermo.

Tutti i grafici devono avere etichette di testo. Se per un elemento grafico viene fornito testo alternativo, il lettore di schermo deve annunciare il testo alternativo.

Questo criterio è stato introdotto nell'esercitazione Ispezione visiva precedente poiché le intestazioni fanno parte della struttura della pagina. Nel contesto dell'utilizzo dei lettori di schermo, il criterio di operazione riuscita 1.3.1 fa riferimento all'associazione delle etichette ai controlli e all'associazione delle intestazioni di riga o colonna alle celle dati.

Quando si convalida una pagina, chiedere se stessi. 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 tali controlli diventano attivi. 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 il focus. 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 per la tecnologia di assistenza. 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 elemento grafico.

Il lettore di schermo dovrebbe annunciare tutti i messaggi di stato visualizzati nella pagina. I messaggi notificano all'utente la 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: Usa JAWS per convalidare la scheda Dipendenti

Sia che si utilizzi JAWS o NVDA, il processo di convalida del lettore di schermo è simile. L'obiettivo della convalida è garantire che gli elementi della pagina siano letti in modo accurato. Il processo potrebbe sembrare noioso, ma entrambi i lettori di schermo dispongono di tasti speciali per consentire agli utenti di navigare più rapidamente in un'applicazione Web mediante il controllo intestazione, collegamento o modulo.

Quando si utilizza uno dei due lettori di schermo, utilizzare una tastiera estesa in quanto i lettori di schermo utilizzano il tastierino numerico sul lato destro della tastiera per controlli speciali.

Utilizzare il lettore di schermo e l'applicazione iniziale 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 modalità assicura che vengano effettuate tutte le connessioni necessarie tra il lettore di schermo e il browser.

  2. Eseguire l'applicazione iniziale.

    $ ojet serve

    Il browser viene aperto alla pagina Introduzione dell'applicazione ed è possibile iniziare la convalida.

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

  3. Nell'applicazione in esecuzione utilizzare il mouse per fare clic sulla scheda Dipendenti. Dopo questa fase, non utilizzare il mouse.

    Scheda Dipendenti

    Descrizione dell'immagine employees_page.png

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

  5. Premere <Tab>. JAWS dice, "Passa al contenuto principale. Stesso collegamento alla pagina."

  6. Premere <Tab>. JAWS legge "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."

  7. Premere <Tab>. JAWS afferma: "Scheda Area di navigazione. Scheda introduttiva 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.

    Né il lettore di schermo fornisce informazioni complete sui contenuti della tabella.

    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 il tag in modo da 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 deve avere un aspetto simile a employees-html.txt

  14. Ripetere i passi da 3 a 9 per verificare che aria-label sia ora pronunciato quando la tabella riceve il focus. Questo <Tab> iniziale nella tabella pone l'attenzione sulla prima intestazione di colonna e JAWS dice "Tabella con 6 colonne e più di 13 righe. Tabella dipendenti. Intestazione colonna 1. Codice dipendente."

  15. Premere <down arrow>. Il focus viene spostato nella cella della tabella nella riga 1, colonna 1. JAWS dice, "Riga 1. 7839. Non selezionato. Colonna 1. Codice dipendente. 7839".

    Un utente non disabilitato fa clic in un punto qualsiasi di una riga per selezionarla. Tuttavia, un utente basato solo sulla 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."

    I tasti freccia premono 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 il movimento sia verticale o orizzontale nella tabella. Ad esempio, JAWS legge il numero di riga e il valore della colonna Numero dipendente della riga durante la navigazione verticale 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. Manager del titolo."

Task 4: Convalida modifica dati tabella

  1. Nell'applicazione in esecuzione, premere <Home> per passare alla prima colonna e riga della tabella. Premere quindi <Space> per selezionare la riga e premere <F2> per attivare la modalità con interazione della riga.

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

    Descrizione dell'immagine emp_page_edit_emp.png

  3. Premere <Tab> per spostare lo stato attivo sul campo Nome dipendente. JAWS dichiara: "Modifica nome dipendente. King. Digitare il testo."

  4. Digitare un nuovo nome, quindi premere <Tab>. JAWS dice, "Job Title edit. Presidente. Digitare il testo."

  5. Premere <Tab>. JAWS afferma: "Modifica della data di assunzione di sola lettura. 16 novembre 1981."

  6. Premere <Tab>. JAWS dice, "Spedizione di modifica dello stipendio. 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, "Pulsante Salva. Per attivare, premere Invio."

  8. Fare clic su <Enter> per attivare il pulsante Salva. JAWS leggerà un messaggio di stato simile per il salvataggio: "Categoria messaggio: conferma. Aggiornamenti salvati. Le modifiche per il dipendente Onegin sono state salvate. percorso formativo accessibilità." Gli utenti del lettore di schermo devono essere consapevoli delle informazioni relative al titolo della pagina, alla visualizzazione dell'area del messaggio e alla conferma del salvataggio. Chiudere la casella del messaggio.

    Pagina Dipendenti con casella di messaggio di conferma

    Descrizione dell'immagine emp_page_msg_box.png

Task 5: Utilizzare un lettore di schermo per convalidare i grafici con etichetta

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

Hai completato l'esercitazione finale nel percorso di apprendimento Identifica problemi di accesso facilitato. Passare al percorso di apprendimento Rendi le applicazioni Oracle JET accessibili: Convalida e correggi accesso facilitato applicazione per continuare con il secondo percorso di apprendimento in questa serie di accesso facilitato.

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.