Information, structure, and relationships conveyed visually through presentation must also be programmatically determinable or available in text. This means using proper semantic HTML elements to define structure (like headings, lists, tables) and relationships (like labels and form fields, table headers and data cells).
Why It Matters
Screen readers and other assistive technologies rely on the underlying code structure, not just the visual appearance, to interpret content. Using semantic HTML allows these technologies to understand, for example, that a piece of text is a heading, an item belongs to a list, or which header cell corresponds to a data cell in a table. This provides crucial context that is lost if only non-semantic elements (<div>, <span>) with CSS styling are used.
Fixing the Issue
Use native HTML elements according to their semantic meaning. Use <h1>–<h6> for headings, <ol>, <ul>, and <li> for lists, <table>, <thead>, <tbody>, <th>, and <tr>/<td> for data tables (ensuring <th> elements have appropriate scope attributes or use id/headers), <label> for form labels, <nav> for navigation blocks, <main> for main content, <aside> for sidebars, etc. Avoid using HTML elements solely for their default styling; use CSS for presentation. Use ARIA roles and properties to supplement semantics only when native HTML is insufficient (e.g., for custom widgets).
Good Code Example
Using semantic HTML to convey structure and relationships:
