11.7 (User preferences - STN EN 301 549) Vybraná voľba v kartách s prepínačmi nie je v kontrastnej téme rozlíšiteľná

Porušenie sa týka celého webového sídla.

Popis problému:

V kartách s prepínačmi (komponenta shared/_radio_button_card, napríklad „Podpísať dokument“ / „Poslať na podpis“) je vybraný stav vyjadrený iba farbou pozadia: vnútorný bod krúžku je <div class="… bg-blue-500 rounded-full">, karta dostane pozadie bg-blue-50 a modré orámovanie. V režime vynútených farieb (Windows – kontrastné témy, CSS forced-colors: active) prehliadač farby pozadia aj orámovania nahradí systémovými farbami, bod v krúžku zmizne a vybraná karta vyzerá rovnako ako nevybraná. Natívny prepínač, ktorý by stav zobrazil, je skrytý triedou sr-only.

Dopad:

Používatelia režimu vysokého kontrastu (slabozrakí používatelia a používatelia s fotosenzitivitou alebo migrénou, ktorí si nastavujú vlastné farby) nevidia, ktorá možnosť je zvolená, a môžu pokračovať v podpisovaní s inou voľbou, než predpokladajú — napríklad s nesprávnym typom podpisu alebo občianskeho preukazu.

Závažnosť: vysoká — používateľ nevie overiť svoje rozhodnutie pred podpisom.

Efektívne riešenie:

Pre splnenie požiadavky je potrebné vybraný stav zobraziť spôsobom, ktorý režim vynútených farieb zachová. Najjednoduchšie je ponechať natívny prepínač viditeľný (bez sr-only) a štýlovať ho cez accent-color. Alternatívne je možné pre režim vynútených farieb doplniť pravidlo, ktoré bod vykreslí systémovou farbou:

@media (forced-colors: active) {
  .group:has(:checked) .radio-dot { background-color: Highlight; forced-color-adjust: none; }
  .group:has(:checked) { outline: 3px solid Highlight; }
}

Nad rámec požiadavky odporúčame rovnaký prístup uplatniť aj pri komponente shared/_checkbox_card (rozšírené nastavenia PAdES).