L'accessibilità è un pilastro fondamentale nello sviluppo di applicazioni web moderne. Angular ha introdotto miglioramenti significativi per il supporto degli screen reader e il contrasto nei suoi aggiornamenti delle versioni 15 e 16. Questi aggiornamenti mirano a rendere le applicazioni più accessibili a un'ampia gamma di utenti, inclusi quelli con disabilità visive.

Consideriamo una tabella implementata con Angular Material, per il quale abbiamo visto il setup nei precedenti script. Per migliorarne l'accessibilità per gli utenti di screen reader, possiamo utilizzare l'attributo aria-label per fornire una descrizione contestuale di ogni elemento della tabella, senza la necessità di interagire con l'attributo nativo HTML aria-label.

import {Component} from '@angular/core';

@Component({
  selector: 'app-data-table',
  template: `
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <!-- Colona nome -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef aria-label="Nome dell'utente">Nome</th>
        <td mat-cell *matCellDef="let element" aria-label="Nome dell'utente: {{element.name}}">
          {{element.name}}
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  `
})
export class DataTableComponent {
  displayedColumns: string[] = ['name'];
  dataSource = ELEMENT_DATA;
}

Con il rilascio di Angular 16, l'attenzione si è spostata sull'ulteriore miglioramento dell'accessibilità, in particolare attraverso la gestione del contrasto nei temi predefiniti di Angular Material. Questi miglioramenti al contrasto mirano a soddisfare i requisiti WCAG per il contrasto del colore, rendendo testi e elementi dell'interfaccia utente più leggibili per tutti, in particolare per gli utenti con disabilità visive.

In questo esempio, aumentiamo il contrasto impostando il colore primario e il suo `accento` con colori più scuri o con maggior contrasto rispetto alle opzioni predefinite. Questo aiuta a garantire che gli elementi dell'UI siano facilmente distinguibili anche per gli utenti con problemi di visibilità del colore.

@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-indigo, 800, A100, A400);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
));
@include angular-material-theme($theme);