NaviAble Panel

Dostępność cyfrowa · WCAG 2.2 AA

Strony urzędów.
Czytelne. Dla każdego.

NaviAble pobiera chaotyczny HTML publicznej strony, rozpoznaje jej kluczowe sekcje za pomocą AI i renderuje je w izolowanym, w pełni dostępnym widoku. Bez frameworków, bez wykluczania — nawigacja klawiaturą i czytnikiem ekranu działa od pierwszego uruchomienia.

Zobacz, jak to działa Kontrakt API
  • Vanilla JS wtyczki
  • Shadow DOM
  • Klucz LLM tylko na serwerze

Dlaczego to ma znaczenie

Dostępność nie może zależeć od jakości kodu strony

Publiczne serwisy często publikują treści w rozbudowanych, niespójnych szablonach. Seniorzy, osoby słabowidzące i użytkownicy czytników ekranu płacą za to czasem i frustracją.

Chaos informacyjny

Menu w pięciu miejscach, treść pomiędzy reklamami, brak logicznej hierarchii nagłówków. To, co dla jednych jest tłem, dla innych jest murem.

Bariery cyfrowe

Ukryty fokus, pułapki klawiaturowe, przyciski bez nazw dostępnych. Naprawianie tego w każdej gminie z osobna jest nieefektywne.

Powtarzalny koszt

Każdy remont strony to kolejny audyt i kolejne poprawki. NaviAble oddziela treść od niedostępnej prezentacji raz na zawsze.

Architektura

Od surowego HTML do dostępnego widoku w czterech krokach

  1. Pobranie strony

    Serwer pobiera HTML z zabezpieczeniem przed SSRF i liczy jego odcisk SHA-256.

  2. Mapowanie AI

    OpenRouter rozpoznaje header, nav, main i footer oraz stabilne selektory CSS.

  3. Kontrakt JSON

    Reguły są walidowane schematem i zapisywane w PostgreSQL (JSONB) z wersjonowaniem.

  4. Render w Shadow DOM

    Wtyczka pobiera JSON i buduje semantyczny szablon, odizolowany od stylów strony.

Dostępność

WCAG 2.2 AA jest wymogiem, nie dodatkiem

Szablon NaviAble powstaje z myślą o osobach, które korzystają z klawiatury, powiększenia i czytników ekranu. Nie „dorabiamy” dostępności po fakcie — ona wynika z konstrukcji.

Serwer dostarcza wyłącznie dane. Żadna treść ze strony źródłowej nie trafia do wykonania jako kod.

  • Semantyczny HTML5header, nav, main, article, footer z poprawnymi punktami orientacyjnymi.
  • Nawigacja klawiaturąWidoczny fokus 4 px z odstępem 2 px, bez pułapek fokusa.
  • Hierarchia nagłówkówDokładnie jedno h1 i logiczna kolejność h2–h6.
  • Kontrast AATekst i elementy interaktywne spełniają progi 4.5:1 i 3:1.
  • ARIA z umiaremTylko tam, gdzie natywny HTML nie wystarcza.
  • Preferencje użytkownikaWsparcie dla ograniczonego ruchu i powiększonego tekstu.

Kontrakt

Mapowanie to dane, nie kod

Wtyczka otrzymuje wyłącznie selektory CSS i nazwy pól. Ten sam format obsługuje każdą stronę, a serwer nigdy nie przesyła wykonywalnego JavaScriptu.

mapping.json 
{
  "header": {
    "selector": "header.site-header",
    "confidence": 0.95,
    "fields": {
      "title": { "selector": "h1", "attribute": "textContent" }
    }
  },
  "nav": {
    "selector": "nav[aria-label]",
    "confidence": 0.9,
    "fields": {
      "links": { "selector": "a", "attribute": "href", "multiple": true }
    }
  },
  "main": {
    "selector": "main",
    "confidence": 0.8,
    "fields": {
      "content": { "selector": "article", "multiple": true }
    }
  },
  "footer": null
}
terminal 
# 1. Zlecenie wygenerowania mapowania
curl -s -X POST https://naviable.example/api/v1/mappings/ \
  -H "Content-Type: application/json" \
  -d '{"domain": "gov.pl"}'

# 2. Odpytanie o gotowe mapowanie
curl -s https://naviable.example/api/v1/mappings/gov.pl/ \
  -H "Accept: application/json"

# 3. Odpowiedź: 200 + reguły JSON
#    404 - domena nieznana (wyślij POST)
#    409 - mapowanie w toku lub błąd

Zbudujmy dostępny internet publiczny

Wtyczka jest w przygotowaniu. Backend, API i panel administracyjny są już gotowe — możesz dodać pierwszą domenę i wygenerować mapowanie.

Przejdź do panelu Zapoznaj się z API