diff --git a/curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a539b887ec68c593cdc4b.md b/curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a539b887ec68c593cdc4b.md index a100bd86a12..31c169a3884 100644 --- a/curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a539b887ec68c593cdc4b.md +++ b/curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a539b887ec68c593cdc4b.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-are-best-practices-for-tables-and-accessibility --- -# --description-- +# --interactive-- When we see a table, we immediately start making visual associations between the data and the headers. @@ -26,6 +26,8 @@ Now let's talk about row and column headers. Headers are special cells, typicall For example, the code below creates a table for two pets. Every row has a row header (the name of the pet) and every column has a column header, which describes what the data in the column represents (age and type). +:::interactive_editor + ```html @@ -52,6 +54,8 @@ For example, the code below creates a table for two pets. Every row has a row he
Our Pets
``` +::: + Notice that the above code has a `caption` element immediately after the opening `table` element. Then, inside the table head (`thead`) element, it has the column headers (`Name`, `Age`, and `Type`). In the second and third rows, inside the table body (`tbody`) element, we find the data for each one of our pets. The names of the pets are the row headers because they are inside table header elements (`th`). Associating the data cells with their corresponding headers is also very important for screen readers. The `scope` attribute determines if a header is a row header or a column header. @@ -62,6 +66,8 @@ In the code below, you can see that we added the `scope` attribute to the column The two row headers (`Nora` and `Gino`) have a `scope` of `row`. +:::interactive_editor + ```html @@ -88,8 +94,13 @@ The two row headers (`Nora` and `Gino`) have a `scope` of `row`.
Our Pets
``` +::: + If a column or row header spans across multiple cells, the `scope` will also be applied to each one of the cells individually. Here's an example of that: +:::interactive_editor + +```html @@ -117,6 +128,9 @@ If a column or row header spans across multiple cells, the `scope` will also be
+``` + +::: In this table, the cell with `Nora`'s age (`5`) will have one column header (`Age`) and two row headers (`Dogs` and `Nora`). `Gino`'s age (`2`) will also have one column header (`Age`) and two row headers (`Dogs` and `Gino`).