Closed Bug 1582409 Opened 5 years ago Closed 4 years ago

Accessibility Dev Tool issues bogus warnings about missing text labels for child elements of SVG with role=img


(DevTools :: Accessibility Tools, defect)

Not set


(firefox72 fixed, firefox73 fixed)

Firefox 73
Tracking Status
firefox72 --- fixed
firefox73 --- fixed


(Reporter: brennan, Assigned: yzen)




(2 files)

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">
<meta charset="utf-8" />

<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>

(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.

Component: Untriaged → Accessibility Tools
Product: Firefox → DevTools

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: nobody → yzenevich
Ever confirmed: true
Pushed by
ensure that we handle SVGs with role=img correctly when running text-label checks. r=nchevobbe
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 73

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
Attachment #9113791 - Flags: approval-mozilla-beta?

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

Attachment #9113791 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Flags: qe-verify-
Flags: in-testsuite+
See Also: → 1151648
You need to log in before you can comment on or make changes to this bug.