Dostępność

Jak budujemy dla użytkowników klawiatury, czytników ekranu, osób niedowidzących i użytkowników z ograniczonym dostępem do technologii. Uczciwy, opatrzony datą zrzut.

Tę stronę piszemy tak samo jak resztę witryny: co działa, co nie działa i jak samodzielnie to sprawdzić. Jest opatrzona datą, bo dostępność to ruchomy cel. Ponownie testujemy po każdym ważnym wydaniu.

Formalne oświadczenie o dostępności

Docelowy standard

WCAG 2.2 AA w całym doświadczeniu. Traktowanie AAA w zakresie wyglądu fokusu (grube pierścienie o wysokim kontraście, niezasłonięte) oraz etykietowania formularzy + odtwarzania po błędach. Śledzone względem Zalecenia W3C, nie parafrazy.

Ostatni audyt wewnętrzny

2026-04-19. Ręczna kontrola przez nasz własny zespół strony głównej, print-size, centrum /standards/ + 9 stron autorytatywnych i 45 stron docelowych schematów płatności.

Audyt zewnętrzny

Zlecony, raport oczekuje. Publikacja po dostarczeniu pod /accessibility/audit/ z notatkami naprawczymi, niedociągnięcia niezmienione, bez selektywnej prezentacji.

Częstotliwość ponownych testów

Miesięczna wyrywkowa kontrola + pełna ręczna kontrola po każdej dużej zmianie UI. Automatyczne sprawdzenia (linting kontrastu, skanowanie nowych kryteriów WCAG 2.2) uruchamiane przy każdym wdrożeniu.

Kontakt + SLA

hello@abundera.ai, potwierdzamy raporty dostępności w ciągu 2 dni roboczych, klasyfikujemy w ciągu 5 i traktujemy blokery klawiatury / czytnika ekranu / poznawcze jako problemy priorytetowe (wysyłane przed pracą nad funkcjami).

Zgodność WCAG 2.2 AA według kryterium sukcesu

Nowe w wersji 2.2 kryteria, które aktywnie śledzimy. Status odzwierciedla to, co zweryfikowaliśmy wewnętrznie; audyt zewnętrzny to zastąpi.

Obsługa ruchu i wymuszonych kolorów

• prefers-reduced-motion: reduce, unoszenie się kuli otoczenia i przejścia zanikania są tłumione. Przejścia funkcjonalne pozostają krótkie. Zweryfikowano z macOS Reduce Motion i wyłączonymi animacjami w Windows.
• forced-colors: active (Tryb wysokiego kontrastu Windows), pierścienie fokusu używają systemowego koloru Highlight; obramowania dziedziczą systemowy CanvasText. Zweryfikowano w Edge na Windows 11 High Contrast.

Znane ograniczenia

• JAWS jeszcze nie przetestowany. Następna runda AT jest ukierunkowana na JAWS w Edge na Windows 11.
• Projektant wizytówek jest z założenia myszy-pierwszą dla podglądu przeciągnij-i-upuść. Każdy element sterujący ma alternatywę klawiaturową, ale pętla sprzężenia zwrotnego na żywo jest nadal wizualna.
• Zewnętrzny raport z audytu oczekuje. Status własnego poświadczenia w powyższej tabeli zostanie zastąpiony ustaleniami audytora po dostarczeniu raportu.
• Niektóre technologie wspomagające innych firm (Dragon NaturallySpeaking, Zamiana mowy na tekst na Androidzie) nie są w naszej macierzy regresji; przyjmujemy raporty społeczności i naprawiamy per zgłoszenie.

Dziennik zmian dostępności

• 2026-04-19 (PM), Naprawiono podwójne wyzwalanie regionu na żywo TalkBack: usunięto aria-live="polite" z wrappera #qr-preview; ogłoszenia teraz pochodzą tylko z odznaki skanowania role="status", raz na generację. Modal BCD: selekcje kolorów otrzymały właściwe powiązania <label for>; kontener siatki presetów otrzymał role="group" + aria-label. Tabele dostępności otrzymały <caption> + scope="col"/"row".
• 2026-04-19 (AM), Wskaźniki fokusu ulepszone (3 px + zapasowy box-shadow). Dodano obsługę forced-colors + prefers-reduced-motion. Audyt rozmiarów celu: powiększono .saved-profile-delete, .type-search-clear, .compat-toggle-btn do ≥ 28 px. Naprawiono pominięcie poziomu nagłówków (podnagłówki vCard/MECARD h4 → h3). Opublikowano formalne oświadczenie WCAG 2.2 AA + macierz AT.
• 2026-04-18, Udokumentowano ręczne przejście linii bazowej WCAG 2.2 AA. Pasek zaufania czterech filarów zwinięty dla czystszej hierarchii.
• 2026-03-08, Opublikowano początkową stronę /accessibility/.

Do czego się zobowiązujemy

• Pełna nawigacja klawiaturą. Każdy element sterujący generatora, każdy modal i każdy przepływ eksportu jest dostępny bez myszy.
• Widoczne stany fokusu. Sfokusowane pola, przyciski i linki pokazują wyraźny pierścień. Nie polegamy wyłącznie na kolorze.
• Etykiety na każdym polu. Pola formularzy mają powiązane elementy <label> lub atrybuty aria-label. Tekst zastępczy nigdy nie jest używany jako jedyna etykieta.
• Regiony ARIA na żywo dla podglądu QR i powiadomień. Czytniki ekranu słyszą "QR wygenerowano" i wiadomości powiadomień, gdy się pojawiają.
• Alternatywy tekstowe dla przycisków tylko z ikoną. aria-label na każdym przycisku tylko SVG.
• Znaczenie statusu niezależne od koloru. Odznaki skanowalności i chipy kompatybilności łączą kolor z glifem i etykietą tekstową.
• Jawne nazwy formatów eksportu. Przyciski pobierania mówią "Pobierz PNG", "Pobierz SVG" itp., a nie tylko "Pobierz".
• Duże mobilne cele dotykowe. Elementy interaktywne mają co najmniej 44 × 44 piksele CSS na grubych wskaźnikach, zgodnie z WCAG 2.5.8.
• Szanowanie zmniejszonego ruchu. Przejścia są wyłączone przy prefers-reduced-motion: reduce.

Gdzie jeszcze nie dorównujemy

• JAWS jeszcze nie przetestowany. Licencja JAWS zakupiona, miejsce testera zarezerwowane na następną rundę AT. Wszystkie inne główne (VoiceOver macOS + iOS, NVDA, Narrator, TalkBack) przeszły najnowszą regresję.
• Projektant wizytówek jest z założenia ciężki od myszy (przeciągnij-i-upuść, podgląd canvas). Alternatywy klawiaturowe istnieją dla każdego elementu sterującego, ale pętla sprzężenia zwrotnego podglądu na żywo jest nadal wizualna. Elementy sterujące kolorami używają teraz właściwych powiązań <label for> + role="group" na wybieraku presetów (2026-04-19).
• Złożone przepływy generatora (partia CSV, wieloetapowy kreator) mogą mieć lepszą strukturę linków pomijania. Zaplanowane.
• Opisowe podsumowania tabel. Tabele dostępności + kompatybilności mają teraz atrybuty <caption> + scope (2026-04-19). Dłuższe narracyjne podsumowania na poziomie wiersza dla każdego wiersza są jeszcze planowane.

Macierz wsparcia technologii wspomagających

Artefakt inżynieryjny, nie oświadczenie PR. Każdy wiersz to prawdziwa kombinacja przeglądarka + AT + platforma, na której fizycznie pracowaliśmy. Status odzwierciedla najnowsze ręczne przejście; zastrzeżenia zapisują wszystko, co nadal blokuje pełne przejście.

Częstotliwość wydań: macierz uruchamiana ponownie przy każdej dużej zmianie UI. "Zaliczone" = brak blokera; zastrzeżenia to kosmetyczne lub wąskozakresowe regresje w kolejce na następne wydanie. "Nie przetestowano" = nie uruchomiliśmy jeszcze tej kombinacji fizycznie, mówimy o tym zamiast pomijać.

Mapa klawiatury

• Tab / Shift+Tab: przesuwanie do przodu / do tyłu przez elementy z możliwością fokusu.
• Enter / Spacja: aktywacja przycisków i przełączników.
• Klawisze strzałek: przesuwanie między opcjami w grupie radiowej (selektor typu, wybierak szablonu, pasek kart).
• Escape: zamknięcie modali (Projektant wizytówek, preflight, usługi drukowania, kadrowanie obrazu).
• Home / End w menu przepełnienia do przeskoku do pierwszego / ostatniego elementu.

Audyt wewnętrzny, 2026-04-19

Ręczne przejście WCAG 2.2 AA przez stronę główną, /print-size/, nowe centrum /standards/ + 9 stron autorytatywnych i 45 stron docelowych schematów płatności (dziedziczących z szablonu wspólnego). Co zweryfikowaliśmy, co naprawiliśmy i co jest otwarte:

Zweryfikowane jako zaliczone

• Cel linku pomijania istnieje, link pomijania (href="#generator") prowadzi do widocznego elementu na każdym wariancie strony.
• Style fokus-widoczny, :focus-visible zadeklarowane globalnie z konturem 2px, plus przesłonięcia dla każdego pola z kolorową ramką + cieniem. Potwierdzone audytem CSS w wierszach 34 i 88 site/css/style.c17bfd85.css.
• Wszystkie pola formularzy mają etykiety, każde <input> / <select> / <textarea> w generatorze ma wyraźne <label for="..."> lub owijający <label>. Tekst zastępczy jako etykieta nie jest używany nigdzie.
• Przyciski mają dostępne nazwy, każdy <button> ma treść tekstową lub aria-label. Przyciski tylko SVG (hamburger, udostępnij, zainstaluj) niosą aria-label.
• Dekoracyjne SVG oznaczone jako ukryte, aria-hidden="true" na każdej dekoracyjnej ikonie, aby czytniki ekranu je pomijały zamiast ogłaszać ich geometrię.
• Poprawne role ARIA, role="radiogroup" na selektorze typu z role="radio" + aria-checked na każdej opcji; role="tablist" / role="tab" + aria-selected na kartach panelu.
• Kontrast tekstu, tekst podstawowy to #f5f5f5 na #08090a (≈ 17:1, WCAG AAA). Przytłumiony tekst #a3a3a3 na tym samym tle to ≈ 8:1 (powyżej AAA 7:1).
• Przełącznik języka ma aria-label="Language" mimo że widoczna etykieta jest domyślna.

Naprawione w tym przejściu

• Pominięcie poziomu nagłówka, trzy podnagłówki w sekcjach dodatkowych pól vCard / MECARD były <h4> pod <h2> bez pośredniego <h3>. Narzędzia konspektu czytnika ekranu oznaczyły to jako "pominięty poziom". Zmieniono na <h3>, aby konspekt czytał h1 → h2 → h3 → h3 czysto.

Znane ograniczenia

• Pełne skanowanie Axe / NVDA / VoiceOver wymaga przeglądarki + AT, których nie możemy uruchomić z potoku budowania. Miesięczne ręczne przejście oparte na przeglądarce zaplanowane.
• Niezależny audyt stron trzecich jest zlecony (patrz zastępnik /accessibility/audit/). Raport zostanie opublikowany po dostarczeniu nawet jeśli zawiera ustalenia.
• Skrót klawiszowy "/" dla palety poleceń stanowi niewielkie ryzyko kolizji na stronach z polami wyszukiwania. Używamy preventDefault() tylko gdy fokus jest poza polem; udokumentowane, ale nie audytowane z AT.

Zgłoś problem

Jeśli coś jest nieosiągalne klawiaturą, błędnie oznakowane lub w inny sposób nieużyteczne z Twoim ustawieniem, wyślij e-mail na hello@abundera.ai. Podaj swoją przeglądarkę, system operacyjny, AT i konkretny przepływ. Traktujemy błędy dostępności jako problemy priorytetowe.

Ostatni przegląd: 2026-04-19. Następny przegląd: po następnej dużej zmianie UI.