Perdangos ir fokuso spąstas

Perdangos (overlay) sąsaja — modalai, patvirtinimo dialogai, pranešimai (toasts) — atrodo paprasta: parodai <div>, paslepi <div>. Bet prieinamumui (a11y) tai viena kebliausių vietų, ir čia slypi tikra klaida, kurią patys taisėme.

Klaida. Atsidarai modalą. Paspaudi Tab. Fokusas peršoka į mygtukus už modalo — puslapyje, kuris „turėtų būti nepasiekiamas". Pele naudojantis to nepamatysi. Bet klaviatūros ar ekrano skaitytuvo vartotojas dabar pasimetė: jis „vaikšto" po nematomą foną, nesuprasdamas kur yra.

Tai ne kosmetika. Tai WCAG 2.1 reikalavimas (2.4.3 Focus Order, 2.1.2 No Keyboard Trap), ir realias programas pagal jį audituoja. Kiekvienas dialogas privalo:

1. Įvesti fokusą į dialogą, kai jis atsidaro.
2. Sulaikyti (trap) fokusą viduje, kol atviras (Tab nuo paskutinio elemento grįžta į pirmą; Shift+Tab nuo pirmo — į paskutinį).
3. Grąžinti fokusą tam, kas dialogą atidarė, kai jis užsidaro.

Trys papildomi prieinamumo dalykai, kuriuos pridėsim:

• Paslėpti foną nuo ekrano skaitytuvų (aria-hidden ant kitų elementų) — kitaip skaitytuvas „mato" ir skaito puslapį už modalo.
• Pranešti pokyčius (aria-live) — tai, ką reginti mato akimis („12 nuotraukų įkelta"), o aklas praleistų.
• Klaviatūra žvaigždučių įvertinimui. Mūsų žvaigždutės buvo tik pelei — rodyklių klavišais nepajudinamos. Tikra prieinamumo yda; sutvarkysim makeRadioGroup.

Pastebėk temą: modalai, patvirtinimai ir pranešimai visi remiasi tuo pačiu — perdanga + fokuso valdymas + Esc/fono paspaudimas užverti. Vieną kartą suprasi — pritaikysi visiems.