`, do not need additional labels.
43 |
44 | {::nomarkdown}
45 | {% include box.html type="end" %}
46 | {:/}
47 |
48 | {% include_cached toc.html %}
49 |
50 | ## Using `aria-labelledby`
51 | {:.ap}
52 |
53 | Use `aria-labelledby` to point to an existing element by its (unique) `id`. The label of the region is the content of the referenced element. Every element can be a label this way. Labels should be short and descriptive. If a heading is present in the region, consider using it as the label:
54 |
55 | {::nomarkdown}
56 | {% include box.html type="start" title="Code Snippet" class="example" %}
57 | {:/}
58 |
59 | ~~~html
60 |
61 | On this Page
62 | …
63 |
64 | ~~~
65 |
66 | {::nomarkdown}
67 | {% include box.html type="end" %}
68 | {:/}
69 |
70 | {% include ednote.html note="Figure out how to display links now that the sidebar is not available anymore." %}
71 |
72 | Explore other WAI-ARIA resources:
73 |
74 | * [WAI-ARIA Overview](https://www.w3.org/WAI/intro/aria)
75 | * [Notes on Using ARIA in HTML](https://www.w3.org/TR/aria-in-html/)
76 |
77 | Note: This approach using headings is also backward compatible for older web browsers and assistive technologies do not process HTML5 and WAI-ARIA.
78 |
79 | View a [complete code example](/tutorials/page-structure/example/) with regions and labels.
80 |
81 | ## Using `aria-label`
82 | {:.ap}
83 |
84 | Use the WAI-ARIA `aria-label` attribute to label the region. Consider this approach if the label should not appear visually on the page.
85 |
86 | {::nomarkdown}
87 | {% include box.html type="start" title="Code Snippet" class="example" %}
88 | {:/}
89 |
90 | ~~~html
91 |
92 | …
93 |
94 | ~~~
95 |
96 | {::nomarkdown}
97 | {% include box.html type="end" %}
98 | {:/}
99 |
100 | {% include ednote.html note="Figure out how to display links now that the sidebar is not available anymore." %}
101 |
102 |
--------------------------------------------------------------------------------
/content/tables/examples/headertoprow.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Complete “Table with header cells in the top row only” Example
3 | lang: en
4 | permalink: /tutorials/tables/examples/headertoprow/
5 | ref: /tutorials/tables/examples/headertoprow/
6 | ---
7 |
8 | [Back to page](/tutorials/tables/one-header/)
9 |
10 | ~~~ html
11 |
12 |
13 |
14 | Date
15 | Event
16 | Venue
17 |
18 |
19 | 12 Feb
20 | Waltz with Strauss
21 | Main Hall
22 |
23 |
24 | 24 Mar
25 | The Obelisks
26 | West Wing
27 |
28 |
29 | 14 Apr
30 | The What
31 | Main Hall
32 |
33 |
34 |
35 | ~~~
36 |
--------------------------------------------------------------------------------
/content/tables/examples/headertoprowfirstcol.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Complete “Table with header cells in the top row only” Example
3 | lang: en
4 | permalink: /tutorials/tables/examples/headertoprowfirstcol/
5 | ref: /tutorials/tables/examples/headertoprowfirstcol/
6 | ---
7 |
8 | [Back to page](/tutorials/tables/two-headers/#table-with-header-cells-in-the-top-row-and-first-column)
9 |
10 | ~~~ html
11 |
12 |
13 |
14 | Monday
16 | Tuesday
17 | Wednesday
18 | Thursday
19 | Friday
20 |
21 |
22 | 09:00 – 11:00
23 | Closed
24 | Open
25 | Open
26 | Closed
27 | Closed
28 |
29 |
30 | 11:00 – 13:00
31 | Open
32 | Open
33 | Closed
34 | Closed
35 | Closed
36 |
37 |
38 | 13:00 – 15:00
39 | Open
40 | Open
41 | Open
42 | Closed
43 | Closed
44 |
45 |
46 | 15:00 – 17:00
47 | Closed
48 | Closed
49 | Closed
50 | Open
51 | Open
52 |
53 |
54 |
55 | ~~~
56 |
--------------------------------------------------------------------------------
/content/tables/examples/multiplecolumnheaders.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Complete “Table with multiple column headers in each column” Example
3 | lang: en
4 | permalink: /tutorials/tables/examples/multiplecolumnheaders/
5 | ref: /tutorials/tables/examples/multiplecolumnheaders/
6 | ---
7 |
8 | [Back to page](/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column)
9 |
10 | ~~~ html
11 |
12 |
13 |
14 | Supplier contacts
15 |
16 |
17 |
18 | Example 1 Ltd
19 | Example 2 Co
20 |
21 |
22 | Contact
23 | James Phillips
24 | Marie Beauchamp
25 |
26 |
27 | Position
28 | Sales Director
29 | Sales Manager
30 |
31 |
32 | Email
33 | jp@1ltd.example.com
34 | marie@2co.example.com
35 |
36 |
37 |
38 | Example 3 Ltd
39 | Example 4 Inc
40 |
41 |
42 | Contact
43 | Suzette Jones
44 | Alex Howe
45 |
46 |
47 | Position
48 | Sales Officer
49 | Sales Director
50 |
51 |
52 | Email
53 | Suz@ltd3.example.com
54 | howe@4inc.example.com
55 |
56 |
57 |
58 | ~~~
59 |
--------------------------------------------------------------------------------
/content/tables/examples/scope-multiple.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Complete “Table with headers spanning multiple rows or columns” Example
3 | lang: en
4 | permalink: /tutorials/tables/examples/scope-multiple/
5 | ref: /tutorials/tables/examples/scope-multiple/
6 | ---
7 |
8 | [Back to page](/tutorials/tables/irregular/#table-with-headers-spanning-multiple-rows-or-columns)
9 |
10 | ~~~ html
11 |
12 |
13 |
14 | Poster availability
15 |
16 |
17 | Poster name
18 | Color
19 | Sizes available
20 |
21 |
22 | Zodiac
23 | Full color
24 | A2
25 | A3
26 | A4
27 |
28 |
29 | Black and white
30 | A1
31 | A2
32 | A3
33 |
34 |
35 | Sepia
36 | A3
37 | A4
38 | A5
39 |
40 |
41 | Angels
42 | Black and white
43 | A1
44 | A3
45 | A4
46 |
47 |
48 | Sepia
49 | A2
50 | A3
51 | A5
52 |
53 |
54 |
55 | ~~~
56 |
--------------------------------------------------------------------------------
/content/tables/examples/scope-offset.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Complete “Table with an offset column of header cells” Example
3 | lang: en
4 | permalink: /tutorials/tables/examples/scope-offset/
5 | ref: /tutorials/tables/examples/scope-offset/
6 | ---
7 |
8 | [Back to page](/tutorials/tables/two-headers/#table-with-an-offset-column-of-header-cells)
9 |
10 | ~~~ html
11 |
12 |
13 |
14 | Holidays taken in the last six months
15 |
16 |
17 |
18 | ID Name
20 | July
21 | August
22 | September
23 | October
24 | November
25 | December
26 |
27 |
28 |
29 |
30 |
31 | 215
32 | Abel
33 | 5
34 | 2
35 | 0
36 | 0
37 | 0
38 | 3
39 |
40 |
41 |
42 | 231
43 | Annette
44 | 0
45 | 5
46 | 3
47 | 0
48 | 0
49 | 6
50 |
51 |
52 |
53 | 173
54 | Bernard
55 | 2
56 | 0
57 | 0
58 | 5
59 | 0
60 | 0
61 |
62 |
63 |
64 | 141
65 | Gerald
66 | 0
67 | 10
68 | 0
69 | 0
70 | 0
71 | 8
72 |
73 |
74 |
75 | 99
76 | Michael
77 | 8
78 | 8
79 | 8
80 | 8
81 | 0
82 | 4
83 |
84 |
85 |
86 |
87 | ~~~
88 |
--------------------------------------------------------------------------------
/content/tables/examples/scope-simple.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Complete “Table with header cells in one column only” Example
3 | lang: en
4 | permalink: /tutorials/tables/examples/scope-simple/
5 | ref: /tutorials/tables/examples/scope-simple/
6 | ---
7 |
8 | [Back to page](/tutorials/tables/irregular/)
9 |
10 | ~~~ html
11 |
12 |
13 |
14 | Capital cities
15 |
16 |
17 | Country
18 | Capital city
19 |
20 |
21 | Belgium
22 | Brussels
23 |
24 |
25 | France
26 | Paris
27 |
28 |
29 | Holland
30 | Amsterdam
31 |
32 |
33 | Luxembourg
34 | Luxembourg
35 |
36 |
37 | Spain
38 | Madrid
39 |
40 |
41 | UK
42 | London
43 |
44 |
45 |
46 | ~~~
47 |
--------------------------------------------------------------------------------
/content/tables/examples/threeheaders.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Complete “Table with three headers related to each data cell” Example
3 | lang: en
4 | permalink: /tutorials/tables/examples/threeheaders/
5 | ref: /tutorials/tables/examples/threeheaders/
6 | ---
7 |
8 | [Back to page](/tutorials/tables/multi-level/#table-with-three-headers-related-to-each-data-cell)
9 |
10 | ~~~ html
11 |
12 |
13 |
14 | Availability of holiday accommodation
15 |
16 |
17 |
18 |
20 | Studio
21 |
22 |
23 | Apt
24 |
25 |
26 | Chalet
27 |
28 |
29 | Villa
30 |
31 |
32 |
33 |
34 |
35 |
36 | Paris
37 |
38 |
39 |
40 |
41 | 1 bedroom
42 |
43 |
44 | 11
45 |
46 |
47 | 20
48 |
49 |
50 | 25
51 |
52 |
53 | 23
54 |
55 |
56 |
57 |
58 | 2 bedroom
59 |
60 |
61 | -
62 |
63 |
64 | 43
65 |
66 |
67 | 52
68 |
69 |
70 | 32
71 |
72 |
73 |
74 |
75 | 3 bedroom
76 |
77 |
78 | -
79 |
80 |
81 | 13
82 |
83 |
84 | 15
85 |
86 |
87 | 40
88 |
89 |
90 |
91 |
92 | Rome
93 |
94 |
95 |
96 |
97 | 1 bedroom
98 |
99 |
100 | 13
101 |
102 |
103 | 21
104 |
105 |
106 | 22
107 |
108 |
109 | 3
110 |
111 |
112 |
113 |
114 | 2 bedroom
115 |
116 |
117 | -
118 |
119 |
120 | 23
121 |
122 |
123 | 43
124 |
125 |
126 | 30
127 |
128 |
129 |
130 |
131 | 3 bedroom
132 |
133 |
134 | -
135 |
136 |
137 | 16
138 |
139 |
140 | 32
141 |
142 |
143 | 40
144 |
145 |
146 |
147 |
148 |
149 | ~~~
150 |
--------------------------------------------------------------------------------
/content/tables/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Tables Tutorial"
3 | permalink: /tutorials/tables/
4 | ref: /tutorials/tables/
5 | lang: en
6 |
7 | description:
8 | image: /content-images/wai-tutorials/tables/social.png
9 | github:
10 | branch: 'master-2.0'
11 | repository: w3c/wai-tutorials
12 | path: 'content/tables/index.md'
13 |
14 | resource_title: Tables Tutorial
15 |
16 | metafooter: true
17 | last_updated: 2023-02-16
18 | editors:
19 | - Eric Eggert: "https://www.w3.org/People/yatil/"
20 | - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"
21 | update_editors:
22 | - Brian Elton
23 | contributing_participants:
24 | - see Acknowledgements
25 | support: Developed by the Education and Outreach Working Group (EOWG ). Developed with support from the WAI-ACT project , co-funded by the European Commission IST Programme .
26 |
27 |
28 | resource:
29 | ref: /tutorials/
30 | navigation:
31 | next: /tutorials/tables/one-header/
32 |
33 | wcag_success_criteria:
34 | - 1.3.1
35 | ---
36 |
37 | Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.
38 |
39 | Header cells must be marked up with ``, and data cells with ` ` to make tables accessible. For more complex tables, explicit associations may be needed using `scope`, `id`, and `headers` attributes.
40 |
41 | This tutorial shows you how to apply appropriate structural markup to tables. It includes the following pages:
42 |
43 | {% include ednote.html note="Images need to be adapted to new icon styles eventually" %}
44 |
45 | - {:.left} **[Tables with one header{% include image.html src="tables/img-simple.png" class="small" %}](/tutorials/tables/one-header/)** for rows or columns: For tables with content that is easy to distinguish, mark up header cells with ` ` and data cells with ` ` elements.
46 |
47 | - {:.left} **[Tables with two headers{% include image.html src="tables/img-multidir.png" class="small" %}](/tutorials/tables/two-headers/)** have a simple row header and a simple column header: For tables with unclear header directions, define the direction of each header by setting the `scope` attribute to `col` or `row`.
48 |
49 | - {:.left} **[Tables with irregular headers{% include image.html src="tables/img-irreg.png" class="small" %}](/tutorials/tables/irregular/)** have header cells that span multiple columns and/or rows: For these tables, define column and row groups and set the range of the header cells using the `colgroup` and `rowgroup` values of the scope attribute.
50 |
51 | - {:.left} **[Tables with multi-level headers{% include image.html src="tables/img-multi.png" class="small" %}](/tutorials/tables/multi-level/)** have multiple header cells associated per data cell: For tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way, use `id` and `headers` attributes to associate header and data cells explicitly.
52 |
53 | - {:.left} **[Caption & Summary{% include image.html src="tables/img-caption.png" class="small" %}](/tutorials/tables/caption-summary/):** A caption identifies the overall topic of a table and is useful in most situations. A summary provides orientation or navigation hints in complex tables.
54 | {:.nolist.withicons style="--img-width: 120px"}
55 |
56 | Some document formats other than HTML, such as PDF, provide similar mechanisms to markup table structures. Word processing applications may also provide mechanisms to markup tables. Tables markup is often lost when converting from one format to another, though some programs may provide functionality to assist converting table markup.
57 |
58 | Many web authoring tools and content management systems (CMS) provide functions to define header cells during table creation without having to edit the code manually.
59 |
60 | {::nomarkdown}
61 | {% include box.html type="start" title="Note" class="simple notes" %}
62 | {:/}
63 |
64 | This tutorial provides guidance for creating tables used to display data in a grid. This tutorial does not apply to tables used for layout. As a general rule, tables aren't meant to be used for layout purposes. Instead, a best practice is to use Cascading Style Sheets (CSS) for visual presentation.
65 |
66 | {::nomarkdown}
67 | {% include box.html type="end" %}
68 | {:/}
69 |
70 | ## Why is this important?
71 |
72 | Tables without structural markup to differentiate and properly link between header and data cells, create accessibility barriers. Relying on visual cues alone is not sufficient to create an accessible table. With structural markup, headers and data cells can be programmatically determined by software, which means that:
73 |
74 | - **People using screen readers** can have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells, so the reader doesn’t lose context.
75 |
76 | - **Some people use alternative ways to render the data**, for example by using custom stylesheets to display header cells more prominently. Techniques like this enable them to change text size and colors and display the information as lists rather than grids. The table code needs to be properly structured to allow alternative renderings.
77 |
--------------------------------------------------------------------------------
/content/tables/one-header.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Tables with One Header"
3 | nav_title: One Header
4 | permalink: /tutorials/tables/one-header/
5 | ref: /tutorials/tables/one-header/
6 | lang: en
7 |
8 | description:
9 | image: /content-images/wai-tutorials/tables/social.png
10 | github:
11 | branch: 'master-2.0'
12 | repository: w3c/wai-tutorials
13 | path: 'content/tables/one-header.md'
14 |
15 | resource:
16 | ref: /tutorials/tables/
17 | navigation:
18 | previous: /tutorials/tables/
19 | next: /tutorials/tables/two-headers/
20 |
21 | wcag_techniques:
22 | - H51
23 | - H63
24 |
25 | metafooter: true
26 | last_updated: 2019-07-27
27 | editors:
28 | - Eric Eggert: "https://www.w3.org/People/yatil/"
29 | - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"
30 | update_editors:
31 | - Brian Elton
32 | contributing_participants:
33 | - see Acknowledgements
34 | support: Developed by the Education and Outreach Working Group (EOWG ). Developed with support from the WAI-ACT project , co-funded by the European Commission IST Programme .
35 |
36 | ---
37 |
38 | {::nomarkdown}
39 | {% include box.html type="start" h="2" title="Overview" class="full" %}
40 | {:/}
41 |
42 | {% include image.html src="tables/img-simple.png" class="small right" %} This page covers tables that have one simple header for rows or one simple header for columns. Data in such tables is descriptive on its own and unambiguous.
43 |
44 | {::nomarkdown}
45 | {% include box.html type="end" %}
46 | {:/}
47 |
48 | {% include_cached toc.html %}
49 |
50 | If the table content is ambiguous or has both column and row headings, the `scope` attribute should be used to avoid confusion. For more guidance on such tables, see [tables with two headers](/tutorials/two-headers/).
51 |
52 | ## Table with header cells in the top row only
53 | {:.ex}
54 |
55 | The following table of concerts has the cells in the first row marked up using the ` ` element. This is only acceptable because it is such a small table and the data itself is distinctly different in each column so that the relationship between the header and data cells is evident.
56 |
57 | {::nomarkdown}
58 | {% include box.html type="start" title="Note" class="simple notes" %}
59 | {:/}
60 |
61 | {% include ednote.html note="Remove Note: Use of Scope for Simple Data Tables Is Unnecessary" issue="576" repo="wai-tutorials" status="open" %}
62 |
63 | Some screen readers will read “Date – Event – Venue” in the “Venue” cell because the direction of the ` ` elements is ambiguous.
64 |
65 | {::nomarkdown}
66 | {% include box.html type="end" %}
67 | {:/}
68 |
69 | {::nomarkdown}
70 | {% include box.html type="start" title="Example" class="example" %}
71 |
72 | Concerts:
73 |
74 |
75 | Date
76 | Event
77 | Venue
78 |
79 |
80 | 12 February
81 | Waltz with Strauss
82 | Main Hall
83 |
84 |
85 | 24 March
86 | The Obelisks
87 | West Wing
88 |
89 |
90 | 14 April
91 | The What
92 | Main Hall
93 |
94 |
95 |
96 | {% include box.html type="end" %}
97 | {:/}
98 |
99 | {::nomarkdown}
100 | {% include box.html type="start" title="Code Snippet" class="example" %}
101 | {:/}
102 |
103 | ~~~ html
104 |
105 |
106 | Date
107 | Event
108 | Venue
109 |
110 |
111 | 12 February
112 | Waltz with Strauss
113 | Main Hall
114 |
115 | […]
116 |
117 | ~~~
118 |
119 | {::nomarkdown}
120 | {% include box.html type="end" %}
121 | {:/}
122 |
123 | ## Table with header cells in the first column only
124 | {:.ex}
125 |
126 | In the following table, the data from the previous example is laid out with the header column on the left. Also in this situation, it is only acceptable to use this code because it is such a small and straightforward table. The next pages in this tutorial explain how to code more complex tables.
127 |
128 | {::nomarkdown}
129 | {% include box.html type="start" title="Example" class="example" %}
130 |
131 | Concerts:
132 |
133 |
134 | Date
135 | 12 February
136 | 24 March
137 | 14 April
138 |
139 |
140 | Event
141 | Waltz with Strauss
142 | The Obelisks
143 | The What
144 |
145 |
146 | Venue
147 | Main Hall
148 | West Wing
149 | Main Hall
150 |
151 |
152 |
153 | {% include box.html type="end" %}
154 | {:/}
155 |
156 | {::nomarkdown}
157 | {% include box.html type="start" title="Code Snippet" class="example" %}
158 | {:/}
159 |
160 | ~~~ html
161 |
162 |
163 | Date
164 | 12 February
165 | 24 March
166 | 14 April
167 |
168 |
169 | Event
170 | Waltz with Strauss
171 | The Obelisks
172 | The What
173 |
174 |
175 | Venue
176 | Main Hall
177 | West Wing
178 | Main Hall
179 |
180 |
181 | ~~~
182 |
183 | {::nomarkdown}
184 | {% include box.html type="end" %}
185 | {:/}
186 |
187 | ## Table with ambiguous data
188 | {:.ex}
189 |
190 | {% include ednote.html note="Remove Example: Use of Scope for Simple Data Tables Is Unnecessary" issue="576" repo="wai-tutorials" status="open" %}
191 |
192 | In this example, the data (first name, last name, and city) can’t be distinguished from one another without knowing which header each corresponds to. The `scope` attribute with the value `col` defines the direction of the header cells and associates them with the corresponding data cells. The `scope` attribute is also needed for larger tables with one header row or column.
193 |
194 | {::nomarkdown}
195 | {% include box.html type="start" title="Example" class="example" %}
196 |
197 | Teddy bear collectors:
198 |
199 | Last Name
200 | First Name
201 | City
202 |
203 |
204 | Phoenix
205 | Imari
206 | Henry
207 |
208 |
209 | Zeki
210 | Rome
211 | Min
212 |
213 |
214 | Apirka
215 | Kelly
216 | Brynn
217 |
218 |
219 |
220 | {% include box.html type="end" %}
221 | {:/}
222 |
223 | {::nomarkdown}
224 | {% include box.html type="start" title="Code Snippet" class="example" %}
225 | {:/}
226 |
227 | ~~~ html
228 |
229 | Teddy bear collectors:
230 |
231 | Last Name
232 | First Name
233 | City
234 |
235 |
236 | Phoenix
237 | Imari
238 | Henry
239 |
240 |
241 | Zeki
242 | Rome
243 | Min
244 |
245 |
246 | Apirka
247 | Kelly
248 | Brynn
249 |
250 |
251 | ~~~
252 |
253 | {::nomarkdown}
254 | {% include box.html type="end" %}
255 | {:/}
256 |
--------------------------------------------------------------------------------
/content/tables/tips.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Tips and Tricks"
3 | permalink: /tutorials/tables/tips/
4 | ref: /tutorials/tables/tips/
5 | lang: en
6 |
7 | description:
8 | image: /content-images/wai-tutorials/tables/social.png
9 | github:
10 | branch: 'master-2.0'
11 | repository: w3c/wai-tutorials
12 | path: 'content/tables/tips.md'
13 |
14 | resource:
15 | ref: /tutorials/tables/
16 | navigation:
17 | previous: /tutorials/tables/caption-summary/
18 |
19 | metafooter: true
20 | last_updated: 2024-05-13
21 | editors:
22 | - Eric Eggert: "https://www.w3.org/People/yatil/"
23 | - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"
24 | update_editors:
25 | - Brian Elton
26 | contributing_participants:
27 | - see Acknowledgements
28 | support: Developed by the Education and Outreach Working Group (EOWG ). Developed with support from the WAI-ACT project , co-funded by the European Commission IST Programme .
29 |
30 | ---
31 |
32 | - **Keep it simple:** Complex tables are more work for content creators as well as being harder to interpret for users. It’s usually better to [break up complex tables into simple individual tables](/tutorials/tables/multi-level/#split-up-multi-level-tables), each containing the data for one sub-topic.
33 |
34 | - **Responsive design:** On small screens, in a small viewport, in zoomed views, with enlarged text, and other situations, responsive tables often change format. Ensure that the structural relationship is available in all formats.
35 |
36 | - **Table separation:** If several tables follow one another, don’t use a single table and put in an additional row of ` ` cells. Screen readers may read aloud all ` ` cells in a column, resulting in confusion. [Start a new `` when the topic changes.](/tutorials/tables/multi-level/#split-up-multi-level-tables)
37 |
38 | - **Data separation:**
39 |
40 | - Make sure that each separate piece of data has its cell. Don’t use headers in one column and all data in a second column, as this will make it almost impossible for screen readers to work out the relationships between data across columns.
41 |
42 | {% include image.html src="tables/headers-in-one-column-all-data-in-second.png" alt="On the left, a table with two columns is shown. The header for the first column reads “Shirt” and the header for the second column reads “Sizes and amount in stock”. The second row reads “Blue” in the first column and “S: 6; M: 13, XL: 10”. In the second row, Sizes for a “Red” shirt are “M: 2; L: 9; XL: 10; XXL: 1”. On the right, the table is split up in “Shirt”, “Size” and “Stock” columns." class="" %}
43 |
44 | - Don't use line breaks (`` elements are used for header cells, using ` ` elements with different styling will make tables less accessible if not inaccessible. It is also helpful to differentiate ` ` and ` ` cells visually. For example, on these tutorial pages, header cells have a dark gray background.
51 |
52 | - **Zebra tables:** Styling even and odd rows in a different way can be helpful to people who have reading difficulties or who enlarge text. It acts as a visual guide. Highlighting the cell (and row/column) on mouseover and keyboard focus to support people to see where they are. Make sure that the contrast ratio between the text and background is good for both headers and data cells. [Here is how to check the contrast ratio.](https://www.w3.org/WAI/eval/preliminary#contrast)
53 |
54 | - **Flexibility:** Due to the layout model of tables, they sometimes don’t fit on small screens small or are too wide if the user is zooming in. In such circumstances, it’s important that the table isn’t cut off (for example by using `overflow: hidden` in CSS). In these tutorials `overflow: scroll` is applied to an element wrapping the table so users can scroll through the table horizontally but there are much more options to display table in such circumstances.
55 |
56 | - **Tables for Layout:** Tables should not be used for layout purposes. Use Cascading Style Sheets (CSS) for layout. If there are already layout tables present, don’t use structural elements (like ` ` or ``) and attributes discussed in this tutorial, and do add `role="presentation"` to the `` element.
57 |
58 | ## Other W3C Resources
59 |
60 | - [Content can be presented in different ways](https://www.w3.org/WAI/intro/people-use-web/principles#adaptable) section of Accessibility Principles in How People with Disabilities Use the Web.
61 |
--------------------------------------------------------------------------------
/content/tables/two-headers.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Tables with Two Headers"
3 | nav_title: Two Header
4 | permalink: /tutorials/tables/two-headers/
5 | ref: /tutorials/tables/two-headers/
6 | lang: en
7 |
8 | description:
9 | image: /content-images/wai-tutorials/tables/social.png
10 | github:
11 | branch: 'master-2.0'
12 | repository: w3c/wai-tutorials
13 | path: 'content/tables/two-headers.md'
14 |
15 | resource:
16 | ref: /tutorials/tables/
17 | navigation:
18 | previous: /tutorials/tables/one-header/
19 | next: /tutorials/tables/irregular/
20 |
21 | wcag_techniques:
22 | - H51
23 | - H63
24 |
25 | metafooter: true
26 | last_updated: 2019-07-27
27 | editors:
28 | - Eric Eggert: "https://www.w3.org/People/yatil/"
29 | - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"
30 | update_editors:
31 | - Brian Elton
32 | contributing_participants:
33 | - see Acknowledgements
34 | support: Developed by the Education and Outreach Working Group (EOWG ). Developed with support from the WAI-ACT project , co-funded by the European Commission IST Programme .
35 |
36 | ---
37 |
38 | {::nomarkdown}
39 | {% include box.html type="start" h="2" title="Overview" class="full" %}
40 | {:/}
41 |
42 | {% include image.html src="tables/img-multidir.png" class="small right" %} This page covers tables that have a simple row header and a simple column header. In such tables, the relationship between the headers and data cells becomes quickly ambiguous. For such tables, use the `` element to identify the header cells and the `scope` attribute to declare the direction of each header. The `scope` attribute can be set to `row` or `col` to denote that a header applies to the entire row or column, respectively.
43 |
44 | {::nomarkdown}
45 | {% include box.html type="end" %}
46 | {:/}
47 |
48 | {% include_cached toc.html %}
49 |
50 | Additionally, you can use the `` element to identify the table in a document. This is particularly useful for screen-reader users browsing the web page in “table mode” where they can navigate from table to table. More background and guidance on the using `` element is provided on the [Caption & Summary page](/tutorials/tables/caption-summary/).
51 |
52 | ## Table with header cells in the top row and first column
53 | {:.ex}
54 |
55 | The following table of opening times has header information in both the top row and the first column. All header cells are marked up as `` cells with `scope` attributes added.
56 |
57 | In the header row, the `col` value for `scope` associates each header cell with the data cells in the column. In the header column, the `row` value associates the individual headers with their rows. Without this information, some users would not easily understand the relationship between header and data cells. In the example below, the “Open” and “Closed” labels are only useful if they can be assigned to a particular day and time.
58 |
59 | {::nomarkdown}
60 | {% include box.html type="start" title="Example" class="example" %}
61 |
62 |
63 | Delivery slots:
64 |
65 | Monday
67 | Tuesday
68 | Wednesday
69 | Thursday
70 | Friday
71 |
72 |
73 | 09:00 – 11:00
74 | Closed
75 | Open
76 | Open
77 | Closed
78 | Closed
79 |
80 |
81 | 11:00 – 13:00
82 | Open
83 | Open
84 | Closed
85 | Closed
86 | Closed
87 |
88 |
89 | 13:00 – 15:00
90 | Open
91 | Open
92 | Open
93 | Closed
94 | Closed
95 |
96 |
97 | 15:00 – 17:00
98 | Closed
99 | Closed
100 | Closed
101 | Open
102 | Open
103 |
104 |
105 |
106 | {% include box.html type="end" %}
107 | {:/}
108 |
109 | {::nomarkdown}
110 | {% include box.html type="start" title="Code Snippet" class="example" %}
111 | {:/}
112 |
113 | ~~~ html
114 |
115 | Delivery slots:
116 |
117 | Monday
119 | Tuesday
120 | Wednesday
121 | Thursday
122 | Friday
123 |
124 |
125 | 09:00 – 11:00
126 | Closed
127 | Open
128 | Open
129 | Closed
130 | Closed
131 |
132 |
133 | 11:00 – 13:00
134 | Open
135 | Open
136 | Closed
137 | Closed
138 | Closed
139 |
140 | […]
141 |
142 | ~~~
143 |
144 | {::nomarkdown}
145 | {% include box.html type="end" %}
146 | {:/}
147 |
148 | [Full code for “Table with header cells in the top row and first column”](/tutorials/tables/examples/headertoprowfirstcol/)
149 |
150 | ## Table with an offset column of header cells
151 | {:.ex}
152 |
153 | In this table, the row header cells are in the second rather than in the first column. The approach is similar to the examples above: The scope of the header cells in the top row is set to `col`. By using the `row` value for `scope` assigns the header cells in the second column to the data cells on the left and the right of the individual header cell.
154 |
155 | {::nomarkdown}
156 | {% include box.html type="start" title="Example" class="example" %}
157 |
158 |
159 |
160 | Holidays taken in the last six months
161 |
162 |
163 |
164 | ID
165 | Name
166 | July
167 | August
168 | September
169 | October
170 | November
171 | December
172 |
173 |
174 |
175 |
176 |
177 | 215
178 | Abel
179 | 5
180 | 2
181 | 0
182 | 0
183 | 0
184 | 3
185 |
186 |
187 |
188 | 231
189 | Annette
190 | 0
191 | 5
192 | 3
193 | 0
194 | 0
195 | 6
196 |
197 |
198 |
199 | 173
200 | Bernard
201 | 2
202 | 0
203 | 0
204 | 5
205 | 0
206 | 0
207 |
208 |
209 |
210 | 141
211 | Gerald
212 | 0
213 | 10
214 | 0
215 | 0
216 | 0
217 | 8
218 |
219 |
220 |
221 | 99
222 | Michael
223 | 8
224 | 8
225 | 8
226 | 8
227 | 0
228 | 4
229 |
230 |
231 |
232 |
233 | {% include box.html type="end" %}
234 | {:/}
235 |
236 | {::nomarkdown}
237 | {% include box.html type="start" title="Code Snippet" class="example" %}
238 | {:/}
239 |
240 | ~~~ html
241 | […]
242 |
243 | 215
244 | Abel
245 | 5
246 | 2
247 | 0
248 | 0
249 | 0
250 | 3
251 |
252 | […]
253 | ~~~
254 |
255 | {::nomarkdown}
256 | {% include box.html type="end" %}
257 | {:/}
258 |
259 | [Full code for “Table with an offset column of header cells”](/tutorials/tables/examples/scope-offset/)
260 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command = "git submodule update --init --remote && bundle exec jekyll build --config '_config.yml,_config_staging.yml'"
3 | publish = "_site"
4 |
5 | [build.environment]
6 | RUBY_VERSION = "3.3.3"
7 |
8 | [[redirects]]
9 | from = "/"
10 | to = "/tutorials"
11 |
12 | [dev]
13 | # NB on win64 (cmd or bash shells) --live reload is broken - s/-w --livereload/--no-watch
14 | # To run along side another WAI resource use the --port 3001 in the following and on CLI with `netify dev`
15 | command = "bundle exec jekyll serve -w --livereload --trace --config _config.yml,_config_staging.yml"
16 |
17 |
--------------------------------------------------------------------------------
/w3c.json:
--------------------------------------------------------------------------------
1 | {
2 | "group": 35532,
3 | "contacts": [
4 | "slhenry",
5 | "yatil"
6 | ],
7 | "shortName": "wai-tutorials",
8 | "repo-type": "article",
9 | "policy": "open"
10 | }
--------------------------------------------------------------------------------
