dequelabs / dequelabs/axe-core

Consider how hidden text in visible elements impacts rules

Open
#3,734 0 comments 0 reactions 0 assignees View on GitHub
Accessible text color contrast fix
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 13h
Merged PRs (30d)
29

Description

We recently adjusted the `isHiddenForEveryone` method to ensure that elements inside a closed `` tag would be considered hidden, without the actual `details` and `summary` elements getting marked as hidden. This worked, but there is still a bit of a gap, in that child text nodes of the details element will be assumed visible, because the `details` element is visible. The "Hello world" text node in the following should not be considered visible:

```html
Hello world
```

A very similar problem exists on elements with `content-visibility: hidden`, which doesn't hide the element, but hides all child nodes, including text. For example the following "Hello world" text is considered visible by axe-core.

```html

Hello world


```

This has some implications for rules like color-contrast, which should not be testing these hidden text nodes. This problem also has some implications for accessible text, which when testing in Chrome seems to treat elements with `content-visibiity: hidden` as hidden, rather than treating its content as hidden. You can tell from the following example. Axe-core returns "Hello" as the accessible name, but in Chrome this ends up as "Hello planet Earth"

```html


Hello planet Earth

```

Worse yet for details, the following is reported by axe-core as "" but by Chrome as "Hello planet Mars":

```html

Hello
planet Mars

```

This needs testing in other browsers before we can work on a solve.

Contributor guide

Open the contributing guide

Research direction

Start with the isHiddenForEveryone method and reproduce the closed and content-visibility: hidden examples in the issue. Test their text visibility and accessible names in other browsers before deciding how behavior should change. Done means the browser differences are understood and covered by tests before a solution is implemented.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.