How I Fixed PageSpeed Insights Accessibility Issues in a Next.js App

Recently, I worked on fixing accessibility issues flagged by PageSpeed Insights across 13 pages of a production Next.js application called Accuguide — a platform that helps people discover accessible places and services. In this article, I'll walk through the exact issues I found and how I fixed them. These are common mistakes that show up in many Next.js apps, so hopefully this saves you some debugging time. The Problems PageSpeed Found Running PageSpeed Insights on each page revealed 5 main categories of issues: Low contrast text Links relying on color alone to be distinguishable Invalid <dl> element structure Missing <main> landmark Heading elements skipping levels Let's go through each one. 1. Low Contrast Text PageSpeed flagged several elements with insufficient contrast between text and background colors. The culprit: A global .secondary-text CSS class using text-slate-500 which doesn't meet WCAG AA contrast requirements on a light background. /* ❌ Before */ .secondary-text { @ap