dequelabs / dequelabs/axe-core
Element content too short/insufficient contrast
- Dominant language
- JavaScript
- Stars
- 7.5k
- Forks
- 933
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 17
Description
### Product
axe Extension
### Product Version
extension: v4.34.0; axe-core: v4.4.2
### Lastest Version
- [X] I have tested the issue with the latest version of the product
### Issue Description
#### Expectation
Pass text with sufficient contrast (or ignore role="presentation") in an embedded SVG.
#### Actual
I have an SVG that shows one of three tic-tac-toe boards: a) unplayed, b) partially-played, c) partially-played with numbered squares. These are used as icons in buttons and are purely presentational. I use a single SVG and alter it with CSS properties, which means that I can't use the picture or img elements but must embed the SVG directly in the HTML (unless you know a better way).
The blank board does fine, but the board with text (numbers or x or o) in the tiny squares causes 9 issues. The issue is Elements must have sufficient contrast, but these letters are black on white background.
Closer examination reveals this: Element content is too short to determine if it is actual text content.
There appears to be very little in the documentation about this, and an online search was similarly unhelpful.
But it cannot be correct that "element content" is too short _in a presentational SVG_. Even contrast should not matter if it is purely presentational (the button has a text label).
#### How to Reproduce
Here is the SVG:
```svg
```
Just stick it in a web page with a white background and run the linter. You should get 9 issues
#### Additional context
Happy to answer any questions. I'm using the Pro version.
Contributor guide
Assessment
This issue has not been assessed yet.