Tables and Accessibility

Tables

HTML tables are for tabular data, rows and columns of related values, not for page layout (that job belongs to CSS).

<table>
  <thead>
    <tr>
      <th>Course</th>
      <th>Lessons</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML Foundations</td>
      <td>6</td>
    </tr>
    <tr>
      <td>CSS Foundations</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

<thead> groups the header row, <tbody> groups the data rows, and each <th> (header cell) is announced by screen readers as a column label for every <td> (data cell) beneath it.

Why accessibility matters

Accessible HTML isn't an extra feature, it's what makes your site usable for people using screen readers, keyboard-only navigation, or voice control, and it usually makes the site better for everyone else too.

• Use real buttons (<button>) and links (<a>) instead of <div onclick>, they come with keyboard support and screen-reader semantics for free.
• Always give images meaningful alt text.
• Keep a logical heading order (h1 → h2 → h3), don't skip levels.
• Make sure interactive elements are reachable and usable with the Tab key alone.

<!-- Bad: no keyboard support, no semantics -->
<div onclick="submitForm()">Submit</div>

<!-- Good: works with keyboard, mouse, and screen readers -->
<button onclick="submitForm()">Submit</button>