Fix accessibility issues

This page covers the most common accessibility issues detected by VisualQ and how to fix them.

Missing alt text

Rule: image-alt

Images must have an alt attribute describing their content.

<!-- Bad -->
<img src="hero.jpg" />

<!-- Good -->
<img src="hero.jpg" alt="Team collaborating at a whiteboard" />

<!-- Decorative image -->
<img src="decoration.svg" alt="" role="presentation" />

Insufficient color contrast

Rule: color-contrast

Text must have a contrast ratio of at least 4.5:1 against its background (3:1 for large text).

Fix by adjusting text color, background color, or both to meet the minimum ratio.

Missing form labels

Rule: label

Every form input must have an associated <label> element or aria-label attribute.

<!-- Bad -->
<input type="email" placeholder="Email" />

<!-- Good -->
<label for="email">Email</label>
<input id="email" type="email" />

Incorrect heading hierarchy

Rule: heading-order

Headings must not skip levels. An <h3> should not appear without a preceding <h2>.

<!-- Bad -->
<h1>Page title</h1>
<h3>Subsection</h3>

<!-- Good -->
<h1>Page title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

Missing landmark regions

Rule: region

Page content should be contained within landmark regions (<main>, <nav>, <header>, <footer>).