System projektowy Dogmaty.pl

Element rozpoznawczy serwisu. Wariant pełny oznacza twierdzenie wiążące, wariant obrysowany — słabszy stopień pewności lub metrykę dokumentu. Odsyłacz w treści zachowuje kolor tekstu, podkreślenie jest czerwone.

Poniżej pełny przykład pozycjonowania: każdy akapit kolumny tekstu ma swój odpowiednik w metryce bocznej, wyrównany do pierwszej linii akapitu. Powiązanie jest jawne — akapit wskazuje znacznik przez aria-describedby, a znacznik niesie ukryty prefiks „Status twierdzenia” oraz notę rozwijającą skrót.

Reguły dostępności

• Znacznik ma role="note" — czytnik ogłasza go jako komentarz metryki, nie jako przycisk.
• Sam kolor nigdy nie niesie znaczenia (WCAG 1.4.1) — status jest zawsze zapisany słowem, a wariant obrysowany dodatkowo różni się krawędzią.
• Kontrast etykiet ≥ 7:1 względem tła (WCAG 1.4.6 AAA), rozmiar 13px z tracking 0.08em dla czytelności wersalików.
• Poniżej 1280px metryka wsuwa się pod akapit, ale kolejność w DOM pozostaje ta sama, więc porządek odczytu i porządek fokusu się nie rozjeżdżają (WCAG 1.3.2).

Kontrolki feedbacku (kopiowanie komendy, pobieranie pliku) korzystają ze wspólnego komponentu LiveStatusButton i hooka useClipboardCopy. Każdy przycisk ma powiązany region role="status" z aria-live="polite", aria-atomic="true" i aria-relevant="additions text", wskazywany przez aria-describedby tego samego przycisku. Dzięki temu czytnik ekranu ogłasza zarówno sukces („Skopiowano”), jak i porażkę („Nie udało się skopiować”) po każdej akcji.

Przykład: kopiowanie i pobieranie

Reguły dostępności

• Region live jest renderowany zawsze — także w stanie spoczynku — aby czytnik zarejestrował go przed pierwszą zmianą treści (WCAG 4.1.3).
• aria-describedby przycisku wskazuje dokładnie jeden region role="status"; identyfikatory są generowane przez useId() i nie kolidują między instancjami.
• Po porażce obu metod kopiowania (Clipboard API i execCommand) komunikat jasno sygnalizuje brak sukcesu, a nie ukrywa porażki (WCAG 3.3.1, 4.1.3).
• Targety dotyku ≥ 44×44px (min-h-11 min-w-11) i widoczny focus rubrykowy dla obsługi klawiaturą (WCAG 2.5.5, 2.4.7).

Regiony role="status" w serwisie spełniają jeden, sztywny kontrakt. Każdy z poniższych atrybutów jest obowiązkowy — usunięcie któregokolwiek psuje ogłaszanie zmian czytnikom ekranu.

role="status"

Region jawnych komunikatów stanu. Niesie treść powiadomienia („Skopiowano”, „Nie udało się skopiować”). Nie zastępuje komunikatu błędu formularza (role="alert") ani aria-live ustawić niezależnie.

aria-live="polite"

Ogłoszenia wstrzymywane do ciszy — nie przerywają bieżącej wypowiedzi czytnika. Odpowiednie dla feedbacku akcji, które nie są naglące.aria-live="assertive" byłoby tu błędem (prze- rywa mowę).

aria-atomic="true"

Czytnik ogłasza całą treść regionu, a nie tylko zmieniony fragment. Zapewnia, że przy zmianie etykiety z „Kopiuj” na „Skopiowano” słyszalny jest pełny komunikat, a nie resztki poprzedniego.

aria-relevant="additions text"

Ogranicza ogłaszanie do dodanego/zmienionego tekstu — pomija usunięcia i same zmiany węzłów. Sprawia, że przy resecie do etykiety spoczynkowej nie ogłaszana jest pustka.

aria-describedby → id regionu

Przycisk wyzwalający wskazuje swój region przez aria-describedby. Asystywne technologie kojarzą akcję z jej skutkiem. Identyfikatory generujeuseId() — są stabilne w obrębie instancji i nie kolidują między równoległymi panelami.

Procedura testowa — szybki remount

1. Otwórz tę stronę i włącz czytnik ekranu (NVDA/VoiceOver). Ustaw fokus klawiaturą na przycisk „Kopiuj komendę do schowka”.
2. Naciśnij Enter trzy-krotnie w krótkim odstępie (poniżej 1 s). Za każdym razem czytnik powinien ogłosić „Skopiowano” — osobno, bez scalania w jedno ani pomijania drugiego/trzeciego powtórzenia.
3. Przejdź do sekcji „Region live”, a następnie wróć (np. skokiem nagłówkówH2). Powtórz kliknięcie. Region ma pozostać powiązany z przyciskiem — aria-describedby wskazuje ten sam id po re-renderze, komunikat ogłoszony raz.
4. Symuluj remount: w narzędziach deweloperskich usuń węzeł przycisku i przywróć go (lub przełącz trasę tam i z powrotem). Po powrocie naciśnij przycisk — czytnik ogłasza „Skopiowano” dokładnie raz, aaria-describedby rozwiązuje się do istniejącego role="status".
5. Wymuś porażkę schowka (zakaz uprawnień w przeglądarce). Powtórz szybkie kliknięcia — czytnik ogłasza „Nie udało się skopiować” przy każdej próbie, a po timeoucie (4 s) wraca do etykiety spoczynkowej bez ogłaszania pustego stanu.

Automatyzacje te weryfikują tests/live-status-remount.test.ts,tests/live-status-race.test.ts i E2E e2e/multi-live-status.e2e.ts. Procedura powyżej jest ręcznym dublem dla czytników ekranu, których automatyzacja nie zastąpi.

Każda strona hasła układa się w trzy kolumny: margines krytyczny po lewej, kolumnę tekstu na środku oraz metryka boczna po prawej. Siatka odpowiada układowi wydania naukowego z metryką krytyczną — margines krytyczny (200px) mieści spis treści i okruszki, kolumna tekstu (680px) niesie właściwy artykuł, a metryka boczna (280px) zbiera znaczniki statusu, daty orzeczeń i odsyłacze do źródeł.

Rubryka — dosłownie „czerwony atrament” — w rękopisach oznaczała to, co wiążące. U nas czerwień znaczy status twierdzenia: de fide, sententia certa, opinia teologiczna. Nigdy nie pełni funkcji dekoracyjnej.

Kolumna tekstu

Miara linii utrzymana w przedziale 65–75 znaków, co przy 19px Literaty daje około 75 znaków na wiersz — górna granica czytelności zalecana przez typografów. Akapity nie są justowane, lewicowane do naturalnej nierówności krawędzi, co redukuje rzeki bieli i ułatwia śledzenie wiersza okiem. Interlinia 1,65 w trybie domyślnym, rozszerzana do 1,9 przez panel preferencji czytania.

Punkt załamania

Poniżej 1280px metryka boczna wplata się w treść, spis treści zwija się do bloku nad tekstem, poniżej 768px pozostaje jedna kolumna z marginesem 20px. Układ nigdy nie wymusza przewijania poziomego — kryterium WCAG 1.4.8.

• Promień zaokrągleń maksymalnie 2px, krawędzie ostre.
• Brak cieni i gradientów; separacja włoskowatą linią 1px, ink 12%.
• Przejścia wyłącznie opacity/transform, 150ms, z respektem dla reduced motion.
• Fonty self-hostowane przez @fontsource z font-display: swap.