The outline you did not know you had

Open your page. In DevTools, run this in the console: $$('h1,h2,h3,h4,h5,h6').map(h => h.tagName + ' ' + h.textContent.trim().slice(0,50)). You now have your outline. Read it as if it were the table of contents of a book, because to a screen reader user that is exactly what it is.

Check three things. First: is there exactly one <h1>, and does it say what the page is? Second: does any level skip, an <h2> followed directly by an <h4>? Third: is any heading a heading only because it needed to be big?

That third one is the habit worth breaking here. Heading level is structure; font size is presentation. If you want small bold text that is not a section title, that is a <p> with a class, or a <strong>, or a <div>. If you want a section title that happens to look small, that is still an <h3> with a smaller font size. The two decisions are independent and conflating them is the single most common markup error on the web.

Fix the outline on your page. Then do the harder version: fix it without changing how the page looks at all. Every heading keeps its current size; only the levels change. If that requires adding a few classes, add them, the point is to prove to yourself that the two axes really are separate.

Finally, add a "skip to main content" link as the first focusable element in the body, pointing at your <main>. It should be visually hidden until focused. Tab into your page and watch it appear. That link is the single highest-value accessibility feature you can add in five minutes, and almost no generated page has one.