Crea app Angular più accessibili

1. Prima di iniziare

L'accessibilità è una parte vitale dello sviluppo web, in quanto garantisce che gli utenti possano percepire, comprendere, navigare e interagire con le app. Infatti, 1 adulto su 4 negli Stati Uniti ha una disabilità che influisce sulle principali attività della vita. A livello mondiale, circa il 15% della popolazione mondiale - più di 1 miliardo di persone - ha una qualche forma di disabilità, e circa il 2-4% ne ha gravi difficoltà.

Le condizioni comuni che influiscono sull'utilizzo del web da parte di una persona includono cecità o ipovedenti, sordità o disabilità dell'udito, capacità motorie limitate, disabilità cognitive e daltonismo. Questo è solo un elenco parziale.

In questo corso, l'a11y è l'abbreviazione di termini di accessibilità. Nota che la a è seguita da 11 caratteri e da una y.

Per un'introduzione approfondita a problemi e tecniche per la progettazione di app accessibili, consulta la pagina Accessibilità.

Cosa creerai

• Usa le best practice e le tecniche integrate per risolvere i problemi comuni di accessibilità al web in una demo dell'app Dumpling Shop Angular
• Rispetta tutte le linee guida sull'accessibilità, le WCAG 2.0 e ARIA 1.2 e supera i controlli sull'accessibilità dell'ascia e di Lighthouse.

Cosa imparerai a fare

Scoprirai otto problemi di accessibilità comuni nelle app Angular che interessano gli utenti, nonché come identificarli e risolverli. Nello specifico:

• Usa gli Strumenti per sviluppatori di Google Chrome, Lighthouse e Axe per verificare l'accessibilità della tua app
• Risolvere le insidie relative alle app a pagina singola (APS) con titoli di pagina univoci
• Risolvere i problemi di basso contrasto dei colori per utenti ipovedenti
• Usa l'HTML semantico per garantire che gli screen reader navighino correttamente nella pagina
• Usa Angular Material e i controlli non nidificati per garantire che gli screen reader possano accedere a tutti i controlli
• Aggiungere il supporto ARIA per gli screen reader
• Importazione e utilizzo del pacchetto Angular CDK a11y
• Usa FocusTrap per la navigazione dello screen reader con componenti personalizzati
• Annuncia le notifiche con il CDK LiveAnnouncer
• Rileva gli utenti con la modalità Contrasto elevato e implementa temi ad alto contrasto

Che cosa ti serve

• Conoscenza di Angular, SCSS, Typescript, Git e degli strumenti per sviluppatori di Chrome

2. Configurazione

Richiedi il codice

Tutto ciò di cui hai bisogno per questo progetto si trova in un repository GitHub. Per iniziare, clona il codice e aprilo nel tuo ambiente di sviluppo preferito.

Clonare il repository e gestire l'app

VSCode o un IDE locale è il metodo consigliato per l'utilizzo di questo codelab.

1. Apri una nuova scheda del browser e vai a https://github.com/googlecodelabs/angular-accessibility.
2. Crea un fork e clona il repository e cd angular-accessibility/ nel repository.
3. Controlla il ramo del codice di avvio git checkout get-started.
4. Apri il codice in VSCode o nel tuo IDE preferito.
5. Esegui npm install per installare le dipendenze necessarie per eseguire il server.
6. Esegui ng serve per eseguire il server.
7. Apri una scheda del browser all'indirizzo http://localhost:4200.

3. Stabilisci una base di riferimento

Qual è il tuo punto di partenza?

Il punto di partenza è un'app di base per la ristorazione progettata per questo codelab. Il codice è stato semplificato per mostrare i concetti di questo codelab e ha poche funzionalità.

Esplora la demo

Per iniziare, illustra le tre funzionalità della tua app:

1. Utilizza la barra di navigazione per visualizzare i percorsi Il nostro negozio, La nostra storia e Trovaci e visualizzare i dettagli sull'azienda di ravioli.
2. Cambia i temi per attivare/disattivare la modalità Luce e Buio.
3. Personalizza il ripieno, la quantità e il colore dei ravioli del tuo ordine.
4. Seleziona Acquista per registrare l'ordine personalizzato nella console.

Utilizzare Angular per risolvere problemi comuni di accessibilità web

In questo codelab, ti concentrerai sull'accessibilità delle funzionalità esistenti di questa app. Inizierai identificando i problemi di accessibilità nella tua app, quindi trasforma 🛑 in ✅ implementando una soluzione.

Come sai quale problema risolvere?

Inizia ogni esempio riconoscendo il problema di accessibilità utilizzando una combinazione di test manuali e automatici.

Nello stato attuale del web, è obbligatorio testare manualmente l'accessibilità.

Hai a disposizione strumenti in grado di identificare i problemi di accessibilità, ma nessuno strumento è in grado di certificare che un'app è completamente accessibile. I test manuali assicurano la validità di un'ampia gamma di concetti di accessibilità, che includono l'ordine logico dei contenuti e la parità di funzionalità.

Test manuale

Per testare manualmente l'accessibilità in questo corso, attiva lo screen reader integrato del nostro computer e naviga nell'app con la navigazione da tastiera. Per ulteriori informazioni, vedi Semantica e screen reader.

Fai pratica attivando lo screen reader e navigando nello schermo.

Puoi utilizzare VoiceOver integrato in MacOS. Fai clic su Preferenze di Sistema > Accessibilità > VoiceOver > Abilita VoiceOver per attivarlo. Per attivare/disattivare VoiceOver, premi velocemente tre volte Touch ID tenendo premuto il tasto Command.

In questo corso, testerai principalmente i problemi manualmente e utilizzerai strumenti automatizzati per aiutarti a verificare specifiche funzionalità automatizzabili.

Test automatici

Puoi anche utilizzare alcuni strumenti di sviluppo per automatizzare e controllare le app. Questi strumenti ti consentono di controllare aspetti come la presenza di testo alternativo su un'immagine o il rapporto di contrasto di un colore del testo. Pensa a questi strumenti come a linter, possono riconoscere la presenza di un testo alternativo, ma è necessario verificare manualmente che i contenuti siano logici e forniscano un valore.

Strumenti per sviluppatori di Lighthouse e Chrome

1. Apri gli Strumenti per sviluppatori di Chrome.
2. Seleziona la scheda Lighthouse e seleziona la casella di controllo Accessibilità.
3. Fai clic su Genera report per eseguire un controllo di Lighthouse per l'accessibilità.

Ascia

1. Installa l'estensione axe DevTools. Per vedere l'estensione potrebbe essere necessario riavviare il browser.
2. Apri Strumenti per sviluppatori di Chrome.
3. Seleziona la scheda axe DevTools, quindi Scansiona tutta la pagina per eseguire una scansione DevTools di Axe.

Analisi tramite lint

Puoi utilizzare le regole ESLint Angular per lint del codice per gli attributi a11y automatizzabili.

In eslint.json, aggiungi quanto segue, applicabile all'accessibilità:

"@angular-eslint/template/accessibility-alt-text": 2,
"@angular-eslint/template/accessibility-elements-content": 2,
"@angular-eslint/template/accessibility-label-for": 2,
"@angular-eslint/template/no-positive-tabindex": 2,
"@angular-eslint/template/accessibility-table-scope": 2,
"@angular-eslint/template/accessibility-valid-aria": 2,
"@angular-eslint/template/click-events-have-key-events": 2,
"@angular-eslint/template/mouse-events-have-key-events": 2,
"@angular-eslint/template/no-autofocus": 2,
"@angular-eslint/template/no-distracting-elements": 2

Per maggiori informazioni, consulta le ultime regole ESLint su GitHub.

Il tuo punto di partenza

Utilizzando i nuovi metodi di test, puoi identificare i seguenti problemi nella tua app utilizzando i controlli di Lighthouse e Axe e VoiceOver manuale:

Controllo dell'accessibilità:

• 🛑 Tutte le pagine hanno lo stesso titolo
• 🛑 Gli elementi devono avere un contrasto di colore sufficiente
• 🛑 Il codice HTML deve avere un ordine, un nome e un ruolo logici
• 🛑 Le caselle di controllo nidificate non sono selezionabili per gli screen reader
• 🛑 Lo screen reader non legge i valori del cursore
• 🛑 Lo stato attivo dello screen reader nel selettore colori chiude la finestra di dialogo
• 🛑 Modifiche, errori e notifiche non vengono annunciati
• 🛑 La modalità Contrasto elevato non è attiva

4. Definisci titoli di pagina univoci

Fornire titoli di pagina univoci e concisi aiuta gli utenti che utilizzano i servizi di accessibilità a comprendere rapidamente il contenuto e lo scopo di una pagina web. I titoli delle pagine sono fondamentali per gli utenti con disabilità visive perché sono il primo elemento della pagina annunciato dai software di lettura dello schermo.

Angular è un'app a pagina singola e, di conseguenza, la maggior parte delle transizioni, ad esempio lo spostamento in una nuova pagina, non prevede il ricaricamento della pagina. Fino a poco tempo fa, ciò significava che ogni pagina aveva un titolo identico e non forniva alcun valore per comprenderne i contenuti o lo scopo.

In Angular v14, il router ha aggiunto un metodo integrato per definire titoli di pagina univoci fin dal primo avvio. Questo approccio offre un approccio semplificato per garantire che gli sviluppatori seguano le best practice per i titoli delle pagine.

Entro la fine di questa sezione, la tua app supererà il seguente controllo:

• 🛑 Tutte le pagine hanno lo stesso titolo

Puoi trovare ciascuno di questi passaggi sotto il commento: TODO: #4. Define unique page titles.

Identifica il problema

Per identificare questo problema, attiva lo screen reader e spostati tra le schede Il nostro negozio, La nostra storia e Trovaci per visualizzare i titoli delle pagine:

1. Attiva VoiceOver.
2. Utilizza la navigazione delle schede per navigare da una pagina all'altra.
3. Verifica che il titolo della pagina sia sempre conforme in Angular.

Questo è un problema perché il titolo della pagina deve essere univoco affinché l'utente possa capire rapidamente di cosa tratta la pagina senza doverla scorrere.

Aggiungere titoli di pagina significativi

Se una pagina o una vista cambiano, vuoi gestire correttamente il titolo della pagina. Per risolvere il problema, utilizza la proprietà Router.title integrata di Angular per definire titoli univoci per ogni pagina.

1. Aggiungi un titolo univoco a ciascuna delle tre route definite:

src/app/app-routing.module.ts

const routes: Routes = [
  { path: 'shop', component: ShopComponent, title: 'Our Shop – a11y in Angular' },
  { path: 'about', component: AboutComponent, title: 'Our Story - a11y in Angular' },
  { path: 'locate', component: LocationComponent, title: 'Find Us - a11y in Angular' },
  { path: '',   redirectTo: '/shop', pathMatch: 'full' },
  { path: '**', component: ShopComponent },
];

In questo modo, verrà importato e utilizzato automaticamente Router's Title Service per gestire la modifica del titolo della pagina durante la navigazione in modo che corrisponda alla proprietà del titolo definita nelle nostre route. Puoi anche gestire titoli di pagina più complicati utilizzando un elemento TitleStrategy personalizzato.

Verifica modifiche

Riattiva lo screen reader e verifica le modifiche. Ora le pagine dovrebbero avere titoli univoci.

Controllo dell'accessibilità:

• ✅ Tutte le pagine hanno titoli univoci.
• 🛑 Gli elementi devono avere un contrasto di colore sufficiente
• 🛑 Il codice HTML deve avere un ordine, un nome e un ruolo logici
• 🛑 Le caselle di controllo nidificate non sono selezionabili per gli screen reader
• 🛑 Lo screen reader non legge i valori del cursore
• 🛑 Lo stato attivo dello screen reader nel selettore colori chiude la finestra di dialogo
• 🛑 Modifiche, errori e notifiche non vengono annunciati
• 🛑 La modalità Contrasto elevato non è attiva

5. Assicurati che il contrasto di colore sia adeguato

Il tuo design potrebbe sembrare accattivante, ma non lo è se le persone con disabilità visive, ad esempio daltonismo, non riescono a leggere i tuoi contenuti. Le Linee guida per l'accessibilità dei contenuti web (WCAG 2.0) definiscono una serie di rapporti di contrasto di colore, che assicurano l'accessibilità dei contenuti. In Angular e sul web, puoi definire tavolozze dei colori che garantiscono che i componenti soddisfino questi standard e siano visibili agli utenti ipovedenti o daltonismo.

Entro la fine di questa sezione, la tua app supererà il seguente controllo:

• 🛑 Gli elementi devono avere un contrasto di colore sufficiente

Puoi trovare ciascuno di questi passaggi sotto i commenti: TODO: #5. Ensure adequate color contrast.

Utilizzare gli Strumenti per sviluppatori di Chrome per identificare i problemi a basso contrasto

Per identificare questo problema, utilizza gli Strumenti per sviluppatori di Chrome per esaminare gli elementi della tua app.

1. Utilizza lo strumento di ispezione per visualizzare i pulsanti con l'icona del menu. Puoi notare che il contrasto è 1,85, molto al di sotto dei requisiti WCAG.

2. Per individuare questi problemi di rapporto di contrasto, esegui il controllo Accessibilità in Lighthouse o sulla scansione dell'ascia.

Modificare il colore del tema Materiale

La combinazione di colori dei componenti è definita nel tema Materiale personalizzato. Aggiorni il valore del tema affinché rispetti le linee guida per il rapporto del contrasto di colore.

Aggiorna il tema Materiale per utilizzare un colore del testo più scuro, aumentando il rapporto di contrasto delle icone:

src/styles.scss

$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);

Puoi anche utilizzare gli strumenti di accessibilità integrati degli Strumenti per sviluppatori di Chrome per trovare un colore che soddisfi gli standard o per aggiornare i singoli valori dei colori in Sass.

Verifica modifiche

Controlla di nuovo gli elementi e verifica le modifiche. Ora il nostro tema dovrebbe avere rapporti di contrasto di colore sufficienti.

Controllo accessibilità

• ✅ Tutte le pagine hanno titoli univoci.
• ✅ I colori hanno un rapporto di contrasto sufficiente
• 🛑 Il codice HTML deve avere un ordine, un nome e un ruolo logici
• 🛑 Le caselle di controllo nidificate non sono selezionabili per gli screen reader
• 🛑 Lo screen reader non legge i valori del cursore
• 🛑 Lo stato attivo dello screen reader nel selettore colori chiude la finestra di dialogo
• 🛑 Modifiche, errori e notifiche non vengono annunciati
• 🛑 La modalità Contrasto elevato non è attiva

6. Utilizza HTML semantico

Gli elementi HTML nativi acquisiscono una serie di modelli di interazione standard importanti per l'accessibilità. Mentre lo stile di un paragrafo può essere definito come intervallo e un div può essere definito come pulsante, l'elemento HTML semantico garantisce che gli screen reader e la navigazione da tastiera comprendano le interazioni e i controlli del codice HTML.

Durante la creazione di componenti Angular, dovresti riutilizzare questi elementi nativi direttamente quando possibile, anziché implementare nuovamente comportamenti ben supportati. Ciò garantisce che la pagina abbia una buona struttura dei contenuti e un flusso naturale di contenuti, nonché che la scheda sia in un ordine logico per aiutare gli utenti a navigare nel sito web con un uso efficace della tastiera.

Entro la fine di questa sezione, la tua app supererà il seguente controllo:

• 🛑 Il codice HTML deve avere un ordine, un nome e un ruolo logici

Puoi trovare ciascuno di questi passaggi sotto i commenti: TODO: #6. Use Semantic HTML.

Identifica il problema

1. Attiva VoiceOver.
2. Utilizza la navigazione delle schede per fare clic sulla scheda La nostra storia.
3. Nota che l'ordine delle schede non è sequenziale.
4. Fai clic su Acquista.
5. Nota che il pulsante non viene riconosciuto come pulsante.

Modifica di un tag <div> a un <button>

Sostituisci il tag <div> personalizzato con un pulsante Materiale:

src/app/shop/shop.component.html

<button mat-flat-button 
  color="primary" 
  class="purchase-button"
  (click)="fauxPurchase()">
  Purchase
</button>

Utilizzare gli elementi di intestazione in sequenza

Riordina il testo per utilizzare l'HTML semantico e applica lo stile con Angular Material Tipografia:

src/app/about/about.component.html

<h2>Who are we?</h2>
<p class="mat-subheading-2">Have you ever thought, "wow, I love dumplings"?</p>
<p class="right mat-subheading-1">Who hasn't.</p>
<p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p> 
<p class="center mat-subheading-1">double the dumpling, double the fun.</p>
<div class="spacer"></div>
<h2>How are we different?</h2>
<p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
<p class="right mat-subheading-2">This shop is concept only.</p>

Verifica modifiche

Riattiva lo screen reader e verifica le modifiche. VoiceOver ora riconosce il pulsante e il testo viene letto in un ordine logico.

Controllo dell'accessibilità:

• ✅ Tutte le pagine hanno titoli univoci.
• ✅ I colori hanno un rapporto di contrasto sufficiente
• ✅ L'HTML semantico garantisce un'interazione logica
• 🛑 Le caselle di controllo nidificate non sono selezionabili per gli screen reader
• 🛑 Lo screen reader non legge i valori del cursore
• 🛑 Lo stato attivo dello screen reader nel selettore colori chiude la finestra di dialogo
• 🛑 Modifiche, errori e notifiche non vengono annunciati
• 🛑 La modalità Contrasto elevato non è attiva

7. Crea controlli selezionabili con Angular Material

Un modello di interazione complicato per i servizi di accessibilità è costituito dai controlli nidificati. Pensa a elementi secondari di menu o a caselle di controllo nidificate. Come fai a indicare a un utente che puoi selezionare un sottogruppo di opzioni o passare a una voce di menu principale?

In Angular, semplifica i menu e i controlli per creare componenti navigabili semplificando il più possibile i controlli. In questo esempio viene utilizzata la casella di riepilogo di Angular Material per creare un esempio di questo pattern di interazione.

Entro la fine di questa sezione, la tua app supererà il seguente controllo:

• 🛑 Le caselle di controllo nidificate non sono selezionabili per gli screen reader

Puoi trovare ciascuno di questi passaggi sotto i commenti: TODO: #7. Create selectable controls with Angular Material.

Identifica il problema

Per identificare questo problema, attiveremo il nostro screen reader e proveremo a selezionare una casella di controllo nidificata.

1. Attiva VoiceOver.
2. Seleziona gusti di ripieno diversi.
3. Nota che le caselle di controllo principali non specificano gli elementi secondari quando vengono letti da VoiceOver. Come fai a sapere che la casella di controllo Vegano non è selezionata ora che hai deselezionato la casella di controllo Bok Choy?

A11y in Angular Material

Sostituisci la casella di controllo semantica con la casella di controllo Materiale angolare, che contiene la conoscenza integrata di questo pattern di interazione. È importante notare che la sostituzione dei componenti con Material non ne garantisce l'accessibilità. Come per qualsiasi altro componente, devi eseguire il test manuale perché esistono molti modi per implementare il materiale in modo inaccessibile.

Sostituire le caselle di controllo con le caselle di controllo Materiale

1. Innanzitutto, aggiungi il nuovo elenco di ripieni e una variabile per memorizzare i gusti di ripieno che hai selezionato:

src/app/shop/shop.component.ts

@Component(...)
export class ShopComponent implements OnInit {
  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
  selectedFillings: string[] = [];

  fauxPurchase(): void {
    let flavor = '';
    this.selectedFillings.forEach(filling => {
      flavor = flavor + " " + filling
    })
  }
}

2. Aggiungi un <mat-selection-list> per sostituire questo disordinato raggruppamento di caselle di controllo HTML:

src/app/shop/shop.component.html

<mat-selection-list [(ngModel)]="selectedFillings" 
  aria-label="Dumpling fillings">
  <mat-list-option *ngFor="let flavor of fillings" 
    [value]="flavor" 
    color="primary">
    {{ flavor }}
  </mat-list-option>
</mat-selection-list>

I tuoi commenti di TODO mostrano anche dove puoi rimuovere alcuni Sass inutilizzati in src/app/shop/shop.component.scss per migliorare il tuo stile.

Verifica modifiche

Riattiva lo screen reader e verifica le modifiche. Ora le caselle di controllo sono selezionabili e ti consentono di navigare in modo più intuitivo con uno screen reader.

Controllo dell'accessibilità:

• ✅ Tutte le pagine hanno titoli univoci.
• ✅ I colori hanno un rapporto di contrasto sufficiente
• ✅ L'HTML semantico garantisce un'interazione logica
• ✅ Tutti i controlli sono raggiungibili dagli screen reader
• 🛑 Lo screen reader non legge i valori del cursore
• 🛑 Lo stato attivo dello screen reader nel selettore colori chiude la finestra di dialogo
• 🛑 Modifiche, errori e notifiche non vengono annunciati
• 🛑 La modalità Contrasto elevato non è attiva

8. Fornisci etichette di controllo con ARIA

Hai modificato i componenti HTML e Material semantici della tua app Angular, ma alcuni componenti richiedono attributi specifici per essere completamente esplorati dagli screen reader.

La specifica Accessible Rich Internet Applications (WAI-ARIA o ARIA) dell'iniziativa di accessibilità web consente di colmare i problemi che non possono essere gestiti con il codice HTML nativo. Consente di specificare attributi che modificano il modo in cui un elemento viene tradotto nell'albero dell'accessibilità.

Entro la fine di questa sezione, la tua app supererà il seguente controllo:

• 🛑 Lo screen reader non legge i valori del cursore

Puoi trovare ciascuno di questi passaggi sotto i commenti: TODO: #8. Provide control labels with ARIA.

Identifica il problema

Per identificare questo problema, attiva lo screen reader e sposta il cursore:

1. Attiva VoiceOver.
2. Vai al cursore della quantità e modifica il valore.
3. Nota che manca l'etichetta del valore.

Utilizzare gli attributi ARIA

Controllo delle etichette utilizzando aria-label per <mat-slider>:

src/app/shop/shop.component.html

<mat-slider
  aria-label="Dumpling order quantity slider"
  id="quantity"
  name="quantity"
  color="primary"
  class="quantity-slider"
  [max]="13"
  [min]="1"
  [step]="1"
  [tickInterval]="1"
  thumbLabel
  [(ngModel)]="quantity">
</mat-slider>

Verifica modifiche

Riattiva lo screen reader e verifica le modifiche. Ora puoi spostare il cursore.

Controllo dell'accessibilità:

• ✅ Tutte le pagine hanno titoli univoci.
• ✅ I colori hanno un rapporto di contrasto sufficiente
• ✅ L'HTML semantico garantisce un'interazione logica
• ✅ Tutti i controlli sono raggiungibili dagli screen reader
• ✅ Il cursore utilizza gli attributi ARIA per fornire un'etichetta
• 🛑 Lo stato attivo dello screen reader nel selettore colori chiude la finestra di dialogo
• 🛑 Modifiche, errori e notifiche non vengono annunciati
• 🛑 La modalità Contrasto elevato non è attiva

9. Aggiungi la potenza di @angular/cdk/a11y

Finora, hai fatto affidamento sugli strumenti Angular integrati per risolvere i problemi di accessibilità più comuni. Diamo ora un'occhiata al modulo sull'accessibilità di CDK e al modo in cui può aiutarci a risolvere problemi più complicati e specifici di Angular.

Alla fine di questa sezione, continuerai il corso con gli strumenti per i moduli di accessibilità Angular.

Puoi trovare questi passaggi sotto il commento: TODO: #9. Add the power of @angular/cdk/a11y.

Importa il modulo

Aggiungi il modulo alla tua app:

src/app/app.module.ts

import { A11yModule } from '@angular/cdk/a11y';

@NgModule({
  declarations: [...],
  imports: [
    A11yModule
  ],
  providers: [...],
  bootstrap: [...]
})

Che cosa fa '@angular/cdk/a11y'?

Il modulo di accessibilità fornisce una serie di strumenti per migliorare l'accessibilità ed è particolarmente utile per gli autori dei componenti.

Nelle sezioni seguenti aggiungi tre servizi comuni: FocusTrap, LiveAnnouncer e HighContrast.

Per ulteriori informazioni su tutti gli altri servizi forniti da @angular/cdk/a11y, vedi Accessibilità.

10. Controllare la messa a fuoco con FocusTrap

Quando una finestra di dialogo o una finestra modale è aperta, un utente sta interagendo solo al suo interno. Se consenti all'elemento attivo di eseguire l'escape all'esterno della finestra di dialogo, si combina i contesti e si crea uno stato in cui l'utente non sa in quale parte della pagina si trova.

In Angular, l'istruzione cdkTrapFocus intrappola tab-l'elemento attivo principale all'interno di un elemento. Il suo scopo è quello di creare un'esperienza accessibile per componenti come le finestre di dialogo modali, in cui lo stato attivo deve essere limitato.

Entro la fine di questa sezione, la tua app supererà il seguente controllo:

• 🛑 Lo stato attivo dello screen reader nel selettore colori chiude la finestra di dialogo

Puoi trovare questi passaggi sotto i commenti: TODO: #10. Control focus with FocusTrap.

Identifica il problema

Per identificare questo problema, attiva lo screen reader e apri la finestra di dialogo del selettore colori.

1. Attiva VoiceOver.
2. Utilizza la navigazione delle schede per modificare il colore.
3. Seleziona questa opzione per visualizzare l'ordine di messa a fuoco e l'impostazione della messa a fuoco intuitiva nel selettore colori.

Aggiungi FocusTrap

cdkFocusTrap può essere utilizzato per bloccare e controllare l'ordine di impostazione dello stato attivo nei componenti personalizzati. L'utilizzo di mat-dialog-content è sufficiente per risolvere la maggior parte dei problemi impostando lo stato attivo in una finestra di dialogo. Aggiungi l'attributo cdkFocusInitial per definire la regione di interesse iniziale sul colore dell'involucro per ravioli <mat-selection-list> nella finestra di dialogo del selettore colori.

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html

<mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false" cdkFocusInitial>
  ...
</mat-selection-list>

Verifica modifiche

Riattiva lo screen reader e verifica le modifiche. Ora la messa a fuoco è impostata inizialmente su Cambia colore nella finestra di dialogo.

Controllo dell'accessibilità:

• ✅ Tutte le pagine hanno titoli univoci.
• ✅ I colori hanno un rapporto di contrasto sufficiente
• ✅ L'HTML semantico garantisce un'interazione logica
• ✅ Tutti i controlli sono raggiungibili dagli screen reader
• ✅ Il cursore utilizza gli attributi ARIA per fornire un'etichetta
• ✅ Il selettore colori ha la correzione della messa a fuoco corretta
• 🛑 Modifiche, errori e notifiche non vengono annunciati
• 🛑 La modalità Contrasto elevato non è attiva

11. Annunciare le modifiche con LiveAnnouncer

Gli screen reader devono ricevere una notifica quando qualcosa nella pagina viene modificato. Immagina di tentare di inviare un modulo o completare un acquisto senza sapere che si è verificato un errore che impedisce l'invio del modulo. È frustrante!

LiveAnnouncer viene utilizzato per annunciare i messaggi per gli utenti di screen reader che utilizzano una regione aria-live per garantire che gli screen reader ricevano notifiche relative a notifiche e modifiche alle pagine pubblicate. Per maggiori informazioni sulle regioni aria-live, consulta W3C's WAI-ARIA. In Angular, chiamare LiveAnnouncer come servizio è una soluzione più testabile rispetto agli attributi aria-live.

Entro la fine di questa sezione, la tua app supererà il seguente controllo:

• 🛑 Modifiche, errori e notifiche non vengono annunciati

Puoi trovare questi passaggi sotto i commenti: TODO: #11. Announce changes with LiveAnnouncer.

Identifica il problema

Per identificare questo problema, attiva lo screen reader e seleziona Acquista senza completare i campi del modulo:

1. Attiva VoiceOver.
2. Utilizza la navigazione delle schede per cambiare il colore ed effettuare un acquisto fittizio.
3. Nota che non c'è alcuna indicazione del colore selezionato quando esci dalla finestra di dialogo e l'acquisto non viene letto.

Aggiungere LiveAnnouncer al codice

Aggiungi LiveAnnunciatore e annuncia sia la selezione del colore che il finto acquisto sotto forma di stringa. In un'implementazione reale, questo può essere letto quando accedi a un sistema di pagamento di terze parti o per errori nel modulo.

1. Per aggiungere un annuncio quando viene selezionato un colore:

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ColorPickerDialogComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ColorDialogData,
    private liveAnnouncer: LiveAnnouncer) { }

  public changeColor(color: string): void {
    this.liveAnnouncer.announce(`Select color: ${color}`);
    this.dialogRef.close();
  }
}

2. Aggiungi un annuncio quando viene effettuato un acquisto falso:

src/app/shop/shop.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ShopComponent implements OnInit {

  constructor(private liveAnnouncer: LiveAnnouncer) { }

  fauxPurchase(): void {
    let flavor = '...';
    const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;

    this.liveAnnouncer.announce(fakePurchase);
  }
}

Verifica modifiche

Riattiva lo screen reader e verifica le modifiche. Ora riceverai una notifica dei tuoi errori.

Controllo dell'accessibilità:

• ✅ Tutte le pagine hanno titoli univoci.
• ✅ I colori hanno un rapporto di contrasto sufficiente
• ✅ L'HTML semantico garantisce un'interazione logica
• ✅ Tutti i controlli sono raggiungibili dagli screen reader
• ✅ Il cursore utilizza gli attributi ARIA per fornire un'etichetta
• ✅ Il selettore colori ha la correzione della messa a fuoco corretta
• ✅ Vengono annunciate modifiche, errori e notifiche
• 🛑 La modalità Contrasto elevato non è attiva

12. Attiva modalità Contrasto elevato

Microsoft Windows supporta una funzione di accessibilità chiamata Modalità ad alto contrasto. Questa modalità modifica l'aspetto di tutte le app, incluse le app web, per aumentare notevolmente il contrasto. In Angular, vuoi rispettare le preferenze dell'utente nella tua app.

Il HighContrastModeDetector consente di determinare se il browser si trova attualmente in un ambiente in modalità ad alto contrasto.

Internet Explorer, Microsoft Edge e Firefox supportano questa modalità. Google Chrome non supporta la modalità ad alto contrasto di Windows. Questo servizio non rileva la modalità ad alto contrasto aggiunta dall'estensione del browser Chrome High Contrast.

Entro la fine di questa sezione, la tua app supererà il seguente controllo:

• 🛑 La modalità Contrasto elevato non è attiva

Puoi trovare questi passaggi sotto i commenti: TODO: #12. Enable HighContrast mode.

Identifica il problema

Per identificare questo problema, apri l'app in Internet Explorer, Microsoft Edge o Firefox, attiva la modalità ad alto contrasto e osserva la mancanza di modifiche:

1. Apri l'app in Internet Explorer, Microsoft Edge o Firefox.
2. Attiva la modalità ad alto contrasto.
3. Nota che l'applicazione è rimasta invariata.

Aggiungere il supporto della modalità ad alto contrasto

In styles.scss, utilizza il mixcdk-high-contrast fornito in @angular/cdk/a11y per aggiungere un contorno ai pulsanti in modalità ad alto contrasto:

src/app/shop/shop.component.scss

@use '@angular/cdk';

.purchase-button {
    border-radius: 5px;
    background-color: mat.get-color-from-palette(mat.$pink-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$pink-palette, 50);
    }
}

:host-context(.dark-theme) {
  .purchase-button {
    background-color: mat.get-color-from-palette(mat.$light-green-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$light-green-palette, 50);
    }
  }
}

Verifica modifiche

Aggiorna l'app e verifica le modifiche. Hai aggiunto un contorno al pulsante in modalità Alto contrasto.

Controllo dell'accessibilità:

• ✅ Tutte le pagine hanno titoli univoci.
• ✅ I colori hanno un rapporto di contrasto sufficiente
• ✅ L'HTML semantico garantisce un'interazione logica
• ✅ Tutti i controlli sono raggiungibili dagli screen reader
• ✅ Il cursore utilizza gli attributi ARIA per fornire un'etichetta
• ✅ Il selettore colori ha la correzione della messa a fuoco corretta
• ✅ Vengono annunciate modifiche, errori e notifiche
• ✅ La modalità ad alto contrasto è attiva.

13. Complimenti!

Complimenti, hai risolto i problemi comuni di accessibilità web nella tua app Angular. 🎉

Per visualizzare tutte le soluzioni, dai un'occhiata alla filiale main.

Ora conosci i passaggi chiave necessari per risolvere otto insidie comuni dell'a11y nella tua applicazione Angular.

Scopri di più

Dai un'occhiata a questi codelab:

• Creazione di un'applicazione web con Angular e Firebase
• Scopri e correggi il testo a basso contrasto con Chrome DevTools

Leggi questi materiali:

• Angular.io
• Materiale angolare
• Concetti di base sull'accessibilità
• https://web.dev/accessible/