Barrierefreiheit von Angular-Apps erstellen

1. Hinweis

Barrierefreiheit ist ein wesentlicher Bestandteil der Webentwicklung. Sie sorgt dafür, dass Nutzer Apps wahrnehmen, verstehen, nutzen und mit ihnen interagieren können. Tatsächlich lebt 1 von 4 Erwachsenen in den USA über eine Behinderung, die sich auf ihre wichtigsten Lebensaktivitäten auswirkt. Weltweit haben etwa 15 % der Weltbevölkerung – über 1 Milliarde Menschen – irgendeine 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 – dies ist nur eine unvollständige Liste.

In diesem Kurs steht a11y für Barrierefreiheit. Auf das a folgen 11 Zeichen und ein y.

Eine umfassende Einführung zu Problemen und Techniken bei der Entwicklung barrierefreier Apps finden Sie unter Bedienungshilfen.

Inhalt

• Best Practices und integrierte Techniken nutzen, um häufige Probleme mit der Barrierefreiheit im Internet in der Dumpling Shop Angular-App zu lösen
• Alle Richtlinien zur Barrierefreiheit, WCAG 2.0 und ARIA 1.2 erfüllen und Axe- und Lighthouse-Prüfungen zur Barrierefreiheit bestehen.

Aufgaben in diesem Lab

Du lernst acht häufige Probleme mit der Barrierefreiheit in Angular-Apps kennen, die Nutzer betreffen, wie du sie erkennst und wie du sie behebst. Dazu führen Sie die folgenden Schritte aus:

• Mit den Google Chrome-Entwicklertools, Lighthouse und Axe die Barrierefreiheit deiner App prüfen
• Probleme mit Single-Page-Apps (SPA) mit einzigartigen Seitentiteln lösen
• Kontrastprobleme mit geringem Farbkontrast für Nutzer mit eingeschränktem Sehvermögen beheben
• Semantisches HTML verwenden, damit Screenreader korrekt auf der Seite navigieren können
• Verwenden Sie Angular Material und heben Sie die Verschachtelung von Steuerelementen auf, 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 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

Wir empfehlen, dieses Codelab über VSCode oder eine lokale IDE zu bearbeiten.

1. Öffnen Sie einen neuen Browsertab und rufen Sie https://github.com/googlecodelabs/angular-accessibility auf.
2. Verzweigen und klonen Sie das Repository und fügen Sie cd angular-accessibility/ in das Repository ein.
3. Sieh dir den Startcodezweig git checkout get-started an.
4. Öffnen Sie den Code in VSCode 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 mit http://localhost:4200.

3. Baseline festlegen

Was ist dein Ausgangspunkt?

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. Ändere das Design, um zwischen dem hellen und dem dunklen Modus zu wechseln.
3. Personalisiere die Teigtaschenfüllung, -menge und -farbe deiner Bestellung.
4. Wählen Sie Kauf aus, um Ihre benutzerdefinierte Bestellung in der Konsole zu protokollieren.

Häufige Probleme mit der Barrierefreiheit im Internet mit Angular beheben

In diesem Codelab konzentrieren Sie sich auf die Barrierefreiheit der vorhandenen Funktionen dieser App. Du beginnst damit, a11y-Probleme in deiner App zu identifizieren und dann das 🛑 in ein ✅ zu verwandeln, indem du eine Lösung implementierst.

Woher wissen Sie, was korrigiert werden muss?

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

In der heutigen Zeit ist das manuelle Testen der Barrierefreiheit obligatorisch.

Sie haben Tools, mit denen Sie Probleme mit der Barrierefreiheit erkennen können, aber kein Tool kann bestätigen, dass eine App vollständig zugänglich ist. Manuelle Tests stellen sicher, dass Sie eine Bandbreite an a11y-Konzepten testen, die logische Inhaltsreihenfolge und Funktionsparität umfassen.

Manuelle Tests

Um die Barrierefreiheit in diesem Kurs manuell zu testen, schalten Sie den integrierten Screenreader unseres Computers ein und navigieren mithilfe der Tastatur durch Ihre App. Weitere Informationen finden Sie unter Semantik und Screenreader.

Üben Sie, indem Sie den Screenreader aktivieren und auf dem Bildschirm navigieren.

Sie können das in macOS integrierte VoiceOver verwenden. Klicken Sie auf Systemeinstellungen > Bedienungshilfen > VoiceOver > Aktivieren Sie VoiceOver. Wenn Sie VoiceOver aktivieren oder deaktivieren möchten, drücken Sie schnell dreimal schnell Touch ID und halten Sie dabei die Taste Command gedrückt.

In diesem Kurs testen Sie Probleme hauptsächlich manuell und verwenden automatisierte Tools, um bestimmte automatisierte Funktionen zu überprü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 das Vorhandensein von Alt-Text auf einem Bild oder das Kontrastverhältnis einer Textfarbe prüfen. Sie können sich diese Tools wie Linters vorstellen: können sie erkennen, dass ein Alt-Text vorhanden ist. Sie müssen jedoch 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 erstellen, um eine Lighthouse-Prüfung durchzuführen.

Axt

1. Installieren Sie die axe DevTools-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 Folgendes hinzu, um die Barrierefreiheit zu verbessern:

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

Mein Ausgangspunkt

Mit den neuen Testmethoden kannst du die folgenden Probleme in deiner App mithilfe von Lighthouse- und Axe-Audits sowie manuellem VoiceOver identifizieren:

Prüfung der Barrierefreiheit:

• 🛑 Alle Seiten haben denselben Seitentitel
• 🛑 Die 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
• 🛑 Der Screenreader-Fokus in der Farbauswahl schließt das Dialogfeld
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

4. Eindeutige Seitentitel definieren

Durch die Angabe eindeutiger, präziser Seitentitel können Nutzer der A11y-Dienste den Inhalt und Zweck einer Webseite schneller erkennen. Seitentitel sind für Nutzende mit Sehbehinderungen von entscheidender Bedeutung, da sie das erste Seitenelement sind, das von einer Screenreader-Software angekündigt wird.

Angular ist eine Anwendung mit nur einer Seite. Daher beinhalten die meisten Übergänge, z. B. das Wechseln zu einer neuen Seite, keine Aktualisierung der Seite. Bis vor Kurzem bedeutete dies, dass jede Seite denselben Seitentitel hatte und keinen Nutzen für das Verständnis des Inhalts oder des Zwecks der Seite bot.

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

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

• 🛑 Alle Seiten haben denselben Seitentitel

Unter dem Kommentar findest du diese Schritte: TODO: #4. Define unique page titles.

Problem identifizieren

Um dieses Problem zu ermitteln, schalten Sie Ihren Screenreader ein und wechseln Sie zwischen den Tabs Unser Shop, Unsere Geschichte und Wo finde ich, um die Seitentitel zu sehen:

1. Aktivieren Sie VoiceOver.
2. Mit der Tabulatortaste können Sie zwischen den Seiten wechseln.
3. Vergewissern Sie sich, dass der Seitentitel in Angular immer a11y lautet.

Dies ist ein Problem, weil der Seitentitel eindeutig sein muss, damit Nutzer schnell verstehen, worum es auf der Seite geht, ohne durch die Seite navigieren zu müssen.

Aussagekräftige Seitentitel hinzufügen

Wenn sich eine Seite oder Ansicht ändert, möchten Sie den Seitentitel richtig verwalten. Um dieses Problem 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 das Router's Title Service im Hintergrund automatisch importiert und verwendet, um den Seitentitel in der Navigation so zu ändern, dass er der in unseren Routen definierten Titeleigenschaft entspricht. Kompliziertere Seitentitel können Sie auch mit einem benutzerdefinierten TitleStrategy verwalten.

Änderungen überprüfen

Schalten Sie den Screenreader wieder ein und überprüfen Sie Ihre Änderungen. Die Seiten sollten jetzt eindeutige Titel haben.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• 🛑 Die 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
• 🛑 Der Screenreader-Fokus in der Farbauswahl schließt das Dialogfeld
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

5. Auf einen angemessenen Farbkontrast achten

Ihr Design mag cool erscheinen, aber das ist nicht der Fall, wenn Menschen mit Sehbehinderungen wie Farbenblindheit Ihre Inhalte nicht lesen können. Die Richtlinien für barrierefreie Webinhalte (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 Farbpaletten definieren, um sicherzustellen, dass Ihre Komponenten diesen Standards entsprechen und für Nutzer mit Sehbehinderung oder Farbenblindheit sichtbar sind.

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

• 🛑 Die Elemente müssen einen ausreichenden Farbkontrast haben

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

Kontrastarme Probleme mit den Chrome-Entwicklertools identifizieren

Prüfen Sie die Elemente in Ihrer App mithilfe der Chrome-Entwicklertools, um dieses Problem zu identifizieren.

1. Verwenden Sie das Prüftool, um die Schaltflächen des Menüsymbols anzuzeigen. Wie Sie sehen, liegt der Kontrast bei 1,85 und liegt damit weit unter den WCAG-Anforderungen.

2. Führen Sie die Prüfung der Barrierefreiheit in Lighthouse oder im Axe-Scan durch, um diese Probleme mit dem Kontrastverhältnis zu erkennen.

Farbe des Materialdesigns ändern

Das Farbschema für Ihre Komponenten wird in Ihrem benutzerdefinierten Material-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 überprüfen

Überprüfen Sie Ihre Elemente erneut und überprüfen Sie Ihre Änderungen. Unser Design sollte nun über ausreichende Farbkontrastverhältnisse verfügen.

Prüfung der Barrierefreiheit

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• 🛑 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
• 🛑 Der Screenreader-Fokus in der Farbauswahl schließt das Dialogfeld
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

6. Semantisches HTML verwenden

Native HTML-Elemente erfassen eine Reihe standardmäßiger Interaktionsmuster, die für die Barrierefreiheit wichtig sind. Während ein Absatz als Span und ein div-Element als Schaltfläche gestaltet werden kann, sorgt das semantische HTML-Element dafür, dass Screenreader und die Tastaturnavigation die Interaktionen und Steuerelemente Ihres HTML-Codes verstehen.

Beim Erstellen von Angular-Komponenten sollten Sie diese nativen Elemente nach Möglichkeit direkt wiederverwenden, anstatt gut unterstützte Verhaltensweisen neu zu implementieren. Dadurch wird sichergestellt, dass die Seite eine gute inhaltliche Struktur und einen natürlichen Fluss des Inhalts aufweist und dass der Tab in einer logischen Reihenfolge angeordnet ist, um Nutzende bei der effektiven Verwendung der Tastatur bei der Navigation auf der Website zu unterstützen.

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

• 🛑 HTML sollte eine logische Reihenfolge, einen logischen Namen und eine logische Rolle haben

Du findest diese Schritte jeweils unter 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. Beachten Sie, dass die TAB-Reihenfolge nicht sequenziell ist.
4. Klicken Sie auf Kaufen.
5. Beachten Sie, dass die Schaltfläche nicht als Schaltfläche erkannt wird.

<div>-Element ändern auf eine <Schaltfläche>

Benutzerdefiniertes <div>-Element ersetzen mit einer 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 so neu an, dass semantisches HTML verwendet wird, und wenden Sie Stile mithilfe der Typografie von 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

Schalten Sie den Screenreader wieder ein und überprüfen Sie Ihre Ä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 gewährleistet logische Interaktion
• 🛑 Verschachtelte Kästchen können für Screenreader nicht ausgewählt werden
• 🛑 Der Screenreader liest keine Schiebereglerwerte vor
• 🛑 Der Screenreader-Fokus in der Farbauswahl schließt das Dialogfeld
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

7. Mit Angular Material auswählbare Steuerelemente erstellen

Ein kompliziertes Interaktionsmuster für Bedienungshilfen sind verschachtelte Steuerelemente. Denken Sie an Menüunterelemente oder verschachtelte Kontrollkästchen. Wie teilen Sie Nutzenden mit, dass Sie eine Untergruppe von Optionen auswählen oder zu einem übergeordneten Menüpunkt navigieren können?

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

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

• 🛑 Verschachtelte Kästchen können für Screenreader nicht ausgewählt werden

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

Problem identifizieren

Zur Identifizierung dieses Problems schalten wir unseren Screenreader ein und versuchen, ein verschachteltes Kontrollkästchen auszuwählen.

1. Aktivieren Sie VoiceOver.
2. Wählen Sie verschiedene Füllungen aus.
3. Beachten Sie, dass die übergeordneten Kontrollkästchen keine untergeordneten Elemente angeben, wenn sie von VoiceOver gelesen werden. Woher wissen Sie, dass das Häkchen für Vegan entfernt wurde, nachdem Sie das Häkchen aus dem Kästchen Bok Choy entfernt haben?

A11y in Angular Material

Sie ersetzen das Kästchen „Semantisch“ durch das Kästchen „Angular Material“, das integrierte Kenntnisse dieses Interaktionsmusters enthält. Es ist wichtig zu beachten, dass das Ersetzen von Komponenten durch Material keine Barrierefreiheit garantiert. Wie bei jeder anderen Komponente müssen Sie manuelle Tests durchführen, da es viele Möglichkeiten gibt, Material unzugänglich zu implementieren.

Kästchen durch „Material“-Kästchen ersetzen

1. Fügen Sie zuerst Ihre neue Liste der Füllungen und eine Variable zum Speichern der ausgewählten Füllungsaromen hinzu:

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 Ihren 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 überprüfen

Schalten Sie den Screenreader wieder ein und überprüfen Sie Ihre Änderungen. Ihre Kästchen können jetzt ausgewählt und mit einem Screenreader intuitiver bedient werden.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• ✅ Semantisches HTML gewährleistet logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader erreichbar.
• 🛑 Der Screenreader liest keine Schiebereglerwerte vor
• 🛑 Der Screenreader-Fokus in der Farbauswahl schließt das Dialogfeld
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

8. Steuerelementlabels mit ARIA bereitstellen

Sie haben die semantischen HTML- und Material-Komponenten Ihrer Angular-App geändert. Für einige Komponenten sind jedoch bestimmte Attribute erforderlich, damit Screenreader vollständig navigieren können.

Die Accessible Rich Internet Applications-Spezifikation der Web Accessibility Initiative (WAI-ARIA oder ARIA) hilft dabei, Probleme zu überwinden, die nicht mit nativem HTML verwaltet werden können. Damit können Sie Attribute angeben, die ändern, wie ein Element in die Baumstruktur für Bedienungshilfen übersetzt wird.

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

• 🛑 Der Screenreader liest keine Schiebereglerwerte vor

Sie finden jeden dieser Schritte 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

Schalten Sie den Screenreader wieder ein und überprüfen Sie Ihre Änderungen. Du kannst jetzt den Schieberegler bewegen.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• ✅ Semantisches HTML gewährleistet logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader erreichbar.
• ✅ Der Schieberegler verwendet ARIA-Attribute, um ein Label bereitzustellen
• 🛑 Der Screenreader-Fokus in der Farbauswahl schließt das Dialogfeld
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

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

Bisher haben Sie sich auf integrierte Angular-Tools verlassen, um häufige A11y-Probleme zu beheben. Sehen wir uns nun das a11y-Modul des CDK an und wie es uns helfen kann, kompliziertere und Angular-spezifische Probleme zu lösen.

Am Ende dieses Abschnitts setzen Sie den Kurs mit den Tools des Angular-A11y-Moduls 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 Zugänglichkeit und ist speziell für Autoren von Komponenten nützlich.

In den folgenden Abschnitten fügen Sie drei gängige Dienste hinzu: FocusTrap, LiveAnouncecer 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 Dialogfeld geöffnet ist, interagiert der Nutzer nur darin. Wenn Sie zulassen, dass der Fokus außerhalb des Dialogfelds verschwindet, werden Kontexte vermischt und der Nutzer weiß nicht, wo er sich auf der Seite befindet.

In Angular fängt die Anweisung cdkTrapFocus den Hauptfokus tab- innerhalb eines Elements ein. Dies soll dazu dienen, Komponenten wie modale Dialogfelder barrierefrei zugänglich zu machen, bei denen der Fokus beschränkt sein muss.

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

• 🛑 Der Screenreader-Fokus in der Farbauswahl schließt das Dialogfeld

Diese Schritte finden Sie unter den Kommentaren: TODO: #10. Control focus with FocusTrap.

Problem identifizieren

Aktivieren Sie den Screenreader und öffnen Sie das Dialogfeld für die Farbauswahl, um dieses Problem zu ermitteln.

1. Aktivieren Sie VoiceOver.
2. Über die Tab-Navigation können Sie die Farbe ändern.
3. Aktivieren Sie diese Option, um die intuitive Fokusreihenfolge und die Fokusüberlagerung in der Farbauswahl zu sehen.

Fokusfalle hinzufügen

Mit cdkFocusTrap kann die Fokusreihenfolge in benutzerdefinierten Komponenten erfasst und gesteuert werden. Die Verwendung von mat-dialog-content reicht aus, um die meisten Probleme zu beheben, da der Fokus in einem Dialogfeld bleibt. 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

Schalten Sie den Screenreader wieder ein und überprüfen Sie Ihre Ä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 gewährleistet logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader erreichbar.
• ✅ Der Schieberegler verwendet ARIA-Attribute, um ein Label bereitzustellen
• ✅ Farbauswahl hat die richtige Fokusüberstellung
• 🛑 Änderungen, Fehler und Benachrichtigungen werden nicht angekündigt
• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

11. Änderungen mit LiveAnouncecer bekannt geben

Screenreader müssen benachrichtigt werden, wenn sich etwas auf der Seite ändert. Stellen Sie sich vor, Sie versuchen, ein Formular einzureichen oder einen Kauf abzuschließen, ohne zu wissen, dass ein Fehler aufgetreten ist, der das Senden des Formulars verhindert. Das ist frustrierend!

Mit LiveAnouncecer werden Nachrichten für Nutzer von Screenreadern angesagt, die eine ARIA-Live-Region verwenden, um sicherzustellen, dass Screenreader über Benachrichtigungen und Änderungen der Live-Seite informiert werden. Weitere Informationen zu Aria-Live-Regionen finden Sie unter WAI-ARIA des W3C. In Angular ist der Aufruf von LiveAnouncecer als Dienst eine testbarere Lösung als aria-live-Attribute.

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

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

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

Problem identifizieren

Um dieses Problem zu ermitteln, schalten Sie den Screenreader ein und wählen Sie Kaufen aus, ohne die Formularfelder auszufüllen:

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

LiveAnkündigung zum Code hinzufügen

Füge LiveAnouncecer hinzu und kündige sowohl die Farbauswahl als auch den Fake-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 überprüfen

Schalten Sie den Screenreader wieder ein und überprüfen Sie Ihre Änderungen. Sie werden jetzt über die Fehler informiert.

Prüfung der Barrierefreiheit:

• ✅ Alle Seiten haben eindeutige Seitentitel.
• ✅ Die Farben haben ein ausreichendes Kontrastverhältnis.
• ✅ Semantisches HTML gewährleistet logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader erreichbar.
• ✅ Der Schieberegler verwendet ARIA-Attribute, um ein Label bereitzustellen
• ✅ Farbauswahl hat die richtige Fokusüberstellung
• ✅ Änderungen, Fehler und Benachrichtigungen werden angekündigt
• 🛑 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 Web-Apps, angepasst, um den Kontrast erheblich zu erhöhen. In Angular sollen die Einstellungen der Nutzer in Ihrer App berücksichtigt werden.

Mit HighContrastModeDetector können Sie ermitteln, 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 nicht den Windows-Modus mit hohem Kontrast. Der von der Chrome-Browsererweiterung mit hohem Kontrast hinzugefügte Modus mit hohem Kontrast wird von diesem Dienst nicht erkannt.

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

• 🛑 Der Modus „Hoher Kontrast“ ist nicht aktiviert

Diese Schritte finden Sie unter den Kommentaren: TODO: #12. Enable HighContrast mode.

Problem identifizieren

Um dieses Problem zu ermitteln, öffnen Sie die 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. Beachten Sie, dass die Anwendung unverändert ist.

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

Verwende in styles.scss das cdk-high-contrast-Mixin in @angular/cdk/a11y, um den Schaltflächen im Modus mit hohem 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 überprüfen

Aktualisieren Sie Ihre App und prüfen Sie Ihre Änderungen. Du hast 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 gewährleistet logische Interaktion
• ✅ Alle Steuerelemente sind für Screenreader erreichbar.
• ✅ Der Schieberegler verwendet ARIA-Attribute, um ein Label bereitzustellen
• ✅ Farbauswahl hat die richtige Fokusüberstellung
• ✅ Änderungen, Fehler und Benachrichtigungen werden angekündigt
• ✅ 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 Lösung von acht häufigen Fallstricken in Ihrer Angular-Anwendung.

Weitere Informationen

Dann sieh dir diese Codelabs an:

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

Lesen Sie diese Materialien:

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