Barrierefreiheit von Angular-Apps erstellen

1. Hinweis

Barrierefreiheit ist ein wichtiger Teil der Webentwicklung und sorgt dafür, dass Nutzer Apps wahrnehmen, verstehen, bedienen und mit ihnen interagieren können. Tatsächlich hat jeder vierte Erwachsene in den USA eine Behinderung, die sich auf seine wichtigsten Lebensaktivitäten auswirkt. Weltweit haben etwa 15 % der Weltbevölkerung – mehr als eine Milliarde Menschen – eine Form von Behinderung. Etwa 2 bis 4 % haben erhebliche Schwierigkeiten.

Zu den häufigsten Erkrankungen, die die Nutzung des Internets beeinträchtigen, gehören Blindheit oder eingeschränktes Sehvermögen, Taubheit oder Schwerhörigkeit, eingeschränkte motorische Fähigkeiten, kognitive Beeinträchtigungen und Farbenblindheit – und dies ist nur eine unvollständige Liste.

In diesem Kurs steht „a11y“ für „Accessibility“ (Barrierefreiheit). Beachten Sie, dass auf das a 11 Zeichen und ein y folgen.

Eine ausführliche Einführung in Probleme und Techniken für die Entwicklung barrierefreier Apps finden Sie unter Barrierefreiheit.

Umfang

• Best Practices und integrierte Funktionen verwenden, um häufige Probleme mit der Webzugänglichkeit in einer Demo-Dumpling Shop Angular-App zu beheben
• Sie müssen alle Richtlinien zur Barrierefreiheit, WCAG 2.0 und ARIA 1.2 erfüllen und die axe- und Lighthouse-Prüfungen zur Barrierefreiheit bestehen.

Aufgaben in diesem Lab

Sie erfahren mehr über acht häufige Probleme mit der Barrierefreiheit in Angular-Apps, die sich auf Nutzer auswirken, wie Sie sie erkennen und beheben können. Dazu führen Sie die folgenden Schritte aus:

• Google Chrome-Entwicklertools, Lighthouse und axe zur Prüfung der Barrierefreiheit Ihrer App verwenden
• Fallstricke bei Single-Page-Apps (SPAs) mit eindeutigen Seitentiteln vermeiden
• Probleme mit geringem Farbkontrast für Nutzer mit eingeschränktem Sehvermögen beheben
• Semantische HTML-Elemente verwenden, damit Screenreader die Seite richtig bedienen
• Verwenden Sie Angular Material und entfernen Sie verschachtelte Steuerelemente, damit Screenreader auf alle Steuerelemente zugreifen können.
• ARIA-Unterstützung für Screenreader hinzufügen
• Angular CDK a11y-Paket importieren und verwenden
• FocusTrap für die Navigation mit Screenreadern für benutzerdefinierte Komponenten verwenden
• Benachrichtigungen mit dem CDK-Live-Ansager ankündigen
• Nutzer im Modus „Hoher Kontrast“ erkennen und Designs mit hohem Kontrast implementieren

Voraussetzungen

• Kenntnisse in Angular, SCSS, TypeScript, git und den Chrome-Entwicklertools

2. Einrichten

Code abrufen

Alles, was Sie für dieses Projekt benötigen, befindet sich in einem GitHub-Repository. Klonen Sie zuerst den Code und öffnen Sie ihn in Ihrer bevorzugten Entwicklungsumgebung.

Repository klonen und Anwendung bereitstellen

VS Code oder eine lokale IDE wird für die Durchführung dieses Codelabs empfohlen.

1. Öffnen Sie einen neuen Browsertab und rufen Sie https://github.com/googlecodelabs/angular-accessibility auf.
2. Verzweigen und klonen Sie das Repository und cd angular-accessibility/ in das Repository.
3. Sieh dir den Startcode-Branch git checkout get-started an.
4. Öffnen Sie den Code in VS Code oder Ihrer bevorzugten IDE.
5. Führen Sie npm install aus, um die Abhängigkeiten zu installieren, die zum Ausführen des Servers erforderlich sind.
6. Führen Sie ng serve aus, um den Server auszuführen.
7. Öffnen Sie einen Browsertab und rufen Sie http://localhost:4200 auf.

3. Baseline festlegen

Wo fangen Sie an?

Ihr Ausgangspunkt ist eine einfache Restaurant-App, die für dieses Codelab entwickelt wurde. Der Code wurde vereinfacht, um die Konzepte in diesem Codelab zu zeigen, und er hat wenig Funktionalität.

Demo ansehen

Befasse dich zunächst mit den drei Funktionen deiner App:

1. Über die Navigationsleiste kannst du die Routen Unser Shop, Unsere Geschichte und Find uns aufrufen und Details zum Unternehmen für Klöße abrufen.
2. Sie können das Design ändern, um zwischen dem hellen und dem dunklen Modus zu wechseln.
3. Sie können die Füllung, die Menge und die Farbe der Teigtaschen anpassen.
4. Wähle Kaufen aus, um deine benutzerdefinierte Bestellung in der Console zu erfassen.

Mit Angular häufige Probleme mit der Barrierefreiheit im Web beheben

In diesem Codelab konzentrieren Sie sich auf die Barrierefreiheit der vorhandenen Funktionen dieser App. Sie beginnen damit, Probleme mit der Barrierefreiheit in Ihrer App zu identifizieren, und ändern dann das 🛑 in ein ✅, indem Sie eine Lösung implementieren.

Woher wissen Sie, was Sie korrigieren müssen?

Beginnen Sie jedes Beispiel, indem Sie das Problem mit der Barrierefreiheit mithilfe einer Mischung aus manuellen und automatischen Tests erkennen.

Im aktuellen Zustand des Webs ist es unerlässlich, die Barrierefreiheit manuell zu testen.

Es gibt Tools, mit denen sich Probleme mit der Barrierefreiheit erkennen lassen, aber kein Tool kann bestätigen, dass eine App vollständig barrierefrei ist. Manuelle Tests stellen sicher, dass Sie eine Bandbreite an a11y-Konzepten testen, die logische Inhaltsreihenfolge und Funktionsparität umfassen.

Manuelle Tests

Wenn Sie die Barrierefreiheit in diesem Kurs manuell testen möchten, aktivieren Sie den integrierten Screenreader Ihres Computers und navigieren Sie mit der Tastatur durch Ihre App. Weitere Informationen finden Sie unter Semantik und Screenreader.

Aktivieren Sie den Screenreader und bewegen Sie sich auf dem Display.

Sie können den in macOS integrierten Screenreader VoiceOver verwenden. Klicken Sie auf Systemeinstellungen > Bedienungshilfen > VoiceOver > VoiceOver aktivieren. Wenn Sie VoiceOver ein-/ausschalten möchten, drücken Sie dreimal schnell die Touch-ID, während Sie die Taste Command gedrückt halten.

In diesem Kurs testen Sie Probleme hauptsächlich manuell und verwenden automatisierte Tools, um bestimmte automatisierbare Funktionen zu prüfen.

Automatisierte Tests

Außerdem verwenden Sie einige Entwicklungstools, um Ihre App zu automatisieren und zu prüfen. Mit diesen Tools können Sie beispielsweise prüfen, ob für ein Bild ein Alt-Text vorhanden ist oder wie hoch das Kontrastverhältnis einer Textfarbe ist. Sie können diese Tools als Linter betrachten. Sie können erkennen, dass Alt-Text vorhanden ist, aber Sie müssen manuell prüfen, ob der Inhalt logisch ist und einen Mehrwert bietet.

Lighthouse und Chrome-Entwicklertools

1. Öffnen Sie die Chrome-Entwicklertools.
2. Klicken Sie auf den Tab Lighthouse und dann auf das Kästchen Bedienungshilfen.
3. Klicken Sie auf Bericht generieren, um eine A11y-Lighthouse-Analyse auszuführen.

Axt

1. Installieren Sie die axe-Entwicklertools-Erweiterung. Möglicherweise müssen Sie den Browser neu starten, damit die Erweiterung angezeigt wird.
2. Öffnen Sie die Chrome-Entwicklertools.
3. Wählen Sie den Tab axe DevTools und dann Scan all of my page aus, um einen Axe-Entwicklertools-Scan auszuführen.

Linting

Sie können die Angular ESLint-Regeln verwenden, um Ihren Code für automatisierbare a11y-Attribute zu durchsuchen.

Fügen Sie in eslint.json die folgenden Angaben zur Barrierefreiheit hinzu:

"@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

Weitere Informationen finden Sie in den aktuellen ESLint-Regeln auf GitHub.

Ihr Ausgangspunkt

Mit den neuen Testmethoden können Sie die folgenden Probleme in Ihrer App mit Lighthouse- und axe-Audits sowie manuellem VoiceOver identifizieren:

Prüfung der Barrierefreiheit:

• 🛑 Alle Seiten haben denselben Seitentitel.
• 🛑 Elemente müssen einen ausreichenden Farbkontrast haben
• 🛑 HTML sollte eine logische Reihenfolge, einen logischen Namen und eine logische Rolle haben
• 🛑 Verschachtelte Kästchen können für Screenreader nicht ausgewählt werden
• 🛑 Der Screenreader liest keine Schiebereglerwerte vor
• 🛑 Wenn der Fokus des Screenreaders auf der Farbauswahl liegt, wird das Dialogfeld geschlossen.
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

4. Eindeutige Seitentitel definieren

Eindeutige, prägnante Seitentitel helfen Nutzern, die A11y-Dienste nutzen, den Inhalt und Zweck einer Webseite schnell zu verstehen. Seitentitel sind für Nutzer mit Sehbehinderung wichtig, da sie das erste Seitenelement sind, das von Screenreader-Software angesagt wird.

Angular ist eine Single-Page-Anwendung. Daher wird bei den meisten Übergängen, z. B. beim Wechseln zu einer neuen Seite, die Seite nicht neu geladen. Bis vor Kurzem hatte jede Seite einen identischen Seitentitel, der keinen Aufschluss über den Inhalt oder Zweck der Seite gab.

In Angular v14 wurde dem Router eine integrierte Methode hinzugefügt, mit der eindeutige Seitentitel direkt definiert werden können. Auf diese Weise wird sichergestellt, dass Entwickler die Best Practices für Seitentitel einhalten.

Am Ende dieses Abschnitts hat Ihre App die folgende Prüfung bestanden:

• 🛑 Alle Seiten haben denselben Seitentitel.

Du findest diese Schritte unter dem Kommentar: TODO: #4. Define unique page titles.

Problem identifizieren

Um dieses Problem zu identifizieren, aktivieren Sie Ihren Screenreader und wechseln Sie zwischen den Tabs Unser Shop, Unsere Geschichte und Finden Sie uns, um die Seitentitel zu sehen:

1. Aktivieren Sie VoiceOver.
2. Verwenden Sie die Tabnavigation, um zwischen den Seiten zu wechseln.
3. Prüfen Sie, ob der Seitentitel in Angular immer barrierefrei ist.

Das ist ein Problem, da der Seitentitel eindeutig sein muss, damit Nutzer schnell erkennen können, worum es auf der Seite geht, ohne sie durchsuchen zu müssen.

Aussagekräftige Seitentitel hinzufügen

Wenn sich eine Seite oder Ansicht ändert, sollten Sie den Seitentitel entsprechend verwalten. Um dies zu beheben, verwenden Sie die integrierte Router.title-Eigenschaft von Angular, um eindeutige Titel für jede Ihrer Seiten zu definieren.

1. Fügen Sie jeder der drei definierten Routen einen eindeutigen Titel hinzu:

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 },
];

Dadurch wird die Router's Title Service automatisch importiert und verwendet, um den Seitentitel bei der Navigation so zu ändern, dass er mit der in unseren Routen definierten Titeleigenschaft übereinstimmt. Sie können auch komplexere Seitentitel mithilfe einer benutzerdefinierten TitleStrategy verwalten.

Änderungen prüfen

Aktivieren Sie den Screenreader wieder und prüfen Sie die Änderungen. Die Seiten sollten jetzt eindeutige Titel haben.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• 🛑 Elemente müssen einen ausreichenden Farbkontrast haben
• 🛑 HTML sollte eine logische Reihenfolge, einen logischen Namen und eine logische Rolle haben
• 🛑 Verschachtelte Kästchen können für Screenreader nicht ausgewählt werden
• 🛑 Der Screenreader liest keine Schiebereglerwerte vor
• 🛑 Wenn der Fokus des Screenreaders auf der Farbauswahl liegt, wird das Dialogfeld geschlossen.
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus mit hohem Kontrast ist nicht aktiviert

5. Auf einen angemessenen Farbkontrast achten

Ihr Design mag zwar cool erscheinen, ist es aber nicht, wenn Menschen mit Sehbehinderungen wie Farbenblindheit Ihre Inhalte nicht lesen können. Die Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG 2.0) definieren eine Reihe von Farbkontrastverhältnissen, die dafür sorgen, dass Inhalte barrierefrei sind. In Angular und im Web können Sie Farbvorlagen definieren, die dafür sorgen, dass Ihre Komponenten diese Standards erfüllen und für Nutzer mit Sehschwäche und Farbenfehlsichtigkeit sichtbar sind.

Am Ende dieses Abschnitts besteht Ihre App die folgende Prüfung:

• 🛑 Elemente müssen einen ausreichenden Farbkontrast haben

Du findest diese Schritte in den Kommentaren: TODO: #5. Ensure adequate color contrast.

Mit den Chrome-Entwicklertools Probleme mit geringem Kontrast erkennen

Verwenden Sie die Chrome-Entwicklertools, um die Elemente in Ihrer App zu prüfen.

1. Mit dem Prüftool können Sie die Schaltflächen für das Menüsymbol aufrufen. Der Kontrast beträgt 1,85, was weit unter den WCAG-Anforderungen liegt.

2. Führen Sie die Barrierefreiheitsprüfung in Lighthouse oder den Scan von axe durch, um diese Probleme mit dem Kontrastverhältnis zu sehen.

Material-Designfarbe ändern

Das Farbschema der Komponenten wird in Ihrem benutzerdefinierten Material-Design-Design definiert. Sie aktualisieren den Designwert so, dass er den Richtlinien für das Farbkontrastverhältnis entspricht.

Aktualisieren Sie Ihr Materialdesign, um eine dunklere Textfarbe zu verwenden und so das Kontrastverhältnis Ihrer Symbole zu erhöhen:

src/styles.scss

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

Sie können auch die integrierten Tools für Bedienungshilfen der Chrome-Entwicklertools verwenden, um eine Farbe zu finden, die den Standards entspricht, oder einzelne Farbwerte in Sass zu aktualisieren.

Änderungen prüfen

Sehen Sie sich Ihre Elemente noch einmal an und prüfen Sie Ihre Änderungen. Unser Design sollte jetzt ausreichende Farbkontrastverhältnisse haben.

Prüfung der Barrierefreiheit

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• 🛑 HTML-Elemente sollten eine logische Reihenfolge, einen Namen und eine Rolle haben.
• 🛑 Verschachtelte Kästchen können für Screenreader nicht ausgewählt werden
• 🛑 Der Screenreader liest keine Schiebereglerwerte vor
• 🛑 Wenn der Fokus des Screenreaders auf der Farbauswahl liegt, wird das Dialogfeld geschlossen.
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus mit hohem Kontrast ist nicht aktiviert

6. Semantisches HTML verwenden

Native HTML-Elemente erfassen eine Reihe standardmäßiger Interaktionsmuster, die für die Barrierefreiheit wichtig sind. Ein Absatz kann als Span und ein Div-Element als Schaltfläche formatiert werden. Mithilfe von semantischen HTML-Elementen können Screenreader und die Tastaturnavigation die Interaktionen und Steuerelemente Ihrer HTML-Seite verstehen.

Wenn Sie Angular-Komponenten erstellen, sollten Sie diese nativen Elemente nach Möglichkeit direkt wiederverwenden, anstatt gut unterstützte Verhaltensweisen neu zu implementieren. So wird sichergestellt, dass die Seite eine gute Inhaltsstruktur und einen natürlichen Inhaltsfluss hat und dass die Tabs in einer logischen Reihenfolge angeordnet sind, um Nutzern die Navigation auf der Website mithilfe der Tastatur zu erleichtern.

Am Ende dieses Abschnitts hat Ihre App die folgende Prüfung bestanden:

• 🛑 HTML-Elemente sollten eine logische Reihenfolge, einen Namen und eine Rolle haben.

Du findest diese Schritte in den Kommentaren: TODO: #6. Use Semantic HTML.

Problem identifizieren

1. Aktivieren Sie VoiceOver.
2. Über die Tab-Navigation gelangst du zum Tab Unsere Geschichte.
3. Die Tab-Reihenfolge ist nicht sequentiell.
4. Klicke auf Kaufen.
5. Beachten Sie, dass die Schaltfläche nicht als Schaltfläche erkannt wird.

Ein <div> in ein <button> ändern

Ersetzen Sie das benutzerdefinierte <div> durch eine Material-Schaltfläche:

src/app/shop/shop.component.html

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

Überschriftenelemente nacheinander verwenden

Ordnen Sie den Text neu an, um semantische HTML-Elemente zu verwenden, und wenden Sie die Typografie für Angular Material an:

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>

Änderungen überprüfen

Aktivieren Sie den Screenreader wieder und prüfen Sie die Änderungen. VoiceOver erkennt die Schaltfläche jetzt und der Text wird in einer logischen Reihenfolge vorgelesen.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• ✅ Semantisches HTML sorgt für eine logische Interaktion
• 🛑 Verschachtelte Kästchen können von Screenreadern nicht ausgewählt werden
• 🛑 Der Screenreader liest keine Schiebereglerwerte vor
• 🛑 Wenn der Fokus des Screenreaders auf der Farbauswahl liegt, wird das Dialogfeld geschlossen.
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

7. Auswählbare Steuerelemente mit Angular Material erstellen

Ein kompliziertes Interaktionsmuster für Bedienungshilfen sind verschachtelte Steuerelemente. Denken Sie an Menüunterelemente oder verschachtelte Kästchen. Wie weisen Sie Nutzern darauf hin, dass sie eine Untergruppe von Optionen auswählen oder zu einem übergeordneten Menüpunkt wechseln können?

Vereinfachen Sie in Angular Menüs und Steuerelemente, um navigierbare Komponenten zu erstellen, indem Sie die Steuerelemente so weit wie möglich vereinfachen. In diesem Beispiel verwenden Sie die Listenbox von Angular Material, um ein Beispiel für dieses Interaktionsmuster zu erstellen.

Am Ende dieses Abschnitts hat Ihre App die folgende Prüfung bestanden:

• 🛑 Verschachtelte Kästchen können von Screenreadern nicht ausgewählt werden

Du findest diese Schritte in den Kommentaren: TODO: #7. Create selectable controls with Angular Material.

Problem identifizieren

Um dieses Problem zu identifizieren, aktivieren wir den Screenreader und versuchen, ein verschachteltes Kästchen auszuwählen.

1. Aktivieren Sie VoiceOver.
2. Wählen Sie verschiedene Füllungsvarianten aus.
3. Die Kästchen für übergeordnete Elemente werden von VoiceOver nicht vorgelesen. Woher wissen Sie, dass das Kästchen Vegan nicht mehr ausgewählt ist, nachdem Sie das Kästchen Bok Choy deaktiviert haben?

A11y in Angular Material

Sie ersetzen das semantische Kästchen durch das Kästchen „Angular Material“, das integrierte Kenntnisse dieses Interaktionsmusters enthält. Beachten Sie, dass das Ersetzen von Komponenten durch Material nicht die Barrierefreiheit garantiert. Wie bei jeder anderen Komponente müssen Sie die Barrierefreiheit manuell testen, da es viele Möglichkeiten gibt, Material unzugänglich zu implementieren.

Kästchen durch Kästchen für Materialien ersetzen

1. Fügen Sie zuerst die neue Liste der Füllungen und eine Variable hinzu, in der die ausgewählten Füllungsvarianten gespeichert werden:

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. Fügen Sie <mat-selection-list> hinzu, um diese unübersichtliche Gruppierung von HTML-Kästchen zu ersetzen:

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>

In den TODO-Kommentaren sehen Sie auch, wo Sie nicht verwendetes Sass in src/app/shop/shop.component.scss entfernen können, um Ihren Stil zu bereinigen.

Änderungen prüfen

Aktivieren Sie den Screenreader wieder und prüfen Sie die Änderungen. Kästchen können jetzt mit einem Screenreader ausgewählt und intuitiver bedient werden.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• ✅ Semantisches HTML sorgt für eine logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader zugänglich
• 🛑 Der Screenreader liest keine Schiebereglerwerte vor
• 🛑 Wenn der Fokus des Screenreaders auf der Farbauswahl liegt, wird das Dialogfeld geschlossen.
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus mit hohem Kontrast ist nicht aktiviert

8. Steuerelementlabels mit ARIA angeben

Sie haben die semantischen HTML- und Materialkomponenten Ihrer Angular-App geändert. Einige Komponenten erfordern jedoch bestimmte Attribute, damit Screenreader sie vollständig bedienen können.

Die Accessible Rich Internet Applications specification (WAI-ARIA oder ARIA) der Web Accessibility Initiative hilft, Probleme zu beheben, die mit nativem HTML nicht verwaltet werden können. Sie können damit Attribute angeben, die die Art und Weise ändern, wie ein Element in den Bedienungshilfen-Baum übersetzt wird.

Am Ende dieses Abschnitts hat Ihre App die folgende Prüfung bestanden:

• 🛑 Werte von Schiebereglern werden vom Screenreader nicht gelesen

Du findest diese Schritte jeweils unter den Kommentaren: TODO: #8. Provide control labels with ARIA.

Problem identifizieren

Um dieses Problem zu ermitteln, schalten Sie den Screenreader ein und bewegen Sie den Schieberegler:

1. Aktivieren Sie VoiceOver.
2. Gehen Sie zum Mengenschieberegler und ändern Sie den Wert.
3. Beachten Sie, dass das Wertlabel fehlt.

ARIA-Attribute verwenden

Labelsteuerung mit aria-label für <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>

Änderungen überprüfen

Aktivieren Sie den Screenreader wieder und prüfen Sie die Änderungen. Sie können den Schieberegler jetzt verschieben.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• ✅ Semantisches HTML sorgt für eine logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader erreichbar.
• ✅ Der Schieberegler verwendet ARIA-Attribute, um ein Label bereitzustellen.
• 🛑 Wenn der Fokus des Screenreaders auf der Farbauswahl liegt, wird das Dialogfeld geschlossen.
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus mit hohem Kontrast ist nicht aktiviert

9. Addieren Sie die Potenz von @angular/cdk/a11y

Bisher haben Sie die integrierten Angular-Tools verwendet, um häufige Probleme mit der Barrierefreiheit zu beheben. Sehen wir uns nun das a11y-Modul der CDK an und wie es uns bei der Lösung komplexerer und Angular-spezifischer Probleme helfen kann.

Am Ende dieses Abschnitts setzen Sie diesen Kurs mit dem Angular-A11y-Modul-Tool fort.

Diese Schritte findest du unter dem Kommentar: TODO: #9. Add the power of @angular/cdk/a11y.

Modul importieren

Fügen Sie das Modul Ihrer App hinzu:

src/app/app.module.ts

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

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

Was macht '@angular/cdk/a11y'?

Das a11y-Modul bietet eine Reihe von Tools zur Verbesserung der Barrierefreiheit und ist insbesondere für Komponentenautoren nützlich.

In den folgenden Abschnitten fügen Sie drei gängige Dienste hinzu: FocusTrap, LiveAnnouncer und HighContrast.

Weitere Informationen zu allen anderen Diensten von @angular/cdk/a11y finden Sie unter Bedienungshilfen.

10. Fokus mit FocusTrap steuern

Wenn ein Dialogfeld oder ein modales Fenster geöffnet ist, interagiert der Nutzer nur darin. Wenn der Fokus außerhalb des Dialogfelds gesetzt werden kann, werden Kontexte vermischt und es entsteht ein Zustand, in dem der Nutzer nicht weiß, wo er sich auf der Seite befindet.

In Angular wird mit der cdkTrapFocus-Direktive der tab--Schlüsselfokus in einem Element festgelegt. Dies soll dazu dienen, Komponenten wie modale Dialogfelder barrierefrei zu gestalten, bei denen der Fokus eingeschränkt werden muss.

Am Ende dieses Abschnitts hat Ihre App die folgende Prüfung bestanden:

• 🛑 Wenn der Fokus des Screenreaders auf der Farbauswahl liegt, wird das Dialogfeld geschlossen.

Diese Schritte findest du unter den Kommentaren: TODO: #10. Control focus with FocusTrap.

Problem identifizieren

Um dieses Problem zu identifizieren, aktivieren Sie Ihren Screenreader und öffnen Sie das Dialogfeld für die Farbauswahl.

1. Aktivieren Sie VoiceOver.
2. Über die Tab-Navigation können Sie die Farbe ändern.
3. Prüfen Sie, ob die Farbauswahl eine intuitive Fokusreihenfolge und Fokus-Trapping bietet.

Fokusfalle hinzufügen

Mit cdkFocusTrap können Sie die Fokusreihenfolge in benutzerdefinierten Komponenten steuern. Mit mat-dialog-content lassen sich die meisten Probleme beheben, indem der Fokus in einem Dialogfeld gehalten wird. Fügen Sie das Attribut cdkFocusInitial hinzu, um im Farbauswahldialogfeld den anfänglichen Fokusbereich für die Dumpling-Wrapper-Farbe <mat-selection-list> zu definieren.

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>

Änderungen überprüfen

Aktivieren Sie den Screenreader wieder und prüfen Sie die Änderungen. Der Fokus ist jetzt anfangs auf Farbe ändern im Dialogfeld.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• ✅ Semantisches HTML sorgt für eine logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader erreichbar.
• ✅ Der Schieberegler verwendet ARIA-Attribute, um ein Label bereitzustellen
• ✅ Die Farbauswahl hat eine korrekte Fokusfalle.
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus mit hohem Kontrast ist nicht aktiviert

11. Änderungen mit LiveAnnouncer ansagen

Screenreader müssen benachrichtigt werden, wenn sich etwas auf der Seite ändert. Angenommen, Sie versuchen, ein Formular einzureichen oder einen Kauf abzuschließen, und wissen nicht, dass ein Fehler aufgetreten ist, der das Einreichen des Formulars verhindert. Das ist frustrierend.

Mit LiveAnnouncer werden Nachrichten für Nutzer von Screenreadern mithilfe eines aria-live-Bereichs angesagt, damit Screenreader über Benachrichtigungen und Änderungen auf der Liveseite informiert werden. Weitere Informationen zu aria-live-Regionen finden Sie in der WAI-ARIA des W3C. In Angular ist das Aufrufen von LiveAnnouncer als Dienst eine testbarere Lösung als aria-live-Attribute.

Am Ende dieses Abschnitts hat Ihre App die folgende Prüfung bestanden:

• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt

Diese Schritte finden Sie unter den Kommentaren: TODO: #11. Announce changes with LiveAnnouncer.

Problem identifizieren

Aktivieren Sie Ihren Screenreader und wählen Sie Kaufen aus, ohne die Formularfelder auszufüllen, um dieses Problem zu identifizieren:

1. Aktivieren Sie VoiceOver.
2. Über die Tab-Navigation können Sie die Farbe ändern und einen gefälschten Kauf tätigen.
3. Beachten Sie, dass beim Schließen des Dialogfelds nicht angezeigt wird, welche Farbe ausgewählt wurde, und der Kauf nicht gelesen wird.

LiveAnnouncer in den Code einfügen

Fügen Sie „LiveAnnouncer“ hinzu und geben Sie sowohl die Farbauswahl als auch den gefälschten Kauf als String an. In einer echten Implementierung kann dies bei Formularfehlern oder bei der Navigation zu einem Zahlungssystem eines Drittanbieters angezeigt werden.

1. So fügen Sie eine Ankündigung hinzu, wenn eine Farbe ausgewählt wird:

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. So fügen Sie eine Mitteilung für einen gefälschten Kauf hinzu:

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);
  }
}

Änderungen prüfen

Aktivieren Sie den Screenreader wieder und prüfen Sie die Änderungen. Sie werden jetzt über Ihre Fehler informiert.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• ✅ Semantisches HTML sorgt für eine logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader erreichbar.
• ✅ Der Schieberegler verwendet ARIA-Attribute, um ein Label bereitzustellen
• ✅ Die Farbauswahl hat eine korrekte Fokusfalle.
• ✅ Änderungen, Fehler und Benachrichtigungen werden bekannt gegeben
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

12. Modus mit hohem Kontrast aktivieren

Microsoft Windows unterstützt die Bedienungshilfe „Modus mit hohem Kontrast“. In diesem Modus wird das Erscheinungsbild aller Apps, einschließlich Webanwendungen, geändert, um den Kontrast deutlich zu erhöhen. In Angular sollten Sie die Einstellungen der Nutzer in Ihrer App berücksichtigen.

Mit HighContrastModeDetector können Sie feststellen, ob sich der Browser derzeit in einer Umgebung mit hohem Kontrast befindet.

Internet Explorer, Microsoft Edge und Firefox unterstützen diesen Modus. Google Chrome unterstützt den Hochkontrastmodus von Windows nicht. Der von der Chrome-Browsererweiterung mit hohem Kontrast hinzugefügte Modus mit hohem Kontrast wird von diesem Dienst nicht erkannt.

Am Ende dieses Abschnitts hat Ihre App die folgende Prüfung bestanden:

• 🛑 Der Modus mit hohem Kontrast ist nicht aktiviert

Diese Schritte findest du unter den Kommentaren: TODO: #12. Enable HighContrast mode.

Problem identifizieren

Öffnen Sie dazu Ihre App in Internet Explorer, Microsoft Edge oder Firefox, aktivieren Sie den Modus mit hohem Kontrast und achten Sie darauf, dass keine Änderungen vorgenommen werden:

1. Öffnen Sie die App in Internet Explorer, Microsoft Edge oder Firefox.
2. Aktivieren Sie den Modus mit hohem Kontrast.
3. Die Anwendung ist unverändert.

Unterstützung für Modus mit hohem Kontrast hinzufügen

Verwenden Sie in styles.scss den in @angular/cdk/a11y bereitgestellten cdk-high-contrast-Mixin, um Ihren Schaltflächen im Modus „Hoher Kontrast“ einen Umriss hinzuzufügen:

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);
    }
  }
}

Änderungen prüfen

Aktualisieren Sie die App und prüfen Sie die Änderungen. Sie haben der Schaltfläche im Modus mit hohem Kontrast einen Umriss hinzugefügt.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• ✅ Semantisches HTML sorgt für eine logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader erreichbar.
• ✅ Der Schieberegler verwendet ARIA-Attribute, um ein Label bereitzustellen
• ✅ Die Farbauswahl hat eine korrekte Fokusfalle.
• ✅ Änderungen, Fehler und Benachrichtigungen werden bekannt gegeben
• ✅ Der Modus mit hohem Kontrast ist aktiviert.

13. Glückwunsch!

Glückwunsch! Du hast häufige Probleme mit der Barrierefreiheit im Internet in deiner Angular-App behoben. 🎉

Alle Lösungen findest du im main-Zweig.

Sie kennen jetzt die wichtigsten Schritte zur Behebung von acht häufigen Stolpersteinen in Bezug auf Barrierefreiheit in Ihrer Angular-Anwendung.

Weitere Informationen

Sehen Sie sich diese Codelabs an:

• Webanwendung mit Angular und Firebase erstellen
• Text mit geringem Kontrast mit den Chrome-Entwicklertools finden und korrigieren

Lesen Sie die folgenden Materialien:

• Angular.io
• Angular Material a11y
• Grundlagen der Barrierefreiheit
• https://web.dev/accessible/