dequelabs / dequelabs/axe-core

Check that native tables with invalid markup are handled correctly

Open
#4,181 1 comment 0 reactions 0 assignees View on GitHub
Epic rules standards
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

Native HTML code has a lot of protections and auto-corrections built into it by the browsers. One of those is that you can't for example put `th` directly into a `thead` element. When you use something like React that doesn't seem to be the case. Because React (and most tools like it) do direct DOM manipulation, it's perfectly possible to append a `th` DOM Element to a `thead` DOM Element. The browser does not create a `tr` when tools take that code path. We've pretty much just always been assuming this is impossible. We need to do some investigation to figure out what the impact of this is. The areas to research are:

1. This means native tables set up with JS libraries are not guaranteed to have proper table structure. This appears to create some accessibility problems. It's been reported to create issues with NVDA. I'd wager the problem is bigger than one screen reader. We should test this and see if we need a new rule in axe-core for this.

2. We're also going to need to look over our existing table code in axe-core and check that it doesn't break in some unexpected way when it tests these no-row native tables.

3. If this happens with tables, it might happen with other HTML elements too. We need to investigate what other assumptions about how the browser corrects HTML we might have made, that wouldn't be true when the HTML is built with DOM calls.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.