Accessibility Dev Tool issues bogus warnings about missing text labels for child elements of SVG with role=img
Categories
(DevTools :: Accessibility Tools, defect)
Tracking
(firefox72 fixed, firefox73 fixed)
People
(Reporter: brennan, Assigned: yzen)
References
Details
Attachments
(2 files)
|
601 bytes,
text/html
|
Details | |
|
47 bytes,
text/x-phabricator-request
|
jcristau
:
approval-mozilla-beta+
|
Details | Review |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
Steps to reproduce:
I am using FF 69.0.1 (64 bit) on Windows 10. Previous versions had the same issue.
Run an 'all' accessibility audit on this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
<h1>hello</h1>
<p>lorem ipsum</p>
<svg role="img" viewbox="0 0 100 50" height="100px">
<title id="siteLogoTitle">Site Logo</title>
<rect x="0" y="00" width="100" height="10" fill="red"></rect>
<rect x="0" y="10" width="100" height="10" fill="salmon"></rect>
<rect x="0" y="20" width="100" height="10" fill="pink"></rect>
<rect x="0" y="30" width="100" height="10" fill="aqua"></rect>
<rect x="0" y="40" width="100" height="10" fill="blue"></rect>
</svg>
</body>
</html>
(Code also attached to this bug report as a html file)
Actual results:
Accessibility tool makes a warning about missing text labels for each of the rect elements, even though the wrapper SVG has role="img" and a well-formed title child element.
This is a false positive.
Expected results:
w3 says "An img represents a single graphic within a document, whether or not it is formed by a collection of drawing objects."
In this case (and in the case of most SVG content) the image will be formed by a collection of drawing objects.
Including a title element (or aria-label attribute, or aria-labeledby attribute) on the SVG element should be sufficient as an accessible name. The accessibility tool should not go hunting for accessible names in the child elements when the SVG parent has role="img". For other roles it might make sense however.
I also tried wrapping the children in <g role="presentation"> and that didn't help either, though it should not be necessary.
WAVE Web Accessibility Tool (a popular Firefox add-on) does not do this.
|
||
Updated•5 years ago
|
|
||
Comment 1•5 years ago
|
||
Just ran into this one as well. Only I am using aria-label on the SVG element, and include the symbol itself via a <use> tag.
It is very annoying that this warning is given for every child element, it makes it hard to focus on the real accessibility issues.
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Comment 2•5 years ago
|
||
|
||
Comment 4•5 years ago
|
||
| bugherder | ||
|
|
Assignee | |
Comment 5•5 years ago
|
||
Comment on attachment 9113791 [details]
Bug 1582409 - ensure that we handle SVGs with role=img correctly when running text-label checks. r=nchevobbe
Beta/Release Uplift Approval Request
- User impact if declined: Users will get false positives when running text-label checks in the accessibility panel when checking SVG content with role="img"
- Is this code covered by automated tests?: Yes
- Has the fix been verified in Nightly?: Yes
- Needs manual test from QE?: No
- If yes, steps to reproduce:
- List of other uplifts needed: None
- Risk to taking this patch: Low
- Why is the change risky/not risky? (and alternatives if risky): Fixed a particular SVG related issue in accessibility checks (a11y panel) + added tests for various cases.
- String changes made/needed: None
|
||
Comment 6•5 years ago
|
||
Comment on attachment 9113791 [details]
Bug 1582409 - ensure that we handle SVGs with role=img correctly when running text-label checks. r=nchevobbe
devtools a11y fix, approved for 72.0b4
|
|
||
Updated•5 years ago
|
|
|
||
Comment 7•5 years ago
|
||
| bugherder uplift | ||
Description
•