Dostępność

GrapeVest celuje w zgodność z WCAG 2.2 na poziomie AA. Poniżej opisujemy, co to oznacza w praktyce i co już działa.

Klawiatura

Każdą funkcję da się obsłużyć bez myszy.

• Przejdź do treści — pierwszy Tab na każdej stronie (aplikacja, strona startowa, strony prawne) pokazuje link, który przenosi od razu do treści, z pominięciem nawigacji.

• Widoczny fokus — element wybrany klawiaturą ma wyraźny obrys w kolorze akcentu (pola formularzy: pierścień). Kliknięcie myszą obrysu nie rysuje.

• Zakładki (Pulpit, Analiza, Portfel): strzałki ← → przełączają zakładkę, Home i End skaczą na pierwszą i ostatnią. Fokus przechodzi razem z wyborem, więc czytnik ekranu od razu ogłasza nową zakładkę.

• Tabela pozycji (Portfel, moduł „Szczegóły inwestycji" na komputerze): nazwa pozycji jest przyciskiem — Tab do niej, Enter otwiera szczegóły.

• Wykres struktury portfela: każdy wycinek można wybrać Tab i Enter (albo spacją). Wycinek ma nazwę z udziałem i kwotą, np. „Obligacje: 60%, 60 000 zł".

• Okna i panele (szczegóły pozycji, wybór instrumentu, potwierdzenie dostępu partnera): po otwarciu fokus wchodzi do środka, Tab nie wychodzi poza okno, a po zamknięciu wraca tam, skąd okno otwarto. Escape zamyka panele, ale nie okno potwierdzenia dostępu do klucza — tę decyzję trzeba podjąć przyciskiem.

• Okno w oknie (np. wybór emoji nad panelem rodziny): klawiatura działa w najwyższym oknie — Tab nie ucieka do okna pod spodem, a Escape zamyka jedno okno naraz. Tak samo kalendarz w formularzu: Escape zamyka sam kalendarz, nie cały formularz.

• Kalendarz to okno z nazwą; po otwarciu fokus trafia na wybrany (albo dzisiejszy) dzień, a każdy dzień ma pełną nazwę z datą. Dzisiejszy i wybrany dzień są ogłaszane.

• Podpowiedzi tickera (dodawanie ETF/akcji): strzałki ↑ ↓ przesuwają podpowiedź, Enter ją wybiera, Escape zamyka listę.

• Wpis miesięczny: po „Dalej" i „Wstecz" fokus przechodzi na nagłówek nowego kroku, więc czytnik od razu go ogłasza.

• Kreatory (start, import z domu maklerskiego, dodawanie konta, edycja celu): po przejściu do kolejnego kroku fokus trafia na nagłówek nowego widoku, więc klawiatura i czytnik ekranu nie „gubią się" po zniknięciu przycisku.

• Tytuł karty przeglądarki nazywa bieżący ekran („Portfel · GrapeVest").

Czytniki ekranu

• Język strony podąża za językiem aplikacji (PL, EN, DE), więc czytnik czyta teksty z właściwą wymową.
• Błędy formularzy są ogłaszane od razu i wskazują pole, którego dotyczą (np. złe hasło przy potwierdzaniu, brak nazwy celu). Potwierdzenie zapisu miesiąca jest ogłaszane jako komunikat stanu — tak samo wynik importu z domu maklerskiego, wczytywanie pliku, błędy kopii zapasowej i edycji pozycji oraz komunikaty na stronach logowania i zapisu do bety.
• Pola formularzy mają etykiety, nie tylko podpowiedź w środku pola.
• Wykres przychodów i wydatków ma ukrytą tabelę z kwotami dla każdego miesiąca — te same dane, które słupki pokazują wizualnie.
• Zmiana wartości nigdy nie jest oznaczana samym kolorem: zawsze towarzyszy jej znak (+/−) albo strzałka.

Formularze i walidacja

• Liczby w polach wyglądają tak, jak je piszesz: z przecinkiem dziesiętnym (w języku angielskim — z kropką), bez technicznych końcówek w rodzaju „6.890000000000001".

• Pola kwot przyjmują tylko liczby: cyfry, przecinek lub kropkę i spacje. Litery, „zł" i inne znaki po prostu się nie wpisują (także przy wklejaniu). Minus da się wpisać tylko tam, gdzie wartość może być ujemna (założona inflacja przy obligacjach).

• Błąd widać przy polu: po wyjściu z pola z niepoprawną wartością ramka robi się czerwona, a pod polem pojawia się komunikat (np. „Podaj liczbę", „Maksymalnie 100" przy procentach). Czytnik ekranu ogłasza go od razu, a komunikat znika, gdy wartość jest poprawna.

• Pola wymagane (np. nazwa aktywa lub własnej pozycji) pokazują „To pole jest wymagane", gdy zostaną puste.

• Zapis z błędem jest blokowany: formularz wpisu, pozycji, aktywa i celu nie zapisze niepoprawnej wartości — pokazuje, co poprawić.

• Każde pole ma widoczną etykietę nad sobą — także nazwa i źródło celu, ilość i cena w transakcji krypto oraz hasło przy usuwaniu konta. Podpowiedź w polu (np. „np. Wakacje") jest tylko przykładem i znika przy pisaniu.

• Kalendarz (termin celu, data zakupu obligacji, data urodzenia) nie zamyka się, gdy klikasz w jego nagłówek albo puste miejsce w oknie.

• Usuwanie konta: po kliknięciu „Usuń konto" kursor trafia od razu w pole hasła, a po „Anuluj" wraca na przycisk.

• Potwierdzenia (wyczyść plan, wczytaj przykład, usuń pozycję): fokus trafia na tekst ostrzeżenia — nie na czerwony przycisk, więc Enter niczego nie skasuje — a po „Anuluj" wraca na przycisk. Po zapisie pozycji w Portfelu fokus wraca na jej nagłówek.

Kontrast

• Kolory stanu (na kursie / wymaga uwagi / problem: znaczniki rytuału, wynik zdrowia, paski postępu) biorą odcienie z motywu, więc w jasnym i ciemnym mają osobno dobrany kontrast. Przyciski ostrzegawcze z białym tekstem mają ciemniejszy bursztyn (≥ 4,5:1). Tekst ma co najmniej 4,5:1 względem tła — w jasnym i w ciemnym motywie.

Kolor nie ocenia. Zieleń i czerwień oznaczają wyłącznie wzrost i spadek wartości (zysk, zmiana miesiąca). Dług ma zwykły kolor tekstu i minus, wynik zdrowia i jego składowe są w jednym kolorze akcentu (stan opisuje słowo), a ostrzeżenia — przekroczony budżet, ambitny termin celu, ujemne koszty życia — są bursztynowe, bez czerwonego alarmu.

• Komunikaty (ostrzeżenie, błąd, potwierdzenie) mają jeden wspólny zestaw kolorów sprawdzony pod kątem kontrastu w obu motywach — każde okno i formularz wygląda tak samo.

• Najmniejszy tekst w aplikacji ma 11 px (plakietki, osie wykresów, etykiety); wcześniej część plakietek i podpisów miała 9–10 px. Zakładki ekranów mają rozmiar zwykłej treści (14 px).

• Drobny tekst (do 12 px) nigdy nie jest półprzezroczysty — także na fioletowej karcie wartości netto. Ważniejsze od mniej ważnego odróżnia grubość i rozmiar, nie przygaszony kolor.

• Drobne plakietki też trzymają 4,5:1: „auto" przy rozpoznawanych brokerach, licznik powiadomień i przycisk „Odśwież" przy nowej wersji aplikacji.

• Szare metadane (daty, podpisy, etykiety) są w jasnym motywie nieco ciemniejsze niż standardowa paleta, żeby dało się je czytać także na telefonie w świetle dziennym.

• Kolory zysku, straty i ostrzeżeń dobierają odcień do motywu: ciemniejszy zielony, czerwony i bursztynowy na jasnym tle, jaśniejsze na ciemnym.

• Na fioletowej karcie wartości netto i na przyciskach biały tekst stoi na ciemniejszej części fioletu, a podpisy nie są już przygaszone.

• Fioletowe linki, akcje tekstowe i aktywna pozycja nawigacji mają w ciemnym motywie jaśniejszy odcień, a jasne podkładki (np. plakietki IKE/IKZE) mają ciemne odpowiedniki — nic nie świeci jasną plamą na ciemnym tle.

Wartości kolorów sprawdza automatyczny test, więc zmiana palety, która obniżyłaby kontrast poniżej progu, nie przejdzie.

Telefon i tablet

• Małe przyciski-teksty („Skąd ten wynik?", „Jak liczymy zwrot?", „Odśwież" kursy, pokaż hasło) mają obszar dotyku co najmniej 44 px, choć wyglądają na mniejsze; zmiana wartości w Portfelu ma 24 px, bo tuż nad nią jest inny przycisk.
• Historia miesięcy na wąskim telefonie (< 390 px) pokazuje przychód, odłożone i koszty życia w wierszach „etykieta — kwota", a nazwa miesiąca się nie łamie.
• Pola formularzy mają czcionkę 16 px, więc iPhone nie powiększa ekranu przy każdym kliknięciu w pole (np. we wpisie miesięcznym).
• Małe przyciski (np. „Dziś" w kalendarzu, „+ transakcja", usuwanie transakcji, filtry, „Wyjdź" z trybu demo, przyciski komunikatu o nowej wersji, przełącznik listy/wykresu w historii) mają obszar dotyku co najmniej 44 × 44 px, nawet jeśli wyglądają na mniejsze. Próbki koloru kategorii mają 36 px.
• Dolna krawędź ekranu: w trybie demo treść kończy się nad paskiem „Tryb demo", a komunikat o nowej wersji pojawia się nad nim, nie pod nim.
• Wybór konta lub aktywa otwiera się nad całą stroną; przewijanie listy nie przesuwa strony pod spodem.
• Kredyt we wpisie miesięcznym: na wąskim telefonie pola raty i nadpłaty przechodzą pod nazwę kredytu, zamiast ściskać ją do zera.
• Bardzo duże kwoty wartości netto dostają mniejszy krok czcionki zamiast ucięcia. Opis kapitału własnego przy kredycie zawija się, więc kwota kredytu jest zawsze widoczna.
• Tabela pozycji na komputerze przewija się w poziomie, gdy brakuje miejsca, zamiast ucinać kolumny.
• Tablet (od 768 px) dostaje szerszą kolumnę treści zamiast wąskiego paska telefonu na środku ekranu; przyciski w prawym górnym rogu (ustawienia, zaproszenie partnera, powiadomienia) trzymają się tej kolumny.
• Panele boczne mają nagłówek z przyciskiem zamknięcia, który nie przewija się razem z treścią. Okno wyboru instrumentu ma własny przycisk ✕.

Ruch

Animacje są krótkie i pokazują, co się zmieniło (panel wjeżdża z boku, pasek postępu się wypełnia). Jeśli w systemie włączysz „Ogranicz ruch":

• nic się nie przesuwa ani nie skaluje, a animacje w pętli (np. tło strony startowej) zatrzymują się,
• panele i karty pojawiają się krótkim przenikaniem, więc nadal widać, że coś się otworzyło,
• przewijanie do miejsca na stronie jest natychmiastowe.
• animacja otwarcia (kiść winogron) zmienia się w krótkie przenikanie.

Przewijany pasek logotypów brokerów na stronie startowej zatrzymasz przyciskiem „Zatrzymaj animację" pod paskiem; staje też sam, gdy najedziesz na niego kursorem albo przejdziesz do niego klawiaturą.

Paski postępu i słupki wykresów wypełniają się bez przeliczania układu strony, więc animacja nie przycina telefonu.

Motyw

Motyw (jasny, ciemny lub systemowy) jest ustawiany, zanim strona się narysuje — nie ma błysku jasnego ekranu przy starcie w ciemnym motywie. Pasek przeglądarki i aplikacji na telefonie przyjmuje kolor tła aplikacji w wybranym motywie.

Ustawienie nie wymaga żadnej zmiany polityki bezpieczeństwa treści (CSP): skrypt motywu dostaje ten sam jednorazowy nonce, co reszta skryptów strony, i niczego nie wysyła — czyta tylko preferencje zapisane na urządzeniu.