Accesibilitate Angular: Detectarea Screen Reader-ului pe Mobil

În dezvoltarea aplicațiilor moderne, accesibilitatea nu este doar o recomandare, ci o necesitate. Pentru proiectul nostru, radio-babilon, am realizat că utilizatorii care depind de un screen reader (TalkBack pe Android sau VoiceOver pe iOS) au nevoie de o experiență adaptată. Dar cum știm în Angular dacă aceștia au activat funcția de accesibilitate?

Arhitectura Angular și bridge-ul nativ

Angular, fiind un framework bazat pe web, rulează într-un WebView (prin Capacitor sau Cordova). Deși Angular oferă unelte excelente pentru accesibilitatea DOM-ului, el nu are acces direct la API-urile de sistem ale telefonului. Aici intervine bridge-ul nativ. Pentru a comunica cu Android sau iOS, trebuie să scriem un plugin care expune metode native către JavaScript.

Crearea plugin-ului nativ

Pentru a detecta statusul screen reader-ului, vom crea un plugin simplu. Acesta va interoga sistemul de operare și va trimite un eveniment către Angular ori de câte ori statusul se schimbă.

Implementarea pe Android (Java/Kotlin)

În Android, folosim AccessibilityManager pentru a verifica starea serviciilor.

val manager = context.getSystemService(Context.ACCESSIBILITY_SERVICE) as AccessibilityManager
val isEnabled = manager.isTouchExplorationEnabled

Implementarea pe iOS (Swift)

Pe iOS, avem acces la UIAccessibility.isVoiceOverRunning.

let isVoiceOverOn = UIAccessibility.isVoiceOverRunning

Integrarea în Angular

Odată ce avem plugin-ul configurat, creăm un serviciu în Angular care ascultă aceste schimbări. Arhitectura plugin-urilor ne permite să folosim Observable pentru a reacționa în timp real.

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

@Injectable({ providedIn: 'root' })
export class AccessibilityService {
  public isScreenReaderActive(): Promise<boolean> {
    return MyNativePlugin.checkStatus();
  }
}

De ce contează acest lucru pentru UX?

Când detectăm un screen reader, putem ajusta automat UI-ul. De exemplu, în radio-babilon, am ales să simplificăm navigarea și să mărim zonele de atingere (touch targets) dacă detectăm că utilizatorul are nevoie de asistență.

Exemplu de utilizare în componentă:

this.accessibilityService.isScreenReaderActive().then(active => {
  if (active) {
    this.applyHighContrastTheme();
  }
});

Provocări și bune practici

1. Nu bloca UI-ul: Apelurile native trebuie să fie asincrone pentru a nu îngheța thread-ul principal de UI în Angular.
2. Ascultă schimbările: Utilizatorii pot activa/dezactiva VoiceOver în timpul sesiunii. Folosește EventEmitter în plugin-ul nativ pentru a notifica Angular.
3. Testarea: Nu te baza doar pe emulator. Testează întotdeauna pe un dispozitiv fizic, deoarece comportamentul API-urilor de accesibilitate poate varia între versiunile de OS.

Implementarea acestui nivel de control ne permite să oferim o experiență incluzivă, asigurându-ne că radio-babilon este accesibil oricui, indiferent de modul în care interacționează cu ecranul.