INWP: Tables & Lists

Tables & Lists: Structuring Data for All Users

Tables and lists are powerful tools for organizing content—but if misused, they can become confusing or completely inaccessible to users who rely on screen readers. Following accessibility best practices ensures that your structured content is both semantic and understandable.

Use Tables for Data, Not Layout

Tables should only be used for presenting tabular data, not for controlling page layout. Using tables for layout can confuse screen readers and cause major issues on mobile devices.

Avoid:

<table>
  <tr><td>Left Column</td><td>Right Column</td></tr>
</table>

Do:
Use CSS for layout and reserve tables only for data presentation.

Include Proper Table Headers

Screen readers need headers to understand how data in a table is organized.

For simple tables:

Use <th> for headers (not <td> )
Add scope="col" or scope="row" to indicate header direction

Example:

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
      <th scope="col">Start Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alex</td>
      <td>Developer</td>
      <td>2023</td>
    </tr>
  </tbody>
</table>

For complex tables:

Use the headers attribute to explicitly associate cells with multiple headers
Consider adding summaries or alternative views

Don’t Paste Tables from Word or Excel Without Cleaning

When pasting tables from external sources like Word or Excel, hidden formatting can break accessibility. Always review and clean the HTML.

How to clean:

Paste into a plain text editor first
Use semantic HTML <table> , <tr> , <th> , and <td> only
Remove unnecessary styles or nested tags

Note: CMS will sometimes add attributes to table elements and their children. Copy/pasting a table from other content in CMS should also be cleaned.

Use Lists Semantically

Lists provide structure and context—when used correctly. Screen readers announce the number of items in a list and allow users to navigate through them easily.

Unordered Lists (`<ul>`)

Use for grouped items with no inherent order

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

...will render like this:

Apples
Bananas
Cherries

Ordered Lists (`<ol>`)

Use when sequence matters (e.g., steps in a process)

<ol>
  <li>Preheat the oven</li>
  <li>Mix the ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

...will render like this:

Preheat the oven
Mix the ingredients
Bake for 30 minutes

Avoid Using Lists Just for Indentation or Styling

Use lists for actual lists—don’t use them just to add bullet points or spacing.

Quick Checklist

✅ Tables are used only for data—not layout
✅ Table headers use <th> with proper scope
✅ Tables from Word/Excel are cleaned and simplified
✅ Lists use proper HTML ( <ul> / <ol> and <li> )
✅ Ordered lists are used for sequences
✅ Unordered lists are used for grouped items
✅ No visual-only lists (like bullet icons without markup)

Next Topic: Forms

Tables & Lists