Det finns en anledning till att JavaScript-parallax alltid ser lite fel ut — lite frånkopplat, som om lagren simmar en halv frame bakom sidan. Det är inte slarvig kod. Det beror på att scroll-händelser når JavaScript efter att webbläsaren redan har ritat rullningen. Webbläsaren löste det här en gång, när den förvandlade klibbiga rubriker till position: sticky. Scroll-driven animations är samma drag, tillämpat på alla scroll-bundna effekter på en gång.
I artikeln om tillgänglighet var en modal med display:none, som ändå fanns kvar i tillgänglighetsträdet, ett exempel på ett fel som uppstod ur att bygga en modal från grunden med divar. Den verkliga frågan är: varför behövde den överhuvudtaget byggas från grunden? Jag går igenom vad den nativa <dialog> och attributet popover ger dig gratis – top layer, fokusfälla, light dismiss – och var de här två mekanismerna skiljer sig så pass mycket att man med lätthet bygger ett otillgängligt gränssnitt genom att blanda ihop dem.
Korrekt HTML är bara startpunkten. Se hur tillgänglighetsträdet faktiskt fungerar, varför ARIA oftare gör skada än nytta än du tror, och bygg en riktig accordion, en live region och fokushantering i Next.js tillsammans med mig.
