Elements must only use allowed ARIA attributes for SVG g element with aria-label

[AleksandrSl]

Product: axe Extension

Sorry for the divergence from the template. It's actually more a question than a bug report.

I have an SVG with a group that renders text as paths and animation library producing this SVG adds aria-label with this text to the group.

<svg >
  <g aria-label="some text" >...</g>
</svg>

Axe (and lighthouse) gives an error "Elements must only use allowed ARIA attributes". I've read a spec and your latest issue about prohibiting aria-label for some roles. The question is does g element has a generic or a group role. I've searched spec for information about g element, found this one (it's old but the latest one). It says that g maps to a group role if I read it right and group role is allowed to have aria-label

I think that in this case title should be used instead of aria-label and will ask the maintainers about that. Though I'm still interested in the reason (partially as the argument to animation library not to use aria-label), whether it's something I don't see in specs or just some empiric rule that no screen readers will handle this the right way.

axe-core version: v4.3.5
extension version: v4.22.1

[WilcoFiers]

@AleksandrSl Can you provide a more complete example of this? Axe-core doesn't account for <g> elements in this. I'm trying to figure out if it should. What things are you grouping?

We'll have to do some testing, but it helps to have more of a real-world example to look at.

[AleksandrSl]

The real-world example looks like this, I removed part of the letters from the group and replaced the image with a black rect to save space in the example, but the sense is still the same.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 520" width="660" height="520"
     preserveAspectRatio="xMidYMid meet"
     style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;">
  <g clip-path="url(#__lottie_element_2)">
    <g transform="matrix(1,0,0,1,35.75,5.72198486328125)" opacity="1" style="display: block;">
      <rect width="517px" height="519px" preserveAspectRatio="xMidYMid slice"
             fill="black"></rect>
    </g>
    <g fill="rgb(255,255,255)" font-size="24" font-family="Fira Code" font-style="normal" font-weight="400" aria-label="    $ docker pull
  darthsim/imgproxy:latest
$ docker run -p 8080:808"
       transform="matrix(0.8571673035621643,-0.5150380730628967,0.5150380730628967,0.8571673035621643,475.1029968261719,359.98699951171875)"
       opacity="1" style="display: block;">
      <path stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4"
            d=" M8.36,-20.5 C8.36,-20.5 6.72,-20.5 6.72,-20.5 C6.72,-20.5 6.72,-16.87 6.72,-16.87 C3.75,-16.58 2.3,-14.7 2.3,-12.76 C2.3,-10.51 3.89,-9.09 6.72,-8.15 C6.72,-8.15 6.72,-1.47 6.72,-1.47 C5.12,-1.6 3.89,-2.34 2.88,-3.36 C2.88,-3.36 1.67,-2.01 1.67,-2.01 C2.73,-0.97 4.45,0.12 6.72,0.24 C6.72,0.24 6.72,3.7 6.72,3.7 C6.72,3.7 8.36,3.7 8.36,3.7 C8.36,3.7 8.36,0.17 8.36,0.17 C11.43,-0.24 13,-2.27 13,-4.57 C13,-7.54 10.78,-8.89 8.36,-9.69 C8.36,-9.69 8.36,-15.18 8.36,-15.18 C9.57,-15.03 10.63,-14.5 11.55,-13.66 C11.55,-13.66 12.79,-14.94 12.79,-14.94 C11.8,-15.83 10.27,-16.68 8.36,-16.87 C8.36,-16.87 8.36,-20.5 8.36,-20.5z M6.72,-15.13 C6.72,-15.13 6.72,-10.22 6.72,-10.22 C4.95,-10.92 4.45,-11.65 4.45,-12.79 C4.45,-14.16 5.41,-14.91 6.72,-15.13z M8.36,-7.59 C10.18,-6.82 10.8,-5.9 10.8,-4.54 C10.8,-2.88 9.96,-1.89 8.36,-1.57 C8.36,-1.57 8.36,-7.59 8.36,-7.59z"
            transform="matrix(1,0,-0.6494075655937195,1,-193.8000030517578,-140.024169921875)" opacity="1"
            style="display: inherit;"></path>
      <path stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4" d=""
            transform="matrix(1,0,-0.6494075655937195,1,-180,-140.024169921875)" opacity="1"
            style="display: inherit;"></path>
      <path stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4"
            d=" M10.05,-18.1 C10.05,-18.1 10.05,-11.48 10.05,-11.48 C9.18,-12.47 8.1,-13 6.62,-13 C3.5,-13 1.64,-10.18 1.64,-6.36 C1.64,-2.39 3.17,0.27 6.5,0.27 C7.88,0.27 9.16,-0.34 10.1,-1.67 C10.1,-1.67 10.3,0 10.3,0 C10.3,0 12.08,0 12.08,0 C12.08,0 12.08,-17.86 12.08,-17.86 C12.08,-17.86 10.05,-18.1 10.05,-18.1z M7.15,-11.36 C8.34,-11.36 9.35,-10.76 10.05,-9.72 C10.05,-9.72 10.05,-3.38 10.05,-3.38 C9.35,-2.32 8.36,-1.35 6.91,-1.35 C4.91,-1.35 3.84,-3.05 3.84,-6.36 C3.84,-9.72 5.05,-11.36 7.15,-11.36z"
            transform="matrix(1,0,-0.6494075655937195,1,-166.1999969482422,-140.024169921875)" opacity="1"
            style="display: inherit;"></path>
    </g>
  </g>
</svg>

[alanfluff]

Hmm. I have an svg littered in g elements and they all/most have an aria-label attribute. But NVDA (Chrome, Win 10) simply does not see/read them.

Although g is allowed to use aria-label, perhaps this is a case of the spec' allowing something, but it's uncommon and so SRs/NVDA only look for this attribute on the svg tag itself?

[alanfluff]

I assume this is relevant and may also be helpful https://stackoverflow.com/a/72658812