1.4.10 Používateľská príručka pri šírke 320 CSS pixelov vyžaduje vodorovné posúvanie

URL: agp.dev.slovensko.digital/docs

Popis problému:

Pri šírke zobrazovacej oblasti 320 CSS pixelov (zodpovedá zväčšeniu na 400 % pri šírke okna 1 280 CSS pixelov) je obsah stránky „Používateľská príručka“ široký 386 CSS pixelov a stránka sa posúva aj vodorovne. Príčinou sú nezalomiteľné ukážky ciest API v elemente <code class="… font-mono …"> v kapitole „Federácia“ a „API a SDK“, napríklad POST /api/federation/v1/requests/:recipient_uuid/claim (šírka 345 CSS pixelov). Navigácia kapitolami pod nadpisom je navyše posúvateľná iba vodorovne v rámci <nav class="… overflow-x-auto … scrollbar-none"> so skrytým posuvníkom, takže odkazy „Prijaté balíky“ až „API a SDK“ nie sú pri tejto šírke viditeľné.

Dopad:

Používatelia zväčšenia obrazovky a používatelia mobilných zariadení musia pri čítaní každého riadku posúvať obsah oboma smermi a pri dlhých riadkoch strácajú prehľad o tom, kde sa v texte nachádzajú. Kapitoly ukryté vo vodorovne posúvanom paneli bez posuvníka nemusia vôbec objaviť, pretože nič nenaznačuje, že panel pokračuje.

Závažnosť: vysoká — príručka je hlavným zdrojom pomoci a pri zväčšení je čítanie výrazne sťažené.

Efektívne riešenie:

Pre splnenie kritéria úspešnosti je potrebné umožniť zalamovanie dlhých reťazcov v elementoch <code>, napríklad triedou break-all alebo pravidlom overflow-wrap: anywhere. Bloky kódu, ktoré zalomiť nemožno, je potrebné umiestniť do samostatného posúvateľného kontajnera s tabindex="0" a prístupným názvom, aby sa vodorovne posúvala iba ukážka, nie celá stránka. Navigáciu kapitolami je vhodné pri malej šírke zalamovať do viacerých riadkov (flex-wrap) namiesto skrytého vodorovného posúvania.

.prose code { overflow-wrap: anywhere; }