Why this matters
When headings, lists, tables, and form labels are only visually styled but not semantically marked up, assistive technologies cannot convey the structure to users. A sighted user sees a bold heading; a screen reader user hears undifferentiated text.
Common failures
These are the most frequent ways this criterion is violated in real-world websites:
- Using <b> or font-size for headings instead of <h1>-<h6>
- Form inputs without associated <label> elements
- Data tables without <th> headers
- Lists built with <div> and dashes instead of <ul>/<ol>
- Required fields indicated only by color
- Fieldsets without legends for grouped controls
How to fix
- Use semantic HTML: <h1>-<h6> for headings, <ul>/<ol> for lists, <table> with <th> for data
- Associate labels with inputs using for/id or wrapping: <label for='email'>Email</label><input id='email'>
- Use <fieldset> and <legend> for related form controls
- Mark required fields with aria-required='true' in addition to visual indicators
Related axe-core rules
xsbl uses axe-core to automatically detect violations of this criterion. The following rules are checked:
Check your site for 1.3.1 violations
xsbl scans your rendered pages in a real browser and finds violations of this criterion automatically.
Scan your site freeOfficial reference: Understanding WCAG 1.3.1: Info and Relationships (W3C)