Twórz łatwiej dostępne aplikacje Angular

1. Zanim zaczniesz

Dostępność jest bardzo ważną częścią tworzenia stron internetowych, ponieważ zapewnia użytkownikom możliwość korzystania z aplikacji, poruszania się po nich i wchodzenia z nimi w interakcje. W rzeczywistości 1 na 4 dorosłe osoby w Stanach Zjednoczonych ma niepełnosprawność, która wpływa na ich główne działania życiowe. 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 a11y to skrót od „ułatwienia dostępu”. Zwróć uwagę, że po a następuje 11 znaków i y.

Szczegółowe informacje o problemach i technikach 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 wpływają na użytkowników, oraz dowiesz się, jak je identyfikować i rozwiązywać. W szczególności:

• Sprawdzanie ułatwień dostępu w aplikacji za pomocą Narzędzi deweloperskich w Google Chrome, Lighthouse i axe
• 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.
• Dodawanie obsługi ARIA dla czytników ekranu
• Importowanie i używanie pakietu Angular CDK a11y
• Używanie FocusTrap do nawigacji czytnikiem ekranu w komponencie niestandardowym
• Odczytywanie powiadomień za pomocą CDK LiveAnnouncer
• Wykrywanie użytkowników korzystających z trybu wysokiego kontrastu i implementowanie motywów w wysokim kontraście

Czego potrzebujesz

• Znajomość Angulara, SCSS, Typescripta, gita i Narzędzi dla programistów Chrome

2. Konfiguracja

Pobierz kod

Wszystko, czego potrzebujesz w tym projekcie, znajduje się w repozytorium GitHub. Aby rozpocząć, skopiuj kod i otwórz go w ulubionym środowisku programistycznym.

Sklonuj repozytorium i uruchom aplikację

Zalecane jest używanie VS Code lub lokalnego IDE do pracy z tym ćwiczeniem.

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 następnie cd angular-accessibility/ do repozytorium.
3. Sprawdź gałąź kodu startowego git checkout get-started.
4. Otwórz kod w VSCode lub ulubionym środowisku 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 i wejdź na stronę http://localhost:4200.

3. Ustal wartość odniesienia

Jaki jest Twój punkt wyjścia?

Na początek możesz wykorzystać podstawową aplikację restauracyjną zaprojektowaną na potrzeby tego ćwiczenia z programowania. Kod został uproszczony, aby pokazać koncepcje w tym laboratorium kodu, i ma niewielką funkcjonalność.

Zapoznaj się z prezentacją

Na początek zapoznaj się z 3 funkcjami 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ć się między trybem jasnym i ciemnym.
3. Dostosuj rodzaj, ilość i kolor farszu.
4. Kliknij Kup, aby zarejestrować zamówienie w konsoli.

Rozwiązywanie typowych problemów z dostępnością w witrynach za pomocą Angulara

W tym laboratorium kodu skupisz się na ułatwieniach dostępu do dotychczasowych funkcji aplikacji. Zaczniesz od zidentyfikowania problemów z aplikacją a11y, a potem zastosujesz rozwiązanie, aby zmienić 🛑 na ✅.

Jak wiesz, co należy naprawić?

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

W obecnej sytuacji w internecie 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 narzędzie nie może potwierdzić, że aplikacja jest w pełni dostępna. Ręczne testowanie zapewnia, że testujesz szeroką gamę koncepcji a11y, które obejmują logiczną kolejność treści i równość funkcji.

Testy ręczne

Aby ręcznie przetestować ułatwienia dostępu w ramach tego kursu, włącz wbudowany czytnik ekranu na komputerze i porusz się po aplikacji 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 użyć wbudowanego w system macOS czytnika VoiceOver. Kliknij Preferencje systemowe > Ułatwienia dostępu > VoiceOver > Włącz VoiceOver, aby włączyć tę funkcję. Aby przełączyć VoiceOver, szybko naciśnij TouchID 3 razy, przytrzymując klawisz Command.

W tym kursie testujesz głównie problemy ręcznie, a do sprawdzania określonych funkcji, które można zautomatyzować, używasz narzędzi automatycznych.

Testowanie automatyczne

Możesz też użyć kilku narzędzi programistycznych, aby zautomatyzować proces weryfikacji aplikacji. Te narzędzia umożliwiają sprawdzenie takich elementów, jak obecność tekstu alternatywnego obrazu czy współczynnik kontrastu koloru tekstu. Te narzędzia można traktować jak programy do sprawdzania kodu. Mogą one wykryć, że tekst alt jest obecny, ale musisz ręcznie sprawdzić, czy treść jest logiczna i przydatna.

Lighthouse i Narzędzia dla deweloperów w Chrome

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

Topór

1. Zainstaluj rozszerzenie axe do Narzędzi deweloperskich. Aby zobaczyć 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

Za pomocą reguł ESLint w Angular możesz sprawdzić kod pod kątem atrybutów a11y, które można zautomatyzować.

W sekcji 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 wyjścia

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

Kontrola 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ę
• 🛑 Pola wyboru w układance są niedostępne dla czytników ekranu
• 🛑 Czytnik ekranu nie odczytuje wartości suwaków
• 🛑 Czytnik ekranu skupiony na selektorze kolorów zamyka okno
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane.
• 🛑 Tryb wysokiego kontrastu jest wyłączony

4. Określanie niepowtarzalnych tytułów stron

Umieszczanie unikalnych, zwięzłych tytułów stron pomaga użytkownikom korzystającym z usług a11y szybko zrozumieć treść i cel strony internetowej. Tytuły stron są bardzo ważne dla użytkowników z wadami wzroku, ponieważ są pierwszym elementem strony odczytywanym przez oprogramowanie do odczytu 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 identyczny tytuł, który nie przekazywał żadnych informacji o jej treści ani celu.

W wersji 14.0 Angulara dodaliśmy wbudowaną metodę, która umożliwia definiowanie unikalnych tytułów stron. Dzięki temu deweloperzy będą mogli stosować sprawdzone metody dotyczące tytułów stron.

Do końca tej sekcji aplikacja musi przejść poniższą kontrolę:

• 🛑 Wszystkie strony mają ten sam tytuł

Wszystkie te kroki znajdziesz pod komentarzem: TODO: #4. Define unique page titles.

Identyfikowanie problemu

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

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

Jest to problem, ponieważ tytuł strony musi być niepowtarzalny, aby użytkownik mógł szybko zrozumieć, o czym jest strona, bez konieczności jej nawigowania.

Dodawanie zrozumiałych tytułów stron

Jeśli strona lub widok ulegnie zmianie, musisz odpowiednio zarządzać tytułem strony. Aby rozwiązać ten problem, użyj wbudowanej właściwości Router.title w Angularze, aby zdefiniować unikalne tytuły dla każdej ze stron.

1. Dodaj unikalny tytuł do każdej z 3 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 importowanie i używanie Router's Title Service, aby zarządzać zmianą tytułu strony w nawigacji w celu dopasowania go do właściwości tytułu zdefiniowanej 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ź 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ę
• 🛑 Pola wyboru w układance są niedostępne dla czytników ekranu
• 🛑 Czytnik ekranu nie odczytuje wartości suwaków
• 🛑 Czytnik ekranu skupiony na selektorze kolorów zamyka okno
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane.
• 🛑 Tryb wysokiego kontrastu jest wyłączony

5. Zadbaj o odpowiedni kontrast kolorów.

Twój projekt może wydawać się fajny, ale nie jest taki, jeśli osoby z niepełnosprawnością wzroku, np. ślepotą barw, nie mogą odczytać Twoich treści. Wytyczne Web Content Accessibility Guidelines (WCAG 2.0) definiują serię współczynników kontrastu kolorów, które zapewniają dostępność treści. W Angular i w internecie możesz definiować palety kolorów, które zapewnią zgodność Twoich komponentów z tymi standardami i będą widoczne dla użytkowników z niedowidzeniem i zaburzeniami rozpoznawania barw.

Pod koniec tej sekcji Twoja aplikacja przejdzie następującą kontrolę:

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

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

Identyfikowanie problemów z niskim kontrastem za pomocą Narzędzi deweloperskich Chrome

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. Kontrast wynosi 1,85, czyli jest 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

Schemat kolorów komponentów jest zdefiniowany w niestandardowym motywie Material. Zaktualizuj wartość motywu, aby była zgodna ze wskazówkami 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 sprawdź zmiany. Nasz motyw powinien teraz mieć wystarczający współczynnik kontrastu kolorów.

Kontrola 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ę
• 🛑 Pola wyboru w układance są niedostępne dla czytników ekranu
• 🛑 Czytnik ekranu nie odczytuje wartości suwaków
• 🛑 Czytnik ekranu skupiony na selektorze kolorów zamyka okno
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane.
• 🛑 Tryb wysokiego kontrastu nie jest włączony

6. Używanie semantycznego kodu HTML

Natywne elementy HTML rejestrują szereg standardowych wzorców interakcji, które są ważne z punktu widzenia ułatwień dostępu. Akapit może mieć styl span, a element div może mieć styl button, ale semantyczny element HTML zapewnia, że czytniki ekranu i nawigacja za pomocą klawiatury rozumieją interakcje i elementy sterujące w kodzie HTML.

Podczas tworzenia komponentów Angular w miarę możliwości należy ponownie używać tych elementów natywnych zamiast ponownie implementować dobrze obsługiwane zachowania. Dzięki temu strona ma dobrą strukturę i naturalny układ treści, a karta jest uporządkowana w logicznej kolejności, co ułatwia użytkownikom poruszanie się po witrynie przy użyciu klawiatury.

Pod koniec tej sekcji Twoja aplikacja przejdzie następującą kontrolę:

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

Wszystkie te kroki znajdziesz w komentarzach: TODO: #6. Use Semantic HTML.

Identyfikowanie problemu

1. Włącz funkcję VoiceOver.
2. Za pomocą kart przejdź do karty Nasza historia.
3. Zwróć uwagę, że kolejność kart nie jest sekwencyjna.
4. Kliknij Kup.
5. Przycisk nie jest rozpoznawany jako przycisk.

Zmienianie elementu <div> na element <button>

Zastąp niestandardowy tag <div> przyciskiem w stylu Material Design:

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, aby używać semantycznego HTML i zastosować styl za pomocą typografii Angular Material:

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>

Weryfikowanie zmian

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

Kontrola ułatwień dostępu:

• ✅ Wszystkie strony mają unikalne tytuły
• ✅ Kolory mają wystarczający współczynnik kontrastu
• ✅ Semantyczny kod HTML zapewnia interakcję logiczną
• 🛑 Pola wyboru zagnieżdżonych nie są dostępne dla czytników ekranu
• 🛑 Czytnik ekranu nie odczytuje wartości suwaków
• 🛑 Czytnik ekranu skupiony na selektorze kolorów zamyka okno
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane.
• 🛑 Tryb wysokiego kontrastu nie jest włączony

7. Tworzenie elementów sterujących do wyboru za pomocą 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. Zastanów się nad podelementami menu lub wbudowanymi polami wyboru. Jak poinformować użytkownika, że może wybrać podgrupę opcji lub przejść do nadrzędnego elementu menu?

W Angular uprość menu i elementy sterujące, 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.

Pod koniec tej sekcji Twoja aplikacja powinna przejść następującą kontrolę:

• 🛑 Pola wyboru w układance są niedostępne 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 funkcję VoiceOver.
2. Wybierz różne smaki nadzienia.
3. Pamiętaj, że pola wyboru dotyczące rodziców nie określają, czy dzieci są uwzględniane w przypadku odczytania przez lektora. Skąd wiesz, że pole Wegańskie jest odznaczone, mimo że nie jest zaznaczone pole Bok Choy?

A11y w Angular Material

Zastępujesz pole wyboru semantycznego polem wyboru Angular Material, które zawiera wbudowaną wiedzę o tym wzorze interakcji. Pamiętaj, że zastąpienie komponentów komponentami Material nie gwarantuje dostępności. Podobnie jak w przypadku innych komponentów, musisz przetestować je ręcznie, ponieważ istnieje wiele sposobów implementacji interfejsu Material Design w niedostępny sposób.

Zastępowanie pól wyboru polami wyboru w stylu Material

1. Najpierw dodaj nową listę nadzienia i zmienną do przechowywania wybranych smaków nadzienia:

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>

Komentarze TODO wskazują też, gdzie możesz usunąć nieużywane elementy Sass w src/app/shop/shop.component.scss, aby uporządkować stylizację.

Zweryfikuj zmiany

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

Kontrola 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 suwaka
• 🛑 Czytnik ekranu skupiony na selektorze kolorów zamyka okno
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane.
• 🛑 Tryb wysokiego kontrastu nie jest włączony

8. Dodawanie etykiet elementów sterujących za pomocą ARIA

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

Specyfikacja Accessible Rich Internet Applications Specification (WAI-ARIA) organizacji Web Accessibility Initiative (WAI-ARIA) pomaga rozwiązać problemy, których nie można rozwiązać za pomocą natywnego kodu HTML. Umożliwia określenie atrybutów, które modyfikują sposób przekształcania elementu w drzewo ułatwień dostępu.

Pod koniec tej sekcji Twoja aplikacja powinna przejść następującą kontrolę:

• 🛑 Czytnik ekranu nie odczytuje wartości suwaka

Wszystkie te kroki znajdziesz w komentarzach: TODO: #8. Provide control labels with ARIA.

Identyfikowanie problemu

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

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

Używanie atrybutów ARIA

Kontrola etykiety za pomocą elementów aria-label–<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ź zmiany. Teraz możesz przesunąć suwak.

Kontrola 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 używa atrybutów ARIA do wyświetlania etykiety
• 🛑 zaznaczenie w czytniku ekranu w selektorze kolorów zamyka okno dialogowe
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane.
• 🛑 Tryb wysokiego kontrastu jest wyłączony

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

Do tej pory do rozwiązywania typowych problemów z a11y służyły Ci wbudowane narzędzia Angular. Przyjrzyjmy się teraz modułowi a11y w CDK i sposobowi, w jaki może on pomóc w rozwiązywaniu bardziej skomplikowanych problemów związanych z Angular.

Pod koniec tej sekcji będziesz kontynuować szkolenie, poznając narzędzia modułu a11y w Angular.

Te czynności znajdziesz pod komentarzem: TODO: #9. Add the power of @angular/cdk/a11y.

Importowanie modułu

Dodawanie modułu do aplikacji:

src/app/app.module.ts

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

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

Co robi '@angular/cdk/a11y'?

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

W kolejnych sekcjach dodasz 3 popularne usługi: FocusTrap, LiveAnnouncer i HighContrast.

Więcej informacji o wszystkich innych usługach oferowanych przez @angular/cdk/a11y znajdziesz w sekcji Ułatwienia dostępu.

10. Sterowanie ostrością za pomocą FocusTrap

Gdy otwarte jest okno dialogowe lub modalne, użytkownik może wchodzić w interakcje tylko w jego obrębie. Jeśli fokus wyjdzie poza okno dialogowe, miesza to konteksty i tworzy stan, w którym użytkownik nie wie, gdzie znajduje się na stronie.

W Angular dyrektywa cdkTrapFocus przechwytuje tab-fokus klawiszowy w elemencie. Ma ona na celu ułatwienie korzystania z komponentów takich jak modalne okna dialogowe, w których należy ograniczyć obszar skupienia.

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

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

Te czynności znajdziesz w komentarzach: 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 funkcję 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

cdkFocusTrap można użyć do przechwycenia i sterowania kolejnością skupienia w komponentach niestandardowych. Użycie mat-dialog-content wystarczy, aby rozwiązać większość problemów, ponieważ skupia ono uwagę w oknie dialogowym. Dodaj atrybut cdkFocusInitial, aby zdefiniować początkowy obszar fokusu w kolorze <mat-selection-list> opakowania na pierożki w oknie selektora 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 używa atrybutów ARIA do wyświetlania etykiety
• ✅ Selektor kolorów ma prawidłowe uwydatnianie ostrości
• 🛑 Zmiany, błędy i powiadomienia nie są ogłaszane.
• 🛑 Tryb wysokiego kontrastu jest wyłą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, a w tym czasie pojawia się błąd uniemożliwiający przesłanie formularza. To frustrujące.

LiveAnnouncer służy do ogłaszania wiadomości dla użytkowników czytników ekranu za pomocą regionu aria-live, aby zapewnić czytnikom ekranu powiadomienia o aktualizacjach i zmianach na stronie na żywo. Więcej informacji o regionach aria-live znajdziesz w specyfikacji WAI-ARIA W3C. W Angular wywołanie interfejsu LiveAnnouncer jako usługi jest łatwiejsze do przetestowania niż atrybuty aria-live.

Pod koniec tej sekcji Twoja aplikacja powinna przejść następującą kontrolę:

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

Te czynności znajdziesz w komentarzach: 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 funkcję VoiceOver.
2. Użyj nawigacji za pomocą kart, aby zmienić kolor i dokonać fałszywego zakupu.
3. Pamiętaj, że po zamknięciu okna nie ma informacji o tym, jaki kolor został wybrany, a zakup nie jest odczytany.

Dodawanie LiveAnnouncer do kodu

Dodaj moduł LiveAnnouncer i ogłosz wybór koloru oraz fałszywy zakup jako ciąg znaków. W rzeczywistej implementacji może ono być odczytywane, gdy przechodzisz do systemu płatności innej firmy lub w przypadku błędów w formularzu.

1. Dodaj ogłoszenie, które będzie wyświetlane 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. Dodaj komunikat, który będzie wyświetlany, gdy ktoś dokona 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);
  }
}

Weryfikowanie zmian

Ponownie włącz czytnik ekranu i sprawdź zmiany. Otrzymasz powiadomienie 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 używa atrybutów ARIA do wyświetlania etykiety
• ✅ Selektor kolorów ma prawidłowe uwydatnianie ostrości
• ✅ Ogłoszenie zmian, błędów i powiadomień
• 🛑 Tryb wysokiego kontrastu jest wyłą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 przypadku Angulara musisz uwzględniać w aplikacji preferencje użytkownika.

HighContrastModeDetector pozwala określić, czy przeglądarka jest obecnie w trybie wysokiego kontrastu.

Tryb ten jest obsługiwany przez przeglądarki Internet Explorer, Microsoft Edge i Firefox. Google Chrome nie obsługuje trybu wysokiego kontrastu w Windows. Ta usługa nie wykrywa trybu wysokiego kontrastu dodanego przez rozszerzenie przeglądarki Chrome High Contrast.

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

• 🛑 Tryb wysokiego kontrastu jest wyłączony

Te czynności znajdziesz w komentarzach: TODO: #12. Enable HighContrast mode.

Identyfikowanie problemu

Aby zidentyfikować ten problem, otwórz aplikację w Internet Explorer, Microsoft Edge lub Firefox, włącz tryb wysokiego kontrastu i obserwuj brak zmian:

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 pliku styles.scss użyj mixina cdk-high-contrast, który znajduje się w pliku @angular/cdk/a11y, aby dodać obrys do 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);
    }
  }
}

Weryfikowanie zmian

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

Kontrola 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 używa atrybutów ARIA do wyświetlania 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! Rozwiązałeś typowe problemy z dostępnością 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ą Angulara i Firebase
• Znajdowanie i naprawianie tekstu o niskim kontraście za pomocą Narzędzi deweloperskich w Chrome

Przeczytaj te materiały:

• Angular.io
• Materiał Angular a11y
• Podstawy ułatwień dostępu
• https://web.dev/accessible/