|
14 | 14 |
|
15 | 15 | ??? Note "Click to see WAVE Tool Reference" |
16 | 16 |
|
17 | | -<!-- Note For Wiki Author: WAVE Tool text content will use text that break markdown generation for the details dropdown. If the copy/pasted text includes angle brackets, surround them with backticks to avoid this problem. --> |
18 | | - |
19 | | -> ### WAVE Category |
20 | | -> Alerts |
21 | | -> ### WAVE Error |
22 | | -> Layout table |
23 | | -> ### What It Means |
24 | | -> A layout table is present. |
25 | | -> ### Why It Matters |
26 | | -> Layout tables exist merely to position content visually - to create columns, insert spacing, or align content neatly for sighted users. Their content is not at all tabular in nature. Layout tables should not be used in HTML5. They can introduce reading and navigation order issues. Screen readers may interpret them as data tables (i.e., announcing column and row numbers), especially if they contain table header (`<th>`) cells. This introduces significant overhead on screen reader users. |
27 | | -> ### What To Do |
28 | | -> In almost every case, layout tables can be replaced with other HTML elements and styled with CSS to achieve the desired visual presentation. If the table contains tabular data, provide appropriate header (`<th>`) cells. If the layout table remains, verify that the reading and navigation order of table content (based on underlying source code order) is logical and give it role="presentation" to ensure it is not identified as a table to screen reader users. |
29 | | -> ### The Algorithm... in English |
30 | | -> A `<table>` element is present that does not contain any header (`<th>`) cells. |
31 | | -> ### Standards and Guidelines |
32 | | -> - [1.3.1 Info and Relationships (Level A)](https://webaim.org/standards/wcag/checklist#sc1.3.1) |
33 | | -> - [1.3.2 Meaningful Sequence (Level A)](https://webaim.org/standards/wcag/checklist#sc1.3.2) |
| 17 | + <!-- Note For Wiki Author: WAVE Tool text content will use text that break markdown generation for the details dropdown. If the copy/pasted text includes angle brackets, surround them with backticks to avoid this problem. --> |
34 | 18 |
|
35 | | -</p> |
36 | | -</details> |
| 19 | + > ### WAVE Category |
| 20 | + > Alerts |
| 21 | + > ### WAVE Error |
| 22 | + > Layout table |
| 23 | + > ### What It Means |
| 24 | + > A layout table is present. |
| 25 | + > ### Why It Matters |
| 26 | + > Layout tables exist merely to position content visually - to create columns, insert spacing, or align content neatly for sighted users. Their content is not at all tabular in nature. Layout tables should not be used in HTML5. They can introduce reading and navigation order issues. Screen readers may interpret them as data tables (i.e., announcing column and row numbers), especially if they contain table header (`<th>`) cells. This introduces significant overhead on screen reader users. |
| 27 | + > ### What To Do |
| 28 | + > In almost every case, layout tables can be replaced with other HTML elements and styled with CSS to achieve the desired visual presentation. If the table contains tabular data, provide appropriate header (`<th>`) cells. If the layout table remains, verify that the reading and navigation order of table content (based on underlying source code order) is logical and give it role="presentation" to ensure it is not identified as a table to screen reader users. |
| 29 | + > ### The Algorithm... in English |
| 30 | + > A `<table>` element is present that does not contain any header (`<th>`) cells. |
| 31 | + > ### Standards and Guidelines |
| 32 | + > - [1.3.1 Info and Relationships (Level A)](https://webaim.org/standards/wcag/checklist#sc1.3.1) |
| 33 | + > - [1.3.2 Meaningful Sequence (Level A)](https://webaim.org/standards/wcag/checklist#sc1.3.2) |
| 34 | + |
37 | 35 | ---- |
38 | 36 |
|
39 | 37 | ??? Note "Click to see WAVE Tool Reference" |
|
0 commit comments