11.7 (User preferences - STN EN 301 549) Aktuálna položka navigácie nie je v kontrastnej téme nijako odlíšená

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

Popis problému:

V bežnom zobrazení je položka hlavnej navigácie, ktorá zodpovedá aktuálnej stránke, odlíšená modrou farbou textu a svetlomodrým pozadím (šablóna shared/_left_menu_item: text-blue-700 bg-blue-50 pre aktuálnu položku, text-gray-700 pre ostatné). V režime vynútených farieb (Windows – kontrastné témy, CSS forced-colors: active) prehliadač obe farby nahradí systémovými farbami a rozdiel úplne zmizne. Overili sme to porovnaním vypočítaných štýlov aktuálnej a susednej položky v bočnom paneli (stránky „O portáli“ a „Domov“): v kontrastnej téme majú obe položky rovnakú farbu textu, rovnaké pozadie stránky, rovnakú hrúbku písma (600) a žiadne orámovanie, podčiarknutie ani iný indikátor. Aktuálna položka nemá ani atribút aria-current. V mobilnej ponuke zostane iba rozdiel v hrúbke písma (aktuálna položka 600, ostatné 400), ktorý je pri bežnej veľkosti textu ťažko postrehnuteľný.

Zistenie dopĺňa GitHub issue #307 (chýbajúci aria-current) a #308 (odlíšenie iba farbou): v kontrastnej téme indikátor nezmizne iba čiastočne, ale úplne.

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 v navigácii, na ktorej stránke sa nachádzajú. V procese podpisovania, kde sa medzi stránkami „Dokumenty“, „Balíky“ a „Prijaté na podpis“ často prechádza a stránky majú rovnaký názov „Autogram Portal“ (pozri samostatné zistenie k názvom stránok), tak strácajú orientáciu. Keďže chýba aj aria-current, rovnakú informáciu nedostanú ani používatelia čítačov obrazovky, ktorí kontrastnú tému často kombinujú so zväčšením alebo s hlasovým výstupom.

Závažnosť: vysoká — informácia o aktuálnej polohe, ktorú vidiaci používateľ dostáva na každej stránke, sa v kontrastnej téme stráca úplne.

Efektívne riešenie:

Pre splnenie požiadavky je potrebné aktuálnu položku označiť atribútom aria-current="page" a odlíšiť ju aj prostriedkom, ktorý režim vynútených farieb zachová — napríklad zvislým pruhom (orámovaním) a podčiarknutím, ktoré prehliadač v kontrastnej téme vykreslí systémovou farbou. Štýl je vhodné naviazať priamo na atribút, aby vizuálny a programový stav nemohli byť v rozpore:

<%= link_to path, "aria-current": (current_page?(path) ? "page" : nil),
      class: "… border-l-4 border-transparent aria-[current=page]:border-blue-700 aria-[current=page]:text-blue-700 aria-[current=page]:bg-blue-50 aria-[current=page]:underline" do %>

@media (forced-colors: active) {
  nav a[aria-current="page"] { border-left: 4px solid Highlight; text-decoration: underline; }
}

Nad rámec požiadavky odporúčame rovnaký prístup použiť aj v mobilnej ponuke a v zozname jazykov, kde je aktuálny jazyk odlíšený iba hrúbkou písma a farbou.