Tables and lists are powerful tools for organizing data. But when built poorly, they become impossible for screen reader users to understand. Let's learn how to make them accessible.

Accessible Tables

A good data table needs:

<table>
  <caption>Student Grades — Fall 2025</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Marie</td>
      <td>A</td>
    </tr>
  </tbody>
</table>

The scope="col" tells screen readers "this header applies to the column below."

Accessible Lists

Use the right list type for the right situation:

• <ul> — Unordered list (bullet points, no specific order)


• <ol> — Ordered list (numbered steps, rankings)


• <dl> — Description list (term + definition pairs)

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — structures web content</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — styles web content</dd>
</dl>

Your Task

Create a page with: