Blogg

Popover API og nativ <dialog>: slutt på modaler bygget manuelt fra bunnen

I artikkelen om tilgjengelighet var en modal med display:none, som fortsatt fantes i tilgjengelighetstreet, et eksempel på en feil som følger av å bygge en modal fra bunnen med div-er. Det egentlige spørsmålet er: hvorfor måtte den i det hele tatt bygges fra bunnen? Jeg går gjennom hva den native <dialog> og popover-attributtet gir deg gratis – top layer, fokusfelle, light dismiss – og hvor disse to mekanismene skiller seg så mye at å forveksle dem er en enkel vei til et utilgjengelig grensesnitt.

Oppretting av tilgjengelige komponenter for skjermlesere

Korrekt HTML er bare startpunktet. Se hvordan tilgjengelighetstreet faktisk fungerer, hvorfor ARIA oftere skader enn hjelper enn du skulle tro, og bygg en ekte accordion, en live region og fokushåndtering i Next.js sammen med meg.