Fix broken heading hierarchies by making heading levels dynamic, not hardcoded
A BigCommerce accessibility audit revealed skipped and inconsistent heading levels across page templates, confusing screen-reader navigation. The root cause was not incorrect tags but an architectural flaw: each template hardcoded its own heading level with no awareness of the broader page structure. The recommended fix is to create a single reusable heading component that receives its level as an input from whatever controls the page hierarchy, rather than embedding a fixed level in each template. This approach works across stacks — Handlebars, Liquid, React, and Astro — using different mechanisms but the same principle. A contextual heading level stays correct when components are reused or templates are copied, whereas a hardcoded level will eventually break.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in