Semantic elements in a data table must not be coded as presentational.

This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.

I will use the label Feature Design Notes to this cases

The semantic elements in a data table communicate relationships between cells and row or column headers. When role="presentation" is applied to a data table element, its semantics are suppressed, and critical relationships are consequently hidden from people who use assistive technologies. Moreover, they can't use the standard navigational shortcuts for data tables.

(Applying role="presentation" is appropriate for layout tables, because their table semantics do not communicate any meaningful relationships. #80)

[ ] Do not use role="presentation" on any of the semantic elements in a data table:
```
[ ] Apply semantic structure to the table
Using table markup to present tabular information
Using caption elements to associate data table captions with data tables -Using the summary attribute of the table element to give an overview of data tables
Using the scope attribute to associate header cells and data cells in data tables -Using id and headers attributes to associate data cells with header cells in data tables
Example 1 :x: This data table is incorrectly coded as presentational. Assistive technologies are unaware of the table's semantic elements.
```
 <table role="presentation">
    <tr>
        <th>Park name</th>
        <th>Location</th>
    </tr>
    <tr>
        <td>Bridle Trails State Park</td>
        <td>Kirkland, WA</td>
    </tr>
    <tr>
        <td>Lake Sammamish State Park</td>
        <td>Issaquah, WA</td>
    </tr>
    <tr>
        <td>Saltwater State Park</td>
        <td>Des Moines, WA</td>
    </tr>
</table>
```
:heavy_check_mark: With role="presentation" removed, assistive technologies can help users understand the relationships between cells and column headers.
```
 <table>
    <tr>
        <th>Park name</th>
        <th>Location</th>
    </tr>
    <tr>
        <td>Bridle Trails State Park</td>
        <td>Kirkland, WA</td>
    </tr>
    <tr>
        <td>Lake Sammamish State Park</td>
        <td>Issaquah, WA</td>
    </tr>
    <tr>
        <td>Saltwater State Park</td>
        <td>Des Moines, WA</td>
    </tr>
</table>
```
Related
76
Test Procedure
1. If you find a table, determine whether it is a layout table:
  1. A layout table is used to visually position content without implying any relationships.
  2. A data table organizes content into rows and columns to show relationships.
2. If you find a layout table, Linearize the page to show the page in DOM order.
3. Verify that content in layout tables still has the correct reading order when the page is linearized.
Expect output: Check 3 is true

github-actions[bot] commented 4 years ago

This Feature is ready to be implemented.

github-actions[bot] commented 4 years ago

This Feature is ready to be implemented.
- © Githubissues.
- Githubissues is a development platform for aggregating issues.

solex2006 / SELIProject

Semantic elements in a data table must not be coded as presentational. #83

Related

76

Test Procedure