Verificare l'accesso facilitato della tabella e del messaggio dei componenti di Oracle JET

Introduzione

Nell'esercitazione Esegui convalida lettore di schermo su un'applicazione Oracle JET sono stati risolti diversi problemi di accessibilità nella pagina Dipendenti. Ci sono diversi problemi che rimangono che affronteremo in questo tutorial.

Obiettivi

In questa esercitazione verrà descritto come identificare e risolvere i problemi di accessibilità rimanenti nella pagina Dipendenti dell'applicazione ACCLearningPath.

Prerequisiti

Task 1: Verifica struttura pagina

Il primo passo della revisione è garantire che tutte le intestazioni HTML necessarie siano presenti nella pagina.

  1. Andare alla directory ACCLearningPath del terminale ed eseguire l'app.

    $ ojet serve

    Il tuo browser si aprirà alla pagina Introduzione dell'app con la scheda Panoramica caricata. Fare clic sulla scheda Dipendenti nella barra delle schede e ispezionare la pagina Dipendenti.

    Pagina Dipendenti prima

    La pagina Dipendenti è composta da due pannelli. Le intestazioni HTML mancano nella pagina stessa e in ogni pannello.

  2. Passare alla cartella ACCLearningPath/src/js/views e aprire il file employees.html in un editor.

  3. Individuare il primo tag <div> di apertura nel file.

    <div class="oj-hybrid-padding">
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

  4. Subito dopo l'apertura del tag <div>, inserire un'intestazione h3 per identificare la pagina Dipendenti.

    <div class="oj-hybrid-padding">
   <h3>Employees</h3>
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

  5. Individuare il tag <div> di apertura dal pannello sinistro contenente una tabella.

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

  6. Tra i tag <div> e <oj-table> di apertura, inserire un'intestazione h4 per assegnare un'etichetta corretta a questo pannello.

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

  7. Modificare l'attributo aria-label dell'elemento <oj-table> per includere sia il testo dell'intestazione che il testo delle istruzioni visualizzato nel secondo pannello.

       
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table - Activate a row to see employee details"
      . . . >

    La tabella ora è conforme sia all'etichetta WCAG Success Criterion 2.5.3 in Name che al WCAG Success Criterion 1.3.1 Info and Relationships. Per soddisfare questi criteri, sia l'etichetta visiva che il testo didattico del pannello destro devono essere inclusi nell'etichetta parlata di un controllo.

  8. Individuare il tag <div> di apertura che definisce il pannello destro della pagina Dipendenti contenente i dettagli del dipendente.

    <div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <oj-bind-if test="[[!activeRow()]]">

  9. Tra i tag <div> e <oj-bind-if>, inserire un'intestazione h4 sotto la regola orizzontale che identificherà questo pannello.

    <div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <h4>Employee Details</h4>
   <oj-bind-if test="[[!activeRow()]]">

  10. Salvare il file. Il file deve avere un aspetto simile a dipendenti-pagina-html.txt.

  11. Verificare le modifiche applicate nell'applicazione in esecuzione.

    Pagina Dipendenti dopo

Task 2: Eseguire un test solo da tastiera

Questa sezione e la seguente sezione Esegui un test del lettore di schermo di questa esercitazione devono essere eseguite senza utilizzare il mouse. Durante questo test, assicurarsi che il punto di messa a fuoco sia sempre chiaramente identificato e che l'ordine delle schede sia prevedibile.

  1. Nella pagina Dipendenti, premere <Ctrl+L> per impostare lo stato attivo sulla 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 principale immediatamente sotto il menu dell'utente.

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

  6. Premere <Tab>. Lo stato attivo passa all'intestazione della prima colonna, Numero dipendente, nella tabella Dipendenti.

  7. Premere <down arrow> per evidenziare la prima riga di dati della tabella.

    Il modulo Dettagli dipendente deve essere visualizzato nel pannello sul lato destro della pagina.

  8. Premere <Space> per selezionare la riga, quindi premere <F2> per spostare lo stato attivo sul primo elemento a schede, ovvero il pulsante Modifica.

  9. Premere <Space> per attivare il pulsante Modifica. Viene visualizzata la finestra di dialogo Modifica dipendente, con lo stato attivo spostato nel campo ID dipendente.

  10. Premere <Tab>. Lo stato attivo passa al campo Nome dipendente.

  11. Premere <Tab>. Focus passa al campo Titolo mansione.

  12. Premere <Tab>. Lo stato attivo viene spostato nel campo Data assunzione.

  13. Premere <Tab>. Stato attivo passa al campo Stipendio.

  14. Premere <Tab>. Lo stato attivo viene spostato sul pulsante Salva.

  15. Fare clic su <Space> per attivare il pulsante Save e chiudere la finestra di dialogo. Focus torna alla prima riga di dati selezionata della tabella Dipendenti.

    Notate la casella del messaggio nell'angolo in alto a sinistra della pagina. La casella di messaggio conferma il salvataggio degli aggiornamenti.

    Casella messaggio prima

    Il software di ingrandimento dello schermo pone l'attenzione sulla tabella dei dipendenti, quindi il messaggio di conferma potrebbe trovarsi al di fuori della finestra dell'ingranditore.

  16. Passare alla cartella ACCLearningPath/src/js/viewModels e modificare employees.js.

  17. Individuare la definizione di this.positionObject.

      this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "window",
  };

  18. Modificare la definizione positionObject in modo che la posizione dell'oggetto sia basata sulla tabella anziché sulla finestra.

      this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "#table",
  };

    Salvare il file. Ripetere quindi i passaggi da 1 a 15 del test solo tastiera per verificare che la posizione del messaggio di conferma sia stata spostata nella tabella.

    Casella messaggio dopo

Task 3: Esecuzione di un test 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 Dipendenti 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 Dipendenti selezionata. 3 di 4."

  9. Premere <Tab>. JAWS afferma: "Tabella con 6 colonne e più di 13 righe. Tabella Dipendenti: attiva una riga per visualizzare i dettagli del dipendente. Intestazione colonna 1, numero dipendente." Focus si sposta alla prima cella nella riga delle intestazioni di colonna della tabella.

  10. Premere <down arrow>. JAWS dice: "Riga 1: 7839. Non selezionato. Colonna 1, Numero dipendente: 7839." Lo stato attivo si trova nella prima riga di dati della tabella.

  11. Premere <right arrow>. JAWS indica il numero di colonna e il nome utente del dipendente.

  12. Premere <Space>. La riga viene selezionata e JAWS dice: "Spazio. Selezionato."

  13. Premere <F2> per passare al primo elemento tabulabile. JAWS dice: "Modifica pulsante. Per attivare, premere Invio."

  14. Premere <Enter>. JAWS dice: "Modifica dipendente. Modifica il dipendente. Dipendente Id 7,839…" Il lettore di schermo apre la finestra di dialogo Modifica dipendente e continuerà a leggere finché non viene premuto un tasto.

  15. Fare clic su <Tab> cinque volte per passare i campi modificabili e di sola lettura al pulsante Salva. JAWS dice: "Salva pulsante. Per attivare, premere Invio."

  16. Premere <Enter>. JAWS dice: "Categoria messaggio: conferma. Aggiornamenti salvati. Le modifiche per il dipendente Onegin sono state salvate". Il nome utente del dipendente nell'app potrebbe essere diverso qui, a causa delle modifiche apportate in un'esercitazione precedente.

  17. Premere <F6> per leggere il contenuto della casella dei messaggi. JAWS afferma: "Regione complementare dei messaggi. Aggiornamenti salvati. Inserimento dell'area messaggi. Premere F6 per tornare all'elemento evidenziato in precedenza.

  18. Premere <Tab>. JAWS dice: "Chiudi pulsante. Per attivare, premere Invio."

  19. Fare clic su <Enter> per chiudere la casella di messaggio. Focus torna alla tabella e alla cella selezionata precedente.

  20. Arrestare il lettore di schermo.

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

Completa il terzo set di correzioni per l'accesso facilitato.

Passo successivo

Passare all'esercitazione successiva in questo modulo.

Questa esercitazione fa parte del modulo Convalida e correzione dell'accesso facilitato alle applicazioni.

È possibile tornare alla pagina principale del percorso di apprendimento per l'accesso facilitato per accedere a tutti i moduli sull'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.