A deep dive into semantic HTML, ARIA landmark naming, heading hierarchy, reusable Vue components, and accessibility testing in GitLab.

Frontend accessibility problems are not always visible.

A component can look perfectly correct, follow the design system, and still introduce accessibility violations because its HTML structure communicates the wrong meaning to assistive technologies.

One example is using a heading element purely to achieve a particular font size or visual appearance.

A reusable sidebar component might render an <h4> because that heading level matches the intended design.…