Fix accessibility issues
Guidelines for resolving common accessibility violations.
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>).