Responsivitate & accesibilitate

Majoritatea utilizatorilor Recash deschid platforma de pe telefon, nu de pe laptop — așa că layout-urile pornesc de la varianta mobilă. Headerul păstrează doar esențialul pe ecrane mici, iar ilustrațiile mari dispar sub o anumită lățime, ca să nu aglomereze spațiul.

Compatibilitate între browsere

Codul folosește CSS standard, fără proprietăți experimentale care ar funcționa doar pe un singur browser. Singura zonă cu stilizare specifică este scrollbar-ul, care are un fallback natural — pe un browser fără suport, revine la stilul implicit al sistemului, fără să afecteze experiența.

Accesibilitate

Aplicația este construită să fie folosită și de cineva care nu vede ecranul sau care navighează exclusiv de la tastatură, nu doar cu mouse-ul pe un ecran mare.

Etichete pentru cititoarele de ecran

Controalele care au doar o iconiță, fără text vizibil — butonul de închidere al unei ferestre, paginarea, comutatorul de limbă, indicatorul de activitate din header — poartă o etichetă descriptivă (aria-label), astfel încât un cititor de ecran anunță ce face butonul, nu doar „buton”. Iconițele pur decorative sunt marcate aria-hidden, ca să nu fie citite redundant, iar butoanele care comută o stare (limbă, monedă) folosesc aria-pressed pentru a spune care opțiune este activă. Meniurile care se deschid și se închid expun aria-expanded, deci starea lor este mereu clară. Elementele care transmit informație doar prin formă — de exemplu stelele unui rating — primesc o etichetă text echivalentă („Rating 4,5 din 5, din 12 recenzii”).

Navigare de la tastatură

Navigarea și acțiunile folosesc elemente native — butoane și linkuri, nu simple zone selectabile — deci funcționează implicit cu tastatura: Tab pentru a parcurge, Enter sau Space pentru a acționa. Fiecare element care primește focus arată un contur vizibil, verde, printr-o regulă globală :focus-visible: inelul apare doar la navigarea de la tastatură, nu și la clic cu mouse-ul, ca să nu deranjeze utilizatorii care oricum văd unde au dat clic.

Structură semantică și contrast

Conținutul folosește o structură semantică — titluri, liste, secțiuni și repere reale (header, main) — astfel încât un cititor de ecran poate sări direct la ce interesează. Toate imaginile au text alternativ, iar contrastul dintre text și fundal respectă pragurile recomandate, pe toate suprafețele.

Internaționalizare

Interfața Recash este disponibilă în două limbi — română și engleză — cu un comutator de limbă direct în aplicație. Toate textele interfeței trec printr-un sistem de traduceri centralizat, nu sunt scrise direct în componente, așa că adăugarea unei limbi noi înseamnă un singur fișier de traduceri în plus.

Același principiu se aplică și sumelor de bani: valorile pot fi afișate în RON sau EUR, în funcție de preferința utilizatorului, cu formatarea corectă pentru fiecare monedă.

Instalare ca aplicație

Recash este o aplicație web progresivă (PWA): deși rulează în browser, poate fi instalată pe dispozitiv exact ca o aplicație obișnuită. Browserul recunoaște asta printr-un manifest web care descrie aplicația — numele, culoarea temei, modul de afișare — și oferă opțiunea „Adaugă pe ecranul principal”, atât pe Android, cât și pe iOS.

Odată instalată, se deschide în mod standalone: fără bara și butoanele browserului, pe tot ecranul, cu propria iconiță pe ecranul principal și propriul nume — se comportă și arată ca o aplicație nativă, fără a fi nevoie de un magazin de aplicații sau de o descărcare separată.