Twórz łatwiej dostępne aplikacje Angular

1. Zanim zaczniesz

Ułatwienia dostępu to kluczowy element tworzenia stron internetowych, dzięki któremu użytkownicy mogą odbierać i rozumieć aplikacje oraz poruszać się po nich i wchodzić z nimi w interakcje. Według danych 1 na 4 dorosłych w Stanach Zjednoczonych cierpi na niepełnosprawność, która wpływa na wykonywanie głównej czynności życiowej. Na całym świecie około 15% populacji świata – ponad miliard osób – ma jakąś formę niepełnosprawności, z czego około 2–4% cierpi na poważne trudności.

Typowe przyczyny, które wpływają na korzystanie z internetu, to ślepota, niedowidzący, niesłyszący lub niedosłuch, ograniczona motoryka, niepełnosprawność poznawcza i ślepota barw. Ta lista jest tylko częściowa.

W tym kursie pojęcie „a11y” to skrót od ułatwień dostępu. Zwróć uwagę, że po a znajduje się 11 znaków, a po nim y.

Dokładne wprowadzenie do problemów i technik projektowania aplikacji z ułatwieniami dostępu znajdziesz w artykule Ułatwienia dostępu.

Co utworzysz

• Użyj sprawdzonych metod i wbudowanych technik, aby rozwiązać typowe problemy z ułatwieniami dostępu w internecie w wersji demonstracyjnej aplikacji Dumpling Shop Angular.
• Przestrzegaj wszystkich wytycznych dotyczących ułatwień dostępu, WCAG 2.0 i ARIA 1.2 oraz zaliczaj audyty ułatwień dostępu w Lighthouse.

Czego się nauczysz

Poznasz 8 typowych problemów z ułatwieniami dostępu w aplikacjach Angular, które mają wpływ na użytkowników, a także jak je zidentyfikować i rozwiązać. Mówiąc bardziej szczegółowo:

• Kontroluj ułatwienia dostępu w aplikacji za pomocą Narzędzi deweloperskich w Google Chrome, narzędzia Lighthouse i toporu
• Rozwiązuj problemy związane z aplikacją na jednej stronie dzięki unikalnym tytułom stron
• Rozwiązywanie problemów z niskim kontrastem kolorów u użytkowników niedowidzących
• Używaj semantycznego kodu HTML, aby czytniki ekranu prawidłowo poruszały się po stronie
• Używaj elementów sterujących Angular Material i anuluj zagnieżdżenie, aby czytniki ekranu miały dostęp do wszystkich elementów sterujących.
• Dodanie obsługi ARIA dla czytników ekranu.
• Importowanie i używanie pakietu Angular CDK a11y
• Używaj FocusTrap do nawigacji za pomocą czytnika ekranu niestandardowego komponentu
• Odczytuj powiadomienia za pomocą CDK LiveAnnouncer
• Wykrywanie użytkowników w trybie wysokiego kontrastu i stosowanie wysokich kontrastów

Czego potrzebujesz

• Wiedza z zakresu Angular, SCSS, TypeScript, git i narzędzi Chrome dla programistów

2. Konfiguracja

Pobierz kod

Wszystko, czego potrzebujesz w tym projekcie, znajduje się w repozytorium GitHub. Na początek skopiuj kod i otwórz go w swoim ulubionym środowisku programistycznym.

Klonowanie repozytorium i udostępnianie aplikacji

Do pracy w tym ćwiczeniu zalecamy użycie VSCode lub lokalnego IDE.

1. Otwórz nową kartę przeglądarki i wejdź na stronę https://github.com/googlecodelabs/angular-accessibility.
2. Utwórz rozwidlenie i skopiuj repozytorium, a potem cd angular-accessibility/ do repozytorium.
3. Zobacz gałąź kodu startowego git checkout get-started.
4. Otwórz kod w VSCode lub w preferowanym IDE.
5. Uruchom npm install, aby zainstalować zależności wymagane do uruchomienia serwera.
6. Uruchom ng serve, aby uruchomić serwer.
7. Otwórz kartę przeglądarki z adresem http://localhost:4200.

3. Określ punkt odniesienia

Od czego chcesz zacząć?

Na początek możesz wykorzystać podstawową aplikację restauracyjną zaprojektowaną na potrzeby tego ćwiczenia z programowania. Kod został uproszczony, aby pokazać koncepcje przedstawione w tym ćwiczeniu z programowania, i nie ma w nim zbyt wielu funkcji.

Zapoznaj się z wersją demonstracyjną

Na początek przedstaw 3 funkcje aplikacji:

1. Na pasku nawigacyjnym możesz wyświetlić trasy Nasz sklep, Nasza historia i Znajdź nas oraz dowiedzieć się więcej o naszej firmie cukierniczej.
2. Zmieniaj motywy, aby przełączać tryb jasny i ciemny.
3. Dostosuj nadzienie, liczbę i kolor pierogów w zamówieniu.
4. Wybierz Kup, aby zapisać niestandardowe zamówienie w konsoli.

Używanie Angular do rozwiązywania typowych problemów z ułatwieniami dostępu w internecie

W ramach tego ćwiczenia w programie skupisz się na ułatwieniach dostępu w istniejących funkcjach tej aplikacji. Zaczniesz od rozpoznania problemów w aplikacji, a potem 🛑 w ✅, implementując rozwiązanie.

Skąd wiesz, co poprawić?

Zacznij każdy przykład od rozpoznania problemu z ułatwieniami dostępu przez połączenie testów ręcznych i automatycznych.

W obecnej wersji internetu ręczne testowanie ułatwień dostępu jest obowiązkowe.

Masz narzędzia, które potrafią wykryć problemy z ułatwieniami dostępu, ale żadne z nich nie może potwierdzić, że aplikacja jest w pełni dostępna. Testowanie ręczne umożliwia sprawdzenie szerokiego zakresu pojęć obejmujących logiczną kolejność treści i spójność funkcji.

Testowanie ręczne

Aby ręcznie przetestować ułatwienia dostępu w ramach tego kursu, włącz wbudowany czytnik ekranu na komputerze i poruszasz się po aplikacji, korzystając z nawigacji za pomocą klawiatury. Więcej informacji znajdziesz w artykule Semantyka i czytniki ekranu.

Ćwicz, włączając czytnik ekranu i poruszając się po ekranie.

Możesz korzystać z funkcji VoiceOver wbudowanej w system macOS. Kliknij Preferencje systemowe > Ułatwienia dostępu > VoiceOver > Aby włączyć VoiceOver, włącz tę funkcję. Aby przełączyć VoiceOver, szybko naciśnij TouchID 3 razy, przytrzymując klawisz Command.

Na tym szkoleniu poznasz przede wszystkim problemy z automatyzacją, a także korzystasz z automatycznych narzędzi, które pomagają w sprawdzaniu określonych funkcji zautomatyzowanych.

Testy automatyczne

Korzystasz też z kilku narzędzi dla programistów do automatyzacji i kontrolowania aplikacji. Te narzędzia umożliwiają sprawdzanie m.in. obecności tekstu alternatywnego na obrazie czy współczynnika kontrastu koloru tekstu. Są to lintery, mogą rozpoznać, że występuje tekst alternatywny, ale musisz ręcznie sprawdzić, czy treść jest logiczna i wartościowa.

Lighthouse i Narzędzia dla deweloperów w Chrome

1. Otwórz Narzędzia dla programistów Chrome.
2. Wybierz kartę Lighthouse i zaznacz pole Ułatwienia dostępu.
3. Kliknij Wygeneruj raport, aby przeprowadzić audyt a11y w Lighthouse.

Siekiera

1. Zainstaluj rozszerzenie axe DevNarzędzia. Aby zobaczyć to rozszerzenie, konieczne może być ponowne uruchomienie przeglądarki.
2. Otwórz Narzędzia Chrome dla programistów.
3. Aby uruchomić skanowanie przy użyciu narzędzi deweloperskich, kliknij kartę axe DevTools (Narzędzia deweloperskie) i wybierz Skanuj całą moją stronę.

Lintowanie

Możesz użyć reguł ESLint w Angular, aby lintować swój kod pod kątem zautomatyzowanych atrybutów a11y.

W aplikacji eslint.json dodaj te elementy, które będą związane z ułatwieniami dostępu:

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

Więcej informacji znajdziesz w najnowszych regułach ESLint na GitHub.

Punkt początkowy

Korzystając z nowych metod testowania, możesz wykryć te problemy w aplikacji, korzystając z kontroli Lighthouse i Axe oraz ręcznego raportowania VoiceOver:

Audyt ułatwień dostępu:

• 🛑 Wszystkie strony mają ten sam tytuł
• 🛑 Elementy muszą mieć wystarczający kontrast kolorów
• 🛑 HTML powinien mieć logiczną kolejność, nazwę i rolę
• 🛑 Zagnieżdżonych pól wyboru nie można wybrać dla czytników ekranu
• 🛑 Czytnik ekranu nie odczytuje wartości suwaków
• 🛑 zaznaczenie w czytniku ekranu w selektorze kolorów zamyka okno dialogowe
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane
• 🛑 Tryb wysokiego kontrastu nie jest włączony

4. Określanie niepowtarzalnych tytułów stron

Podawanie unikalnych, zwięzłych tytułów stron pomaga użytkownikom korzystającym z usług w szybkim poznaniu treści i celu strony internetowej. Tytuły stron mają newralgiczne znaczenie dla użytkowników z wadą wzroku, ponieważ są to pierwszy element strony wyświetlany przez oprogramowanie do odczytywania ekranu.

Angular to aplikacja ograniczona do jednej strony, dlatego większość operacji przenoszenia, takich jak przeniesienie na nową stronę, nie wymaga ponownego załadowania strony. Do niedawna oznaczało to, że każda strona miała taki sam tytuł i nie ułatwiała poznania treści ani celu strony.

W Angular w wersji 14 router dodał wbudowaną metodę definiowania unikalnych tytułów stron. Dzięki temu masz pewność, że deweloperzy przestrzegają sprawdzonych metod dotyczących tytułów stron.

Po zakończeniu tej sekcji Twoja aplikacja przejdzie następujący audyt:

• 🛑 Wszystkie strony mają ten sam tytuł

Instrukcje znajdziesz w komentarzu: TODO: #4. Define unique page titles.

Identyfikowanie problemu

Aby zidentyfikować ten problem, włącz czytnik ekranu i przejdź między kartami Nasz sklep, Nasza historia oraz Znajdź nas, aby zobaczyć tytuły stron:

1. Włącz VoiceOver.
2. Używaj nawigacji po kartach, aby przechodzić między stronami.
3. Sprawdź, czy w Angular tytuł strony to zawsze „a11y”.

Problem polega na tym, że tytuł strony musi być niepowtarzalny, aby użytkownik mógł szybko dowiedzieć się, o czym jest strona, bez konieczności jej przeglądania.

Dodawanie znaczących tytułów stron

Jeśli strona lub widok ulegnie zmianie, trzeba będzie odpowiednio zarządzać tytułem strony. Aby rozwiązać ten problem, określ unikalne tytuły każdej strony, używając wbudowanej właściwości Router.title Angular.

1. Dodaj unikalny tytuł do każdej z trzech zdefiniowanych tras:

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

Spowoduje to automatyczne zaimportowanie atrybutu Router's Title Service i używanie go do zarządzania zmianą tytułu strony w nawigacji, tak aby był zgodny z właściwością tytułu zdefiniowaną w naszych trasach. Bardziej skomplikowanymi tytułami stron możesz też zarządzać za pomocą niestandardowego elementu TitleStrategy.

Zweryfikuj zmiany

Ponownie włącz czytnik ekranu i sprawdź wprowadzone zmiany. Strony powinny mieć teraz unikalne tytuły.

Audyt ułatwień dostępu:

• ✅ Wszystkie strony mają unikalne tytuły
• 🛑 Elementy muszą mieć wystarczający kontrast kolorów
• 🛑 HTML powinien mieć logiczną kolejność, nazwę i rolę
• 🛑 Zagnieżdżonych pól wyboru nie można wybrać dla czytników ekranu
• 🛑 Czytnik ekranu nie odczytuje wartości suwaków
• 🛑 zaznaczenie w czytniku ekranu w selektorze kolorów zamyka okno dialogowe
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane
• 🛑 Tryb wysokiego kontrastu nie jest włączony

5. Zapewnia odpowiedni kontrast kolorów.

Twój projekt może się wydawać fajny, ale nie oznacza, że osoby z wadami wzroku (np. daltonizm) nie będą w stanie przeczytać Twoich treści. Wytyczne Web Content Accessibility Guidelines (WCAG 2.0) definiują szereg współczynników kontrastu kolorów, które zapewniają dostępność treści. W Angular i w przeglądarce możesz zdefiniować palety kolorów, dzięki którym komponenty spełniają te standardy i są widoczne dla użytkowników niedowidzących i niedowidzących.

Po zakończeniu tej sekcji Twoja aplikacja przejdzie następujący audyt:

• 🛑 Elementy muszą mieć wystarczający kontrast kolorów

Instrukcje dotyczące tych czynności znajdziesz pod komentarzami: TODO: #5. Ensure adequate color contrast.

Używanie Narzędzi dla programistów w Chrome do identyfikowania problemów z niskim kontrastem

Aby zidentyfikować ten problem, sprawdź elementy w aplikacji za pomocą Narzędzi dla programistów w Chrome.

1. Użyj narzędzia do inspekcji, aby wyświetlić przyciski z ikonami menu. Jak widać, kontrast wynosi 1,85, czyli znacznie poniżej wymagań WCAG.

2. Aby sprawdzić problemy ze współczynnikiem kontrastu, uruchom kontrolę ułatwień dostępu w narzędziu Lighthouse lub skanowaniem Axe.

Zmienianie koloru motywu Material Design

Schemat kolorów komponentu jest zdefiniowany w niestandardowym motywie Material Design. Zaktualizujesz wartość motywu, tak aby była zgodna z wytycznymi dotyczącymi współczynnika kontrastu kolorów.

Zmień motyw Material Design na ciemniejszy kolor tekstu i zwiększ współczynnik kontrastu ikon:

src/styles.scss

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

Możesz też użyć wbudowanych narzędzi ułatwień dostępu w Narzędziach deweloperskich w Chrome, aby znaleźć kolor zgodny ze standardami lub zaktualizować poszczególne wartości kolorów w Sass.

Zweryfikuj zmiany

Ponownie sprawdź elementy i zweryfikuj zmiany. Motyw powinien teraz mieć wystarczające współczynniki kontrastu kolorów.

Audyt ułatwień dostępu

• ✅ Wszystkie strony mają unikalne tytuły
• ✅ Kolory mają wystarczający współczynnik kontrastu
• 🛑 HTML powinien mieć logiczną kolejność, nazwę i rolę
• 🛑 Zagnieżdżonych pól wyboru nie można wybrać dla czytników ekranu
• 🛑 Czytnik ekranu nie odczytuje wartości suwaków
• 🛑 zaznaczenie w czytniku ekranu w selektorze kolorów zamyka okno dialogowe
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane
• 🛑 Tryb wysokiego kontrastu nie jest włączony

6. Używaj semantycznego kodu HTML

Natywne elementy HTML rejestrują szereg standardowych wzorców interakcji, które są ważne z punktu widzenia ułatwień dostępu. Styl akapitu można określić jako span

Gdy tworzysz komponenty Angular, w miarę możliwości korzystaj z tych elementów natywnych bezpośrednio, zamiast ponownie wdrażać dobrze obsługiwane zachowania. Zapewnia to odpowiednią strukturę treści i naturalny przepływ treści oraz logiczną kolejność kart, co pomaga użytkownikom w poruszaniu się po witrynie przy użyciu klawiatury.

Po zakończeniu tej sekcji Twoja aplikacja przejdzie następujący audyt:

• 🛑 HTML powinien mieć logiczną kolejność, nazwę i rolę

Instrukcje dotyczące tych czynności znajdziesz pod komentarzami: TODO: #6. Use Semantic HTML.

Identyfikowanie problemu

1. Włącz VoiceOver.
2. Użyj nawigacji na kartach, aby przejść do karty Nasza historia.
3. Zwróć uwagę, że kolejność kart nie jest sekwencyjna.
4. Kliknij Kup.
5. Zauważ, że przycisk nie został rozpoznany jako przycisk.

Zmienianie tagu <div> do <button>

Zastąp niestandardowy tag <div> klikając przycisk Materiał:

src/app/shop/shop.component.html

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

Używanie elementów nagłówków w sposób sekwencyjny

Zmień kolejność tekstu na semantyczny kod HTML i zastosuj style za pomocą typografii materiału Angular:

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>

Zweryfikuj zmiany

Ponownie włącz czytnik ekranu i sprawdź wprowadzone zmiany. VoiceOver rozpoznaje teraz przycisk, a tekst odczytywany jest w logicznej kolejności.

Audyt ułatwień dostępu:

• ✅ Wszystkie strony mają unikalne tytuły
• ✅ Kolory mają wystarczający współczynnik kontrastu
• ✅ Semantyczny kod HTML zapewnia interakcję logiczną
• 🛑 Zagnieżdżonych pól wyboru nie można wybrać dla czytników ekranu
• 🛑 Czytnik ekranu nie odczytuje wartości suwaków
• 🛑 zaznaczenie w czytniku ekranu w selektorze kolorów zamyka okno dialogowe
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane
• 🛑 Tryb wysokiego kontrastu nie jest włączony

7. Twórz elementy sterujące z możliwością wyboru w Angular Material

Jednym ze złożonych wzorców interakcji w przypadku usług ułatwień dostępu są zagnieżdżone elementy sterujące. Weź pod uwagę elementy podrzędne menu lub zagnieżdżone pola wyboru. Jak poinformować użytkownika, że może wybrać podgrupę opcji lub przejść do nadrzędnego elementu menu?

Uprość menu i elementy sterujące w Angular, aby utworzyć komponenty z możliwością nawigacji, maksymalnie upraszczając elementy sterujące. W tym przykładzie użyjesz listy materiałów Angular, aby utworzyć jeden przykładowy wzorzec interakcji.

Po zakończeniu tej sekcji Twoja aplikacja przejdzie następujący audyt:

• 🛑 Zagnieżdżonych pól wyboru nie można wybrać dla czytników ekranu

Instrukcje dotyczące tych czynności znajdziesz pod komentarzami: TODO: #7. Create selectable controls with Angular Material.

Identyfikowanie problemu

Aby zidentyfikować ten problem, włączymy czytnik ekranu i spróbujemy zaznaczyć zagnieżdżone pole wyboru.

1. Włącz VoiceOver.
2. Wybierz różne smaki nadzienia.
3. Zwróć uwagę, że nadrzędne pola wyboru odczytywane przez VoiceOver nie zawierają elementów podrzędnych. Skąd wiesz, że pole Wegańskie jest odznaczone, mimo że nie jest zaznaczone pole Bok Choy?

A11y z materiału Angular

Zastępujesz semantyczne pole wyboru przy użyciu pola wyboru Materiał Angular, które zawiera wbudowaną wiedzę na temat danego wzorca interakcji. Pamiętaj, że zastąpienie komponentów komponentem Material Design nie gwarantuje dostępności. Podobnie jak w przypadku każdego innego komponentu, musisz przetestować go ręcznie, ponieważ jest wiele sposobów na niedostępną implementację Material.

Zastępowanie pól wyboru polami wyboru Materiał

1. Najpierw dodaj nową listę wypełnienia i zmienną do zapisania wybranych smaków napełnienia:

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. Dodaj pole <mat-selection-list>, aby zastąpić to niezrozumiałe grupowanie pól wyboru 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>

Z Twoich komentarzy na platformie TODO dowiesz się też, gdzie możesz usunąć niewykorzystany element Sass w aplikacji src/app/shop/shop.component.scss, aby poprawić stylizację.

Zweryfikuj zmiany

Ponownie włącz czytnik ekranu i sprawdź wprowadzone zmiany. Teraz możesz zaznaczyć pola wyboru, a poruszać się po nich będzie można bardziej intuicyjnie za pomocą czytnika ekranu.

Audyt ułatwień dostępu:

• ✅ Wszystkie strony mają unikalne tytuły
• ✅ Kolory mają wystarczający współczynnik kontrastu
• ✅ Semantyczny kod HTML zapewnia interakcję logiczną
• ✅ Wszystkie elementy sterujące są dostępne dla czytników ekranu
• 🛑 Czytnik ekranu nie odczytuje wartości suwaków
• 🛑 zaznaczenie w czytniku ekranu w selektorze kolorów zamyka okno dialogowe
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane
• 🛑 Tryb wysokiego kontrastu nie jest włączony

8. Podawanie etykiet sterujących za pomocą ARIA

Zmodyfikowano semantyczne komponenty HTML i Material (Material) aplikacji Angular, ale czytniki ekranu wymagają podania określonych atrybutów.

Specyfikacja aplikacji Web Accessibility Initiative (WAI-ARIA lub ARIA) pomaga eliminować problemy, których nie można zarządzać za pomocą natywnego kodu HTML. Umożliwia określenie atrybutów, które zmieniają sposób przekształcania elementu w drzewo ułatwień dostępu.

Po zakończeniu tej sekcji Twoja aplikacja przejdzie następujący audyt:

• 🛑 Czytnik ekranu nie odczytuje wartości suwaków

Instrukcje dotyczące tych czynności znajdziesz pod komentarzami: TODO: #8. Provide control labels with ARIA.

Identyfikowanie problemu

Aby zidentyfikować ten problem, włącz czytnik ekranu i przesuń suwak:

1. Włącz VoiceOver.
2. Przejdź do suwaka ilości i zmień wartość.
3. Zwróć uwagę, że brakuje etykiety wartości.

Używanie atrybutów ARIA

Kontrola etykiet za pomocą funkcji aria-label do: <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>

Zweryfikuj zmiany

Ponownie włącz czytnik ekranu i sprawdź wprowadzone zmiany. Teraz możesz przesunąć suwak.

Audyt ułatwień dostępu:

• ✅ Wszystkie strony mają unikalne tytuły
• ✅ Kolory mają wystarczający współczynnik kontrastu
• ✅ Semantyczny kod HTML zapewnia interakcję logiczną
• ✅ Wszystkie elementy sterujące są dostępne dla czytników ekranu
• ✅ Suwak korzysta z atrybutów ARIA do podawania etykiety.
• 🛑 zaznaczenie w czytniku ekranu w selektorze kolorów zamyka okno dialogowe
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane
• 🛑 Tryb wysokiego kontrastu nie jest włączony

9. Dodaj możliwości @angular/cdk/a11y

Do tej pory do rozwiązywania typowych problemów z AI można było korzystać z wbudowanych narzędzi Angular. Przyjrzyjmy się teraz modułowi A11y CDK i temu, w jaki sposób może on pomóc nam w rozwiązywaniu bardziej złożonych problemów i problemów związanych z Angular.

Po zakończeniu tej sekcji będziesz kontynuować szkolenie z wykorzystaniem narzędzi modułu Angular a11y.

Instrukcje znajdziesz pod komentarzem: TODO: #9. Add the power of @angular/cdk/a11y.

Importowanie modułu

Dodaj moduł do aplikacji:

src/app/app.module.ts

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

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

Co '@angular/cdk/a11y' robi?

Moduł a11y zawiera wiele narzędzi zwiększających dostępność i jest szczególnie przydatny dla autorów komponentów.

W kolejnych sekcjach możesz dodać 3 popularne usługi: FocusTrap, LiveAnnouncer i HighContrast.

Więcej informacji o wszystkich innych usługach oferowanych przez @angular/cdk/a11y znajdziesz w artykule o ułatwieniach dostępu.

10. Sterowanie ostrością za pomocą FocusTrap

Gdy okno lub okno modalne jest otwarte, użytkownik wchodzi w interakcję tylko z nim. Zezwolenie na przesuwanie zaznaczenia poza okno dialogowe powoduje mieszanie kontekstu i tworzenie stanu, w którym użytkownik nie wie, gdzie się znajduje.

W Angular dyrektywa cdkTrapFocus przechwytuje tab-fokus klawiszowy w elemencie. Służy do tworzenia ułatwień dostępu dla komponentów takich jak okna modalne, w których musisz ograniczać zaznaczenie.

Po zakończeniu tej sekcji Twoja aplikacja przejdzie następujący audyt:

• 🛑 zaznaczenie w czytniku ekranu w selektorze kolorów zamyka okno dialogowe

Instrukcje znajdziesz pod komentarzami: TODO: #10. Control focus with FocusTrap.

Identyfikowanie problemu

Aby zidentyfikować ten problem, włącz czytnik ekranu i otwórz okno selektora kolorów.

1. Włącz VoiceOver.
2. Aby zmienić kolor, użyj nawigacji po kartach.
3. Zaznacz tę opcję, aby w selektorze kolorów wyświetlić intuicyjne kolejność i ustawianie ostrości.

Dodawanie FocusTrap

Element cdkFocusTrap może być używany do zatrzymywania i kontrolowania kolejności ostrości w komponentach niestandardowych. Użycie właściwości mat-dialog-content wystarcza do rozwiązania większości problemów przez zatrzymanie fokusu w oknie. Dodaj atrybut cdkFocusInitial, aby określić początkowy obszar zaznaczenia dla koloru otoki pierożka <mat-selection-list> w oknie wyboru kolorów.

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>

Zweryfikuj zmiany

Ponownie włącz czytnik ekranu i sprawdź wprowadzone zmiany. Ostrość jest teraz ustawiona na opcję Zmień kolor w oknie.

Audyt ułatwień dostępu:

• ✅ Wszystkie strony mają unikalne tytuły
• ✅ Kolory mają wystarczający współczynnik kontrastu
• ✅ Semantyczny kod HTML zapewnia interakcję logiczną
• ✅ Wszystkie elementy sterujące są dostępne dla czytników ekranu
• ✅ Suwak korzysta z atrybutów ARIA do podawania etykiety.
• ✅ Selektor kolorów ma prawidłowe uwydatnianie ostrości
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane
• 🛑 Tryb wysokiego kontrastu nie jest włączony

11. Ogłaszanie zmian za pomocą LiveAnnouncer

Czytniki ekranu muszą otrzymywać powiadomienia, gdy coś się zmieni na stronie. Wyobraź sobie, że próbujesz przesłać formularz lub dokonać zakupu i nie wiesz, że pojawił się błąd uniemożliwiający przesłanie formularza. To frustrujące.

LiveAnnouncer służy do informowania użytkowników czytników ekranu o wiadomościach w regionie aktywności aria, aby czytniki ekranu były powiadamiane o powiadomieniach i zmianach na stronie na bieżąco. Więcej informacji o regionach, w których można wyświetlać aria na żywo, znajdziesz w opracowanej przez organizację W3C dokumencie WAI-ARIA. W Angular wywołanie LiveAnnouncer jako usługi jest łatwiejsze do przetestowania niż atrybuty aria-live.

Po zakończeniu tej sekcji Twoja aplikacja przejdzie następujący audyt:

• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane

Instrukcje znajdziesz pod komentarzami: TODO: #11. Announce changes with LiveAnnouncer.

Identyfikowanie problemu

Aby zidentyfikować ten problem, włącz czytnik ekranu i wybierz Kup bez wypełniania pól formularza:

1. Włącz VoiceOver.
2. Użyj nawigacji po kartach, aby zmienić kolor i dokonać fałszywego zakupu.
3. Nie zobaczysz żadnego koloru, który został wybrany po zamknięciu okna, a zakup nie zostanie odczytany.

Dodawanie LiveAnnouncer do kodu

Dodaj LiveAnnouncer i poinformuj o wyborze kolorów oraz o fałszywym zakupie jako tekst. W rzeczywistej implementacji możesz ją odczytać po przejściu do systemu płatności firmy zewnętrznej lub w przypadku błędów w formularzu.

1. Dodawanie ogłoszenia po wybraniu koloru:

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. Dodawanie ogłoszenia w przypadku dokonania fałszywego zakupu:

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

Zweryfikuj zmiany

Ponownie włącz czytnik ekranu i sprawdź wprowadzone zmiany. Będziesz teraz otrzymywać powiadomienia o błędach.

Audyt ułatwień dostępu:

• ✅ Wszystkie strony mają unikalne tytuły
• ✅ Kolory mają wystarczający współczynnik kontrastu
• ✅ Semantyczny kod HTML zapewnia interakcję logiczną
• ✅ Wszystkie elementy sterujące są dostępne dla czytników ekranu
• ✅ Suwak korzysta z atrybutów ARIA do podawania etykiety.
• ✅ Selektor kolorów ma prawidłowe uwydatnianie ostrości
• ✅ Ogłoszenie zmian, błędów i powiadomień
• 🛑 Tryb wysokiego kontrastu nie jest włączony

12. Włącz tryb wysokiego kontrastu

System Microsoft Windows obsługuje funkcję ułatwień dostępu o nazwie Tryb wysokiego kontrastu. Ten tryb zmienia wygląd wszystkich aplikacji, w tym aplikacji internetowych, aby znacznie zwiększyć kontrast. W Angular chcesz szanować preferencje użytkownika dotyczące Twojej aplikacji.

HighContrastModeDetector pozwala określić, czy przeglądarka działa obecnie w środowisku o wysokim kontraście.

Ten tryb obsługują przeglądarki Internet Explorer, Microsoft Edge i Firefox. Google Chrome nie obsługuje trybu wysokiego kontrastu w systemie Windows. Ta usługa nie wykrywa trybu wysokiego kontrastu dodanego przez rozszerzenie do przeglądarki Chrome „Wysoki kontrast”.

Po zakończeniu tej sekcji Twoja aplikacja przejdzie następujący audyt:

• 🛑 Tryb wysokiego kontrastu nie jest włączony

Instrukcje znajdziesz pod komentarzami: TODO: #12. Enable HighContrast mode.

Identyfikowanie problemu

Aby zidentyfikować ten problem, otwórz aplikację w przeglądarce Internet Explorer, Microsoft Edge lub Firefox, włącz tryb wysokiego kontrastu i sprawdź, czy nic się nie zmieniło:

1. Otwórz aplikację w przeglądarce Internet Explorer, Microsoft Edge lub Firefox.
2. Włącz tryb wysokiego kontrastu.
3. Zwróć uwagę, że aplikacja nie została zmieniona.

Dodawanie obsługi trybu wysokiego kontrastu

W programie styles.scss użyj kombinacji cdk-high-contrast dostępnej w @angular/cdk/a11y, aby dodać kontur przycisków w trybie wysokiego kontrastu:

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

Zweryfikuj zmiany

Odśwież aplikację i sprawdź zmiany. Dodano kontur do przycisku w trybie wysokiego kontrastu.

Audyt ułatwień dostępu:

• ✅ Wszystkie strony mają unikalne tytuły
• ✅ Kolory mają wystarczający współczynnik kontrastu
• ✅ Semantyczny kod HTML zapewnia interakcję logiczną
• ✅ Wszystkie elementy sterujące są dostępne dla czytników ekranu
• ✅ Suwak korzysta z atrybutów ARIA do podawania etykiety.
• ✅ Selektor kolorów ma prawidłowe uwydatnianie ostrości
• ✅ Ogłoszenie zmian, błędów i powiadomień
• ✅ Tryb wysokiego kontrastu jest włączony.

13. Gratulacje!

Gratulacje! Udało Ci się rozwiązać typowe problemy z ułatwieniami dostępu w internecie w aplikacji Angular. 🎉

Aby zobaczyć wszystkie rozwiązania, sprawdź gałąź main.

Wiesz już, jakie są kluczowe czynności, które należy wykonać, aby rozwiązać 8 częstych pułapek związanych z aplikacją Angular.

Więcej informacji

Zapoznaj się z tymi ćwiczeniami z programowania:

• Tworzenie aplikacji internetowej za pomocą Angular i Firebase
• Znajdowanie i poprawianie tekstu o niskim kontraście za pomocą Narzędzi deweloperskich w Chrome

Przeczytaj te materiały:

• Angular.io
• Materiał Angular a11y
• Podstawowe informacje o ułatwieniach dostępu
• https://web.dev/accessible/