Some Basics...

Note: In the 2021 WebAIM Million analysis: 1,533,402 tables were observed, down from 1,876,456 in 2020. Only 140,793 (9.2%) of the tables had valid data table markup.

Layout Tables
- IGNORE EVERYTHING after this slide!!!

Avoid Nesting tables

Make sure table makes sense when linearized

Use only

Don't use

Layout Table Examples

Standard Table without role="presentation"
Type of Problem Does the student have the condition? If Yes, please explain. Describe complications, long-term effects, ongoing treatment or other important information.

Eczema

Other

Screen reader speaks unnessary table related info (aka NOISE) such as: table overview, row number, cell number ...


Table with role="presentation"
Type of Problem Does the student have the condition? If Yes, please explain. Describe complications, long-term effects, ongoing treatment or other important information.

Eczema

Other

Screenreader never mentions the table, only the cell content is read.

<table role="presentation" border="1">
<caption>
<h3>Table with role=&quot;presentation&quot;</h3>
</caption>
<tr>
<th>Type of Problem</th>
<th><span id="have5">Does the student have the condition? </th>
<th id="explain7">If Yes, please
... rest of table

Use proportional units

Add a table name

Use Table Head cells

Explain the table

When possible - Simplify